DEV Community

Wasef Hussain
Wasef Hussain

Posted on

I built a tool that generates TypeScript fixtures from interfaces and Zod schemas

#typescript #webdev #testing #opensource

Every TypeScript project reaches the same point: you've defined your types, now you need mock data for tests, Storybook stories, or local dev. You end up hand-writing the same boilerplate mockUser, mockProduct, mockOrder objects over and over.

I built FixtureKit to fix that — a free developer tool, not a product pitch.

What it does

Paste a TypeScript interface, type, or a Zod z.object(...) schema → get a copy-ready export const mock… TypeScript fixture.

Try it: https://fixture-kit.vercel.app

Input:

interface Product {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
  tags: string[];
}
Enter fullscreen mode Exit fullscreen mode

Output:

export const mockProduct: Product = {
  id: "f47ac10b-58cc-4372-a567-0e02b2c3d479",
  name: "Wireless Keyboard",
  price: 49.99,
  inStock: true,
  tags: ["electronics", "accessories"],
};
Enter fullscreen mode Exit fullscreen mode

What makes it useful
Semantic field inference — it doesn't just fill every string with "value". Field names like email, name, url, price, createdAt map to realistic value pools. Type compatibility is enforced: you won't get an email string on a number field.

Deterministic output — uses a hash of the field name + fixture index. No Math.random(). Same schema always gives the same output. Safe to commit.

No eval, no backend — Zod schemas parsed with a custom recursive-descent parser. TypeScript schemas use the TypeScript compiler API. Everything runs in the browser.

Generate up to 5 fixtures at once — useful for seeding UI components or table/list test cases.

Supported input
TypeScript: interface, type, arrays, nested objects, optional fields, unions, literal types

Zod: z.object, z.string, z.number, z.boolean, z.array, z.enum, z.union, z.literal, .optional(), .nullable(), nested z.object

Advanced features (generics, utility types, .refine, .transform) are out of scope and return a clear error.

Tech
React 18 · TypeScript 5 · Vite · TypeScript compiler API (in-browser)

Source
https://github.com/Wasef-Hussain/FixtureKit

Feedback welcome — especially on schema shapes I haven't handled well.

Top comments (0)