GraphQL introspection viewer

Downloads in past


2.0.04 months ago7 years agoMinified + gzip package size for graphql-voyager in KB


GraphQL Voyager
graphql-voyager logo
Represent any GraphQL API as an interactive graph. It's time to finally see the graph behind GraphQL. You can also explore number of public GraphQL APIs from our list.
With graphql-voyager you can visually explore your GraphQL API as an interactive graph. This is a great tool when designing or discussing your data model. It includes multiple example GraphQL schemas and also allows you to connect it to your own GraphQL endpoint. What are you waiting for, explore your API!

GraphQL Weekly #42

Live Demo

voyager demo


  • Quick navigation on graph
  • Left panel which provides more detailed information about every type
  • "Skip Relay" option that simplifies graph by removing Relay wrapper classes
  • Ability to choose any type to be a root of the graph


GraphQL Voyager exports Voyager React component and helper init function. If used without module system it is exported as GraphQLVoyager global variable.


Voyager component accepts the following properties:
  • introspection object - the server introspection response. If function is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return Promise which resolves to introspection response object.
  • displayOptions (optional)
- displayOptions.skipRelay boolean, default true - skip relay-related entities - displayOptions.skipDeprecated boolean, default true - skip deprecated fields and entities that contain only deprecated fields. - displayOptions.rootType string - name of the type to be used as a root - displayOptions.sortByAlphabet boolean, default false - sort fields on graph by alphabet - displayOptions.showLeafFields boolean, default true - show all scalars and enums - displayOptions.hideRoot boolean, default false - hide the root type

Using pre-bundled version

You can get GraphQL Voyager bundle from the following places:
  • jsDelivr
- some exact version - - latest version -
  • from dist folder of the npm package graphql-voyager

Note: voyager.standalone.js is bundled with react, so you just need to call renderVoyager function that's it.

HTML example

Using as a dependency

Build for the web with webpack, or any other bundle.

Webpack example


GraphQL Voyager has middleware for the next frameworks:


Middleware supports the following properties:
  • endpointUrl string - the GraphQL endpoint url.
  • displayOptions object - same as here
  • headersJS string, default "{}" - object of headers serialized in string to be used on endpoint url
Note: You can also use any JS expression which results in an object with header names as keys and strings as values e.g. { Authorization: localStorage['Meteor.loginToken'] }


import express from 'express';
import { express as voyagerMiddleware } from 'graphql-voyager/middleware';

const app = express();

app.use('/voyager', voyagerMiddleware({ endpointUrl: '/graphql' }));



Version 17+

import hapi from 'hapi';
import { hapi as voyagerMiddleware } from 'graphql-voyager/middleware';

const server = new Hapi.Server({
  port: 3001,

const init = async () => {
  await server.register({
    plugin: voyagerMiddleware,
    options: {
      path: '/voyager',
      endpointUrl: '/graphql',

  await server.start();



import Koa from 'koa';
import KoaRouter from 'koa-router';
import { koa as voyagerMiddleware } from 'graphql-voyager/middleware';

const app = new Koa();
const router = new KoaRouter();

    endpointUrl: '/graphql',



This tool is inspired by graphql-visualizer project.