GraphQL Schema to TypeScript Generator
Generate TypeScript types from GraphQL SDL schema definitions.
Free online GraphQL to TypeScript converter. Paste a GraphQL SDL schema and instantly generate TypeScript interfaces for all object types, input types, and interfaces. Converts unions to TypeScript union types, enums to union literals, enum keyword, or const objects. Handles nullable fields, ReadonlyArray, and custom scalar type mappings. Runs entirely in your browser — no data is ever sent to a server.
Keywords: graphql to typescript, graphql schema to typescript, graphql to types, graphql to interfaces, graphql sdl to typescript, graphql type generator, graphql typescript converter, convert graphql to typescript, graphql to ts online, graphql schema types generator, graphql typescript types
Tags: graphql, typescript, schema, types, converter, sdl
Popular Developer Tools tools
- JWT DecoderDecode, inspect, and validate JWT tokens with claim and signature analysis.
- Cron ParserParse, validate, explain, and build cron expressions with next run times and visual timeline.
- Regex TesterTest, debug, and explain regular expressions with real-time match highlighting.
- Regex ExplainerBreak down any regex into plain English, token by token.
- AI Token CounterCount tokens and estimate API costs for 100+ LLMs with exact BPE and provider tokenization.
How to GraphQL Schema to TypeScript Generator Online
Paste your GraphQL Schema Definition Language (SDL) into the input panel on the left.
Choose your preferred enum style: union literal types, TypeScript enum keyword, or const object.
Toggle options such as readonly properties, optional fields for nullable types, and custom scalar mappings.
Click "Generate" or press ⌘↵ to produce the TypeScript type definitions.
Copy the output with ⌘⇧C and paste it into your TypeScript project or .d.ts declaration file.
GraphQL Schema to TypeScript Generator Features
Parses complete GraphQL SDL including object types, input types, enums, unions, interfaces, and scalars
Generates TypeScript interfaces for GraphQL object and input types with accurate nullable/required mapping
Three enum output styles: TypeScript union literal types, enum keyword, or const object with as const assertion
Handles nullable fields (Type vs Type | null | undefined) following GraphQL's explicit nullability model
Generates union types for GraphQL union types using TypeScript discriminated union patterns
Interface types in GraphQL map to TypeScript interfaces that are then extended by implementing types
Optional readonly modifier on all generated properties for immutable type patterns
Custom scalar type mapping — configure ID, Date, DateTime, JSON to your preferred TypeScript types
GraphQL ID scalar maps to string by default (consistent with Apollo and urql clients)
Runs entirely in your browser — your schema is never uploaded to any server
Keyboard shortcut ⌘↵ to generate, ⌘⇧C to copy TypeScript output
In-Depth Technical Guides
All GuidesRelated Standards & RFC Specifications
All StandardsGraphQL is an open-source data query and manipulation language for APIs, developed by Meta in 2012 and governed by the GraphQL Foundation.
TypeScript is a strongly typed, object-oriented superset of JavaScript developed by Microsoft that compiles to clean, readable JavaScript across any runtime.
Pre-built Automation Pipelines
Chain GraphQL Schema to TypeScript Generator with other utilities in a multi-step visual workflow.
Base64 Decode → JSON Format
Decode a Base64 string and pretty-print the JSON inside it.
CSV → JSON → YAML
Convert CSV data to JSON, then to YAML format.
JSON Format → TypeScript Schema
Format JSON and generate TypeScript/Zod schema from it.
Example Input & Output
Sample ReferenceInteractive Example: GraphQL Schema to TypeScript Generator in ActionShow example
Sample Input (text)
type User {
id: ID!
name: String!
email: String!
role: UserRole!
orders: [Order!]!
createdAt: String
}
type Order {
id: ID!
userId: ID!
items: [OrderItem!]!
total: Float!
status: OrderStatus!
}
type OrderItem {
productId: ID!
quantity: Int!
price: Float!
}
enum UserRole {
ADMIN
CUSTOMER
VENDOR
}
enum OrderStatus {
PENDING
CONFIRMED
SHIPPED
DELIVERED
CANCELLED
}
input CreateUserInput {
name: String!
email: String!
role: UserRole
}Sample Output
[Processed output for GraphQL Schema to TypeScript Generator]
Input transformed successfully using graphql to typescript, graphql schema to typescript, graphql to types.What happened:
Generate TypeScript types from GraphQL SDL schema definitions.
Pairwise Format Converters
All ConvertersConvert JSON to GraphQL Schema Definition
Free, 100% client-side private JSON to GraphQL Schema Definition converter. Transform syntax instantly in your browser with zero data logging, strict AST validation, and CLI support.
Convert YAML to TypeScript Interfaces
Free, 100% client-side private YAML to TypeScript Interfaces converter. Transform syntax instantly in your browser with zero data logging, strict AST validation, and CLI support.
Convert YAML to GraphQL Schema Definition
Free, 100% client-side private YAML to GraphQL Schema Definition converter. Transform syntax instantly in your browser with zero data logging, strict AST validation, and CLI support.
Convert TOML to TypeScript Interfaces
Free, 100% client-side private TOML to TypeScript Interfaces converter. Transform syntax instantly in your browser with zero data logging, strict AST validation, and CLI support.
Convert TOML to GraphQL Schema Definition
Free, 100% client-side private TOML to GraphQL Schema Definition converter. Transform syntax instantly in your browser with zero data logging, strict AST validation, and CLI support.
Convert CSV to TypeScript Interfaces
Free, 100% client-side private CSV to TypeScript Interfaces converter. Transform syntax instantly in your browser with zero data logging, strict AST validation, and CLI support.
Frequently Asked Questions
- Which GraphQL SDL constructs are supported?
- The generator supports: object types (type Foo), input types (input FooInput), enums (enum Status), union types (union Result = A | B), interface types (interface Node), scalar declarations, and extend type constructs. Query/Mutation/Subscription operation definitions (query MyQuery) are not processed — this tool generates type definitions from schema SDL, not from operation documents.
- How are nullable fields handled?
- In GraphQL, fields are nullable by default — adding ! makes them non-null. The generator maps nullable fields to `Type | null` in TypeScript and non-null fields to `Type`. For optional object fields, you can enable the option to also add `| undefined` to represent fields that may be absent from partial response objects.
- Which enum style should I use?
- Union literal types (`type Status = "ACTIVE" | "INACTIVE"`) are recommended for most projects — they are the most idiomatic TypeScript and work seamlessly with string comparisons. Use the `enum` keyword if your project already uses TypeScript enums consistently. Use `const object` if you need runtime enum values without TypeScript enum semantics.
- What about custom scalars like Date or JSON?
- Custom scalars declared in your schema (e.g., `scalar DateTime`) default to `unknown` in the generated output. Configure the custom scalar mapping option to map them to your preferred TypeScript types — for example, DateTime → string, Date → Date, JSON → Record<string, unknown>.
- How does this compare to GraphQL Code Generator?
- GraphQL Code Generator (graphql-codegen) is a powerful CLI tool that generates types from both schema and operation documents, supports plugins, and integrates with build pipelines. This browser tool is a lightweight alternative for quick type generation from schema SDL — ideal for exploration, prototyping, or one-off type extraction without installing dependencies.
- Can I use the generated types with Apollo Client or urql?
- Yes. The generated TypeScript interfaces match the shape of data returned by GraphQL queries. For full typed operations (query result types, variable types), you also need types generated from your operation documents — use graphql-codegen for complete Apollo/urql type safety in a production project.
- Is my GraphQL schema safe to paste here?
- Yes. Schema parsing and TypeScript generation run entirely in your browser — your schema is never sent to any server. GraphQL schemas rarely contain sensitive data, but this is still a useful assurance for internal or proprietary API schemas.
- What about GraphQL fragments?
- Fragment definitions in SDL are not common — fragments are typically part of operation documents, not schema definitions. The generator processes SDL type definitions only. For generating TypeScript types from operation fragments, use graphql-codegen with the TypeScript Operations plugin.
Related Developer Tools
- OpenAPI to TypeScript ConverterConvert OpenAPI/Swagger specs (JSON or YAML) to TypeScript interfaces, types, or Zod schemas.
- GraphQL Query BuilderBuild and test GraphQL queries with schema introspection and AI suggestions.
- JSON to TypeScriptConvert JSON to TypeScript interfaces or type aliases instantly.
- JSON to Zod SchemaConvert JSON to Zod schema definitions with automatic TypeScript type inference.
- JSON to TypeScript & Schema GeneratorGenerate TypeScript interfaces, Zod schemas, and Valibot schemas from JSON.
- JSON to Protobuf Schema GeneratorGenerate Protocol Buffer (.proto) schema definitions from JSON objects.
- Protobuf InspectorParse and inspect Protocol Buffer .proto files — view message structures, field types, enums, and services.