DEV Community

Cover image for Delightful TypeScript Mock Generator - Generate Realistic Test Data from Your Interfaces
Qwerty
Qwerty

Posted on

Delightful TypeScript Mock Generator - Generate Realistic Test Data from Your Interfaces

#typescript #webdev #testing #opensource

Hello fellow developers! 👋

I was frustrated developing with a single example json file, so I called to the internet, but the internet didn't call back. The only thing I found were other lost souls looking for answers... so I made my own and I find it incredibly delightful to play with. I wanted to share it with you, because I think you might like it too.

It's a TypeScript Mock Data Generator that creates realistic test data from your interfaces or other JSONs.

Instead of manually writing mock data or struggling with generic generators, just paste your TypeScript interface or existing JSON example and get properly structured, realistic data instantly.

🔗 Try it live: https://ts-mock-generator.qwerty.art/

🔗 GitHub: https://github.com/ackvf/ts-mock-generator

Why I Built This

I was tired of:

  • Waiting for backend APIs and working with single static example
  • Manually creating mock data for development or tests
  • Getting { name: "string", email: "string" } from basic generators
  • Losing time on tedious setup for prototypes
  • Creating inconsistent test data across projects

So I made a tool that just... works. Copy, click, paste, BAM!, click and you're done. Simple as that.

The Cool Parts

1. Smart Field Recognition

The generator actually reads your field names and generates appropriate data. No configuration needed:

interface User {
  email: string       // → "alex.chen@example.com"
  firstName: string   // → "Alex"
  age: number         // → 32
  city: string        // → "San Francisco"
  phoneNumber: string // → "+1-555-0123"
  avatar: string      // → "https://cloudflare-ipfs.com/ipfs/..."
}
Enter fullscreen mode Exit fullscreen mode

It recognizes 50+ common patterns: emails, names, addresses, phone numbers, UUIDs, URLs, dates, prices, and more.

2. Type Names Matter (The Secret Sauce!)

Can't change property names? Name your types meaningfully, and the generator picks up on it:

type First = string
type Age = number
type Email = string

interface Person { // Uses the type name as a hint!
  n: First         // → "Emma" 
  a: Age           // → 27
  c: Email         // → "emma@example.com"
}
Enter fullscreen mode Exit fullscreen mode

This is technically breaking TypeScript rules (type aliases should be transparent), but for mock generation? It's perfect! The generator treats type names as semantic hints.

3. "Invalid" Patterns That Work Beautifully

The tool allows some TypeScript patterns that are technically invalid but create amazing mocks:

type First = string
type Age = string

interface Data {
  // This "breaks" TypeScript index signature rules...
  users: { [name: First]: Age }
} 
  // But generates perfect output:
  // { "Emma": 24, "James": 19, "Sofia": 31 }
Enter fullscreen mode Exit fullscreen mode

The generator tolerates these "violations" because they make for better, more readable mock data!

4. Reproducible Results

Set a seed number, get the same data every time:

Seed: 42
Enter fullscreen mode Exit fullscreen mode

Your last 3 seeds are saved and clickable—super handy when you finally clicked enough times to get the perfect random mock, but you clicked one too many!

5. Advanced TypeScript Support

It handles the complex stuff too:

Template Literals:

type Category = 'ELEC' | 'FURN' | 'CLTH'
type Size = 'SM' | 'MD' | 'LG'
type SKU = `${Category}-${number}-${Size}`
// Generates: "ELEC-8472-LG"
Enter fullscreen mode Exit fullscreen mode

Insane depth is not a problem!

type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
type FourDigit = `${Digit}${Digit}${Digit}${Digit}`
type CardNumber = `${FourDigit} ${FourDigit} ${FourDigit} ${FourDigit}`

interface Card {
  number: CardNumber // → "8452 4675 4126 6009",
}
Enter fullscreen mode Exit fullscreen mode

Utility Types:

interface Config {
  partial: Partial<User>
  picked: Pick<User, 'name' | 'email'>
  omitted: Omit<User, 'password'>
  lowercase: Lowercase<string>  // → "john"
}
Enter fullscreen mode Exit fullscreen mode

Intersection Types:

interface Employee {
  info: { name: string } & { id: number } & { role: string }
  // Merges into: { name: "John", id: 123, role: "Engineer" }
}
Enter fullscreen mode Exit fullscreen mode

Collections:

interface Store {
  inventory: Map<string, number>
  categories: Set<string>
  tags: [string, string, string]
  employees: {
    [name: string]: Age // → "Elbert Funk": 63
  }
}
Enter fullscreen mode Exit fullscreen mode

6. JSON ↔ TypeScript

Works both ways:

  • TypeScript → JSON: Generate mock data
  • JSON → TypeScript: Paste API response, get interfaces

Great for working with external APIs!

Real Usage Examples

Quick prototyping with Realtime output:

The generator updates mock data as you type, so you can quickly iterate on your interfaces and see realistic data instantly. It will not break on errors, just shows nulls until valid.

interface BlogPost {
  id: string                            // → "b3f1c2e4-5d6a-7b8c-9d0e-f1a2b3c4d5e6"
  title: string                         // → "Understanding TypeScript Generics"
  author: string                        // → "Sophia Lee"  
  content: stri| // <- still typing     // → null
  tags: string[]                        // → ["typescript", "programming", "webdev"]
}
Enter fullscreen mode Exit fullscreen mode

Test data:

  • Always use seed 12345 in tests
  • Everyone gets identical mock data
  • Tests are reproducible

Database seeding:

  • Generate 1000 users
  • Seed: 999
  • Same data every dev environment reset

Under the Hood

Built with:

  • Next.js for the UI
  • TypeScript Compiler API for parsing
  • Faker.js for realistic data generation
  • Runs 100% in your browser—no backend!

About Faker.js

The realistic data comes from Faker.js, which has tons of generators for names, addresses, images, lorem ipsum, and more. The tool maps TypeScript field names to appropriate Faker methods.

Future idea: Add knobs and sliders to customize data generation (e.g. age ranges, locales).

Try It!

Paste this into the generator:

interface User {
  id: string
  name: string
  age: number
  contact: [phone: string, email: string]
  isActive: boolean
  role: 'admin' | 'user' | 'guest'
  tags: string[]
  children: [Child] | [Child, Child]
  address: Address
}

interface Address {
  street: string
  city: string
  country: string
}

type Child = `${First} ${Digit}`
type First = string
type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
Enter fullscreen mode Exit fullscreen mode

Hit generate and see what happens! ✨

One more thing

I almost forgot, it has a dark mode! 🌙 How awesome is that!

Screenshot with a transition between a dark and a light theme

Open Source & Looking for Ideas

The project is open source and I'd love contributions!

  • Support for more TypeScript patterns
  • Integration with more faker mocking functions, or other mock data libraries
  • Custom field mapping configuration
  • CLI tool
  • VS Code extension
  • API

I am happy to receive Suggestions for improvements and Bug reports.

Check it out: https://github.com/ackvf/ts-mock-generator

Wrapping Up

This started as a weekend project and turned into something I just play with all day. It's snappy and so delightful to use. 🤗 If you work with TypeScript and need mock data, give it a shot!

Found it useful? Star the repo, share it, or drop suggestions in the comments! 🙌

Stack: Next.js, TypeScript, Faker.js, Tailwind CSS, Shadcn/ui, Base UI

Tags: #typescript #webdev #testing #opensource #mockdata #json

Top comments (2)

Collapse
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen •

nice!

Collapse
 
effnd profile image
Marat Sabitov •

Nice tool! I think this will work great with tRPC, have you thought about creating some kind of extension or middleware?