GraphQLab

A fast, local-first, zero-dependency GraphQL workbench that runs entirely in your browser.

GraphQLab is a complete GraphQL development environment with no build step, no npm install, no framework, and no network dependency. Open index.html and start writing queries immediately.

Why GraphQLab?

	GraphQLab	GraphiQL	Apollo Studio
Dependencies	Zero	React + build tooling	Cloud service
Runs offline	✅	✅	❌
Local mock execution	✅	❌	❌
Hand-written lexer/parser	✅	graphql-js	graphql-js
File size	~40 KB	~1 MB+	N/A

Most GraphQL tools ship with a heavyweight runtime. GraphQLab is a single-page app you can open from a USB stick, embed in a docs site, or use in an air-gapped environment.

Features

• Zero dependencies — every module (lexer, parser, highlighter, schema parser, autocomplete, formatter, mock engine) is hand-written in plain JavaScript.
• Syntax highlighting — a hand-written GraphQL lexer colors queries, SDL, variables and results.
• Context-aware autocomplete — suggests fields, arguments, enum values, directives and variables based on your schema and cursor position.
• Schema explorer — load an SDL and browse all types, fields and enums in a collapsible sidebar.
• Local mock execution — run queries against your SDL with deterministic placeholder data, no server required.
• Real endpoint support — point at any GraphQL endpoint to execute live queries.
• Query formatter — one-click prettify with consistent indentation.
• History — recall your last 20 runs.
• Keyboard shortcuts — Cmd/Ctrl+Enter to run, Shift+Cmd/Ctrl+F to prettify, Cmd/Ctrl+Space to force completion.
• Privacy — everything runs locally; your queries never leave your machine unless you configure an endpoint.

Quick Start

Option A — Just open it

git clone https://github.com/yourname/graphqlab.git
cd graphqlab
open index.html        # macOS
# or double-click index.html on Windows/Linux

Option B — Local server

cd graphqlab
python3 -m http.server 8000
# open http://localhost:8000

Option C — Run the tests

node tests/run.js

Usage

1. Write a query in the Query editor. Syntax is highlighted as you type.
2. Load your schema — click Load SDL in the sidebar, paste your SDL, and click Apply Schema. The sidebar now shows all your types.
3. Run — with no endpoint configured, GraphQLab executes your query against the schema locally and returns deterministic placeholder data. Configure an endpoint URL in the toolbar to run against a real server.
4. Explore — click any type in the sidebar to expand its fields.

Example

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
    posts {
      title
      comments {
        body
      }
    }
  }
}

{
  "id": "1"
}

Architecture

graphqlab/
├── index.html          # single-page entry
├── css/
│   └── style.css       # dark, Linear-style theme
├── js/
│   ├── lexer.js        # hand-written GraphQL tokenizer
│   ├── parser.js       # recursive-descent query parser (AST)
│   ├── highlighter.js  # token -> HTML highlighter
│   ├── schema.js       # SDL parser + type registry
│   ├── autocomplete.js # context-aware completion engine
│   ├── formatter.js    # query pretty-printer
│   ├── mock.js         # local mock execution engine
│   ├── editor.js       # textarea + overlay editor component
│   └── app.js          # application shell
└── tests/
    └── run.js          # zero-dependency test suite (43 assertions)

Every module is an IIFE attached to window, so the whole app works without a bundler and each module can be unit-tested in isolation with Node.

Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + Enter	Run query
Shift + Cmd/Ctrl + F	Prettify query
Cmd/Ctrl + Space	Force autocomplete
↑ / ↓ / Enter / Esc	Navigate autocomplete popup

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge). No polyfills required.

Roadmap

• Collapsible JSON tree in the results panel
• Schema search and grouping (Root / Object / Scalar / Enum / Input)
• Resizable panels
• Light theme
• Export/import workspace as a single file

License

MIT

---

GraphQLab · zero-dependency GraphQL workbench · 简体中文 · 繁體中文