GraphQL Codegen Online

Generate TypeScript types from GraphQL schemas with style

GraphQL Endpoint
Enter a GraphQL API endpoint to generate TypeScript types
Custom Headers

Output Format

Currently generating: TypeScript Types

Generated Types

Enter a GraphQL endpoint and click "Generate Types" to get started

Or press Ctrl + Enter to generate

Quick Start Guide

Using URL Parameters

You can also pass the GraphQL endpoint as a URL parameter:

/?graphqlApiEndpoint=https://spacex-production.up.railway.app/

Schema Definition Mode

Paste GraphQL schema definitions directly:

type Query { user: User posts: [Post!]! } type User { id: ID! name: String! email: String! } type Post { id: ID! title: String! content: String! author: User! }

Example Endpoints

Try these public GraphQL APIs:

  • Countries API: https://countries.trevorblades.com/
  • SpaceX API: https://spacex-production.up.railway.app/
  • Star Wars API: https://swapi-graphql.netlify.app/.netlify/functions/index
Why Use GraphQL Codegen Online?

Transform your GraphQL schemas into TypeScript types instantly with our free online GraphQL Codegen tool. No installation required - just paste your GraphQL endpoint and generate production-ready TypeScript types, React Query hooks, GraphQL Request SDKs, and more.

🚀 Key Features & Benefits:

Multiple Output Formats

TypeScript types, React Query hooks, GraphQL Request SDK, Typed Document Nodes, and more.

Custom Headers Support

Work with authenticated APIs using Bearer tokens, API keys, and custom headers.

Real-time Generation

Instant code generation with performance metrics and file size tracking.

Developer-Friendly

Copy to clipboard, download files, keyboard shortcuts, and dark mode support.

💝 Free & Secure

No registration required, secure server-side processing, and completely open-source. We don't store your GraphQL schemas or generated code.