Paste GraphQL SDL, get ready TypeScript types
You have a SDL from a backend and you need TypeScript types on the client. No Apollo Codegen setup, no config file, no CI plugins. Paste the schema on the left, get a ready `schema.types.ts` on the right, copy or download, drop it in your project.
The generator walks the AST of the parsed schema (we use the official `graphql` package, the same one Apollo and Yoga themselves use), so it understands every construct: `type`, `interface`, `enum`, `union`, `input`, `scalar`, and nullable vs non-nullable !. Lists get wrapped in `Array<T>`, input type get their own TS interface (we keep the `UserInput` style name so it does not collide with `User`).
Everything runs in Node on your side (a Next.js route handler) and the schema never leaves your infrastructure for any third party.
How to use it
- Paste GraphQL SDL into the left pane. The default sample includes a `type User`, an `input UserInput` and an `enum Status` so you see the output shape immediately.
- Pick `interface` over `type`. `interface` is closer to how teams write types by hand, supports declaration merging and `extends`. `type` is better for schemas with many unions or mapped types.
- Turn on "JSDoc from descriptions" if your schema has `"""field description"""` above fields. The generator rewrites them as JSDoc above the TS, so your IDE shows tooltips on hover.
- Pick a nullable style: `T | null` (most readable, no imports) or `Maybe<T>` (an alias helper, matches Apollo Codegen). The scalar map works the same way for both.
- Turn on "Connection / Edge / PageInfo" if your schema uses the Relay pagination pattern. The generator adds generic `Connection<T>`, `Edge<T>` and `PageInfo` at the top of the file.
- Edit the scalar map to map your custom scalar: `DateTime -> string` (most common, server returns ISO 8601), or `Date -> Date` if the client deserializes, `JSON -> Record<string, unknown>`, `BigInt -> string` (safer than `bigint` with JSON).
- Click "Copy" to put the result on your clipboard or "Download" to save it as `schema.types.ts`. Paste it into your project, import the types, done.
When this is useful
Five situations where this generator saves you an hour of codegen setup:
- Small project, you do not want Apollo Codegen. Apollo Codegen / GraphQL Code Generator are powerful but require config files, a watch mode, and plugin installs. For 20 types from a Hasura or PostGraphile schema it is simpler to paste the SDL here once, generate, drop into `types.ts` and move on.
- Adopting a public GraphQL API (GitHub, Shopify, Stripe). You fetch the introspection schema via `graphql-cli get-schema`, paste the SDL, get the client types instantly. No wiring their pipeline into your CI.
- Migrating from REST to GraphQL and you already have REST types you do not want to clash. The generator emits `UserInput` as a separate type (it does not overwrite `User`), so you can keep both in one file with no collisions.
- Documenting the schema for the frontend team. Frontend engineers do not want to learn GraphQL SDL. Paste the schema here, send the generated TS - the other team sees the same types as the backend, but in the language they know.
- Building test mocks. The interfaces emitted here are ideal for `Factory<User>` in `vitest` / `jest`: you mock server responses, the compiler checks you have not forgotten a field.
For REST APIs the matching tool is OpenAPI to TypeScript. For one-off JSON samples without a schema, JSON to TypeScript is faster.