JSPM – graphql-birdseye@1.1.2-rc1

Package Exports

graphql-birdseye

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (graphql-birdseye) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Birdseye is a dynamic and interactive tool that allows you to visualize any GraphQL schema.
Try it out now: http://birdseye.novvum.io/

Description

Birdseye gives you the ability to view any GraphQL schema as a dynamic and interactive graph. It helps teams understand and visualize the nodes and connections within their GraphQL schema. Birdseye was built using jointJS and makes for a lightweight addition to any React project.

Birdseye was heavily inspired by GraphQL Voyager and the folks at Apis-guru. We found that Voyager would add 1.2 MB to the projects we wanted to use it in, which was too big for us. We solved our problem by creating Birdseye, which has a bundle size of less than 200 KB. Birdseye is open source and free for any developers to use and explore.

Features

Graphical view of any GraphQL schema
Click on a field or type to view its connections
Dynamic zooming style of navigation to focus on portions of the graph
Add to any React project
Customizable theming

Installation

Install using NPM or yarn

NPM

npm install --save graphql-birdseye

Yarn

yarn add graphql-birdseye

Usage

Here’s an example of how to use Birdseye in a React project. See the API Reference for how to pass your schema to the component.

import * as React from 'react';

import GraphqlBirdseye from 'graphql-birdseye';

class Example extends React.Component {
  render() {
    return <GraphqlBirdseye schema={this.props.schema} />;
  }
}

See a full example in the repository.

API

Name	Type	Description
introspectionQuery	JSON object	Pass your schema as a JSON of an introspection query response. Use this introspection query to return your schema as a GraphQL schema object.
schema	GraphQL schema object	Pass your schema as a GraphQL schema object. Return using makeExecutableSchema from GraphQL tools.
style	object	Pass in an object to style the container
theme	object	An object defining the theme of the components. See a full example.

Roadmap

We have plans to keep improving Birdseye. Here's what is next.

Improve performance for larger schemas
Option to toggle zoom navigation style
Smoother UI transitions and interactions

Contributing

This is an open source project. To learn how to contribute, please check out our contributor guidelines (coming soon).

License

MIT © Novvum

Made with ❤️ by Novvum