GraphQL Schema to JSON Mock Generator

Paste your SDL schema and get a live JSON mock response. Real-time, client-side, no install required.

List Length
1 10
3
Nesting Depth
1 5
2
Mode
Static Types Smart Data
// Schema Input (SDL)
// JSON Mock Output
⚠
Invalid GraphQL Syntax

          

        


      

    


    
    
    

    
    

      
Key Terms Explained

      

        

          
GraphQL

          
A query language for APIs developed by Facebook in 2012 and open-sourced in 2015. Unlike REST, GraphQL lets clients request exactly the fields they need, reducing over-fetching and under-fetching. The server exposes a single endpoint that accepts structured queries.

        

        

          
Schema Definition Language (SDL)

          
The human-readable syntax used to define a GraphQL schema. SDL describes every type, field, argument, enum, and relationship in a schema using plain text. It is language-agnostic - the same SDL works whether your server is Node.js, Python, Go, or any other language.

        

        

          
Abstract Syntax Tree (AST)

          
A tree data structure that represents the parsed structure of source code. When this tool reads your SDL, it converts the raw text into an AST - a nested object where each node represents a type definition, field, or argument. The mock generator then walks this tree to produce JSON.

        

        

          
Scalar Types

          
The primitive leaf values in a GraphQL schema - String, Int, Float, Boolean, and ID. Scalars cannot have sub-fields; they always resolve to a single concrete value. Custom scalars like Date or JSON can be declared using the scalar keyword.

        

        

          
Resolver

          
A function in the GraphQL server that fetches or computes the value for a single field. When a client sends a query, the server calls the resolver for each requested field. Mocking removes the need for real resolvers during early frontend development.

        

        

          
Mutation

          
A GraphQL operation that writes data, analogous to POST, PUT, or DELETE in REST. Mutations are defined in a special root type called Mutation. Like queries, they return a typed response - the same schema types used for reads can appear in mutation responses.

        

        

          
Circular Dependency

          
When two or more types in a schema reference each other, creating a cycle. For example: User has friends of type User, and Post has an author of type User who has posts. GraphQL allows this, but a naive mock generator would loop forever. This tool breaks cycles using a visited-type tracker and depth limit.

        

        

          
Enum

          
A special scalar type restricted to a defined set of named values. In SDL, enums are declared with the enum keyword. At runtime, an enum field can only hold one of its declared values. This tool always picks the first declared enum value for mock output.

        

      

    


    
    

      
The Complete Guide to GraphQL Schema Mocking


      

        Modern API development rarely has frontend and backend teams finishing work at the same time. The schema is agreed on first - it is the contract between client and server. This tool turns that schema contract into usable mock data instantly, letting your frontend team write real components against real data shapes before a single resolver is implemented.
      


      
How to Use This Tool

      

        Paste any valid GraphQL SDL schema into the left panel. The tool parses it in real time and generates a JSON mock response in the right panel. The output mirrors exactly the shape a real GraphQL API would return, starting from the Query root type (or the first defined type if your schema has no Query).
      

      

        Use the List Length slider to control how many items appear in array fields. Use the Nesting Depth slider to limit how deeply nested objects are generated - especially important for schemas with circular references like User.friends: [User]. Switch between Smart Data (field-name heuristics) and Static Types (bare placeholder values) depending on whether you need presentable output or just shape verification.
      


      
How the SDL Parser Works

      

        The tool includes a complete custom SDL tokenizer and recursive-descent parser written in plain JavaScript - no external libraries, no network calls. The tokenizer reads your schema character by character, discarding comments (lines starting with #) and block-string descriptions ("""..."""), then produces a flat stream of tokens: names, punctuation marks, and structural characters.
      

      

        The parser then walks that token stream to reconstruct the type graph: object types, enum types, union types, interface types, and custom scalars. Fields are read with their full type references, including list wrappers ([Post!]!) and non-null modifiers (!). Directives and argument definitions on fields are gracefully skipped since they do not affect the mock output shape.
      


      
Smart Data Field Heuristics

      

        In Smart Data mode, the mock engine inspects each field name before deciding what value to generate. A field named email returns [email protected]. A field named createdAt returns an ISO 8601 timestamp. A field named avatar returns a plausible image URL. A field named slug returns sample-slug. These heuristics make the mock output readable enough to paste directly into a Figma mockup or share in a Slack design review without looking like raw placeholder data.
      


      
Circular Reference Protection

      

        The mock generator uses two complementary defenses against infinite recursion. The Nesting Depth slider sets a hard limit on how many levels deep the generator will traverse from the root. Separately, a per-branch visited-type set tracks which types are already being built on the current stack. If the generator encounters a type it is already building (indicating a cycle), it substitutes null immediately rather than recursing. This means User.friends[0].friends[0] will stop building at the depth limit, never spiraling forever.
      


      
Reading the Generated Output

      

        The JSON output wraps everything in a data envelope, matching the actual response format a GraphQL server returns. Each field on the Query type becomes a top-level key inside data. If your schema has a Query type with user and posts fields, the output will have data.user as an object and data.posts as an array with as many items as your List Length slider specifies.
      


      
      
Frequently Asked Questions


      

        

          Why mock a GraphQL API before the backend is finished?
          ▼
        

        
Mocking lets frontend teams build and test UI components against realistic data shapes before the backend resolvers exist. Instead of waiting for the API to be ready, you paste your agreed-upon schema into this tool and get a valid JSON response your components can consume immediately. This decouples frontend and backend development cycles, catching data structure mismatches early when they are cheap to fix rather than late in integration testing.

      


      

        

          How does this tool handle circular references in my schema?
          ▼
        

        
GraphQL schemas often have circular relationships - for example, a User type that has a friends field returning a list of User objects, each of which also has friends. This tool uses a nesting depth limit slider (default: 2 levels) combined with a visited-type tracker. When the generator encounters a type it has already started building on the current branch, it returns null rather than recursing infinitely. The depth limit provides a hard ceiling so even deeply nested non-circular schemas stay manageable.

      


      

        

          What are the default scalar types in GraphQL?
          ▼
        

        
GraphQL ships with five built-in scalar types: String (UTF-8 text), Int (signed 32-bit integer), Float (double-precision floating point), Boolean (true or false), and ID (a unique identifier serialized as a string). Schemas can also declare custom scalars - for example, Date, DateTime, JSON, or URL - using the scalar keyword. This tool generates sensible placeholder values for all five built-in scalars and falls back to a generic string value for any custom scalars it encounters.

      


      

        

          Why does this run entirely in the browser instead of on a server?
          ▼
        

        
Client-side execution means your schema never leaves your machine. Production schemas often contain proprietary type names, business logic clues, and internal data structures that your organization may not want transmitted to a third-party server. Running the SDL parser and mock generator directly in your browser's JavaScript engine eliminates that risk entirely. It also means the tool works offline, has zero latency from network round trips, and requires no account or API key.

      


      

        

          What is the difference between Static Types and Smart Data mocking modes?
          ▼
        

        
Static Types mode generates the simplest possible placeholder for each scalar - the string "string", the number 0, and the boolean true. This is useful when you only care about the shape of the response, not the content. Smart Data mode reads the field name and applies heuristics: a field named email gets [email protected], a field named createdAt gets an ISO timestamp, a field named price gets a realistic decimal number. Smart Data mode produces mock responses that are much easier to visually validate and share with stakeholders.