node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


GraphiQL Workspace

npm version

A graphical interactive in-browser GraphQL IDE (GraphiQL), enhanced with following features:

  • Tabbed navigation
  • HTTP header editor
  • Arbitrary endpoint support
  • Workspace save/load (as JSON file)
  • Local storage support
  • Request proxy
  • Saved queries
  • Query history

You can use it in your own projects like this:

import React from 'react';
import ReactDOM from 'react-dom';
import {GraphiQLWorkspace, AppConfig} from 'graphiql-workspace';
import 'graphiql-workspace/graphiql-workspace.css'
import 'graphiql/graphiql.css'
const config = new AppConfig("graphiql", bootstrapOptions);
ReactDOM.render(<GraphiQLWorkspace config={config} />, document.getElementById('graphiql-workspace'));

You still will need to add bootstrap CSS in you final application. For instance, you can use bootstrap-loader in webpack config. For an example application, that uses graphiql-workspace, check out graphql-toolbox

Here is how it look like in your browser:


Getting started

After you cloned the project, do the npm install and then use ./scripts/ or ./scripts/ to build the project.

In order to see it in action, you can use an example html page ./example/index.html.

Standalone Usage

Here is an example HTML:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GraphiQL Workspace Example</title>
    <link rel="stylesheet" media="screen" href="//">
    <link rel="stylesheet" media="screen" href="//">
    <link rel="stylesheet" media="screen" href="//">
    <script src="//"></script> 
    <script src="//"></script> 
    <script src="//"></script> 
    <div id="workspace" class="graphiql-workspace"></div>
      var config = new graphiqlWorkspace.AppConfig("graphiql", {});
        React.createElement(graphiqlWorkspace.GraphiQLWorkspace, {config: config}),


  • graphiql-workspace-app — an instance of create-react-app that wrapps graphiql-workspace. Can be easily launched at as a lightweight Docker container (< 20MB). Hosted on GitLab.