Integrate once. Endless demo data.
DemoKit intercepts your app’s fetch calls and generates demo data for any story you need. Your real app is the demo — no backend changes.
The whole integration
Wrap your app in a provider, map your routes, open ?demo=true. Your backend never knows.
import { DemoKitProvider, DemoModeBanner } from '@demokit-ai/react' const fixtures = { 'GET /api/users': () => [{ id: 'u_1', name: 'Maya Chen' }], 'GET /api/users/:id': ({ params }) => ({ id: params.id, name: 'Maya Chen', }),} export function App() { return ( <DemoKitProvider fixtures={fixtures}> <DemoModeBanner /> <YourApp /> </DemoKitProvider> )}Install
npm install @demokit-ai/reactWrap your root component
Fixtures are the URL patterns you already have. :params and * wildcards match the rest.
Open ?demo=true
Demo mode survives refreshes. Toggle it off and every fetch goes back to your real API.
Any React app that talks to an HTTP API over fetch works the same way. DemoKit patches fetch itself, so React Query, SWR, and plain fetch need no extra wiring. Read the docs.
Demo data has three levels
Schema-valid is table stakes. Coherent is the hard part. L1 and L2 run offline; L3 writes the story.
import { generateDemoData } from '@demokit-ai/core' const { data } = generateDemoData(schema, { level: 'schema-valid', counts: { User: 10, Order: 40 }, seed: 42,})// every field matches your OpenAPI typesEvery field is the right type
Import your OpenAPI spec. Every field matches its type, every enum holds a legal value, and every run reproduces from a seed. No AI involved, no network.
Demo environments that don't break mid-pitch
No staging fork. No fake user named "asdf" in the screenshot. DemoKit sits on top of your real app and swaps the data for the demo.
Intercepts fetch, never your backend
DemoKit patches the client’s fetch layer and returns generated data in place of the response. Your production API never receives a demo request.
Works with your existing data fetching
DemoKit patches fetch itself, so React Query, SWR, and plain fetch need no per-library wiring.
Two fidelity levels run offline
Schema-valid and relationship-valid data generate locally, with no AI and no network call.
Open source, Apache-2.0
The whole SDK and its generators live in the repo. Self-host every line, or start on the Cloud tier.
Mocking libraries stop at the handler
MSW and Mirage intercept requests, then hand you the job of writing the data. DemoKit generates it from your schema — and gives one account a coherent story.
| Capability | DemoKit | MSW | Mirage JS | Faker fixtures |
|---|---|---|---|---|
| Intercepts requests at runtimeNo backend change. DemoKit patches the client's fetch layer. MSW and Mirage also cover XMLHttpRequest. | Supported | Supported | Supported | Not supported |
| Data generated from your schemaDemoKit reads your OpenAPI spec. The others generate values, but you hand-author each model or factory. | Supported | Partial | Partial | Partial |
| Relationship-valid across entitiesForeign keys resolve. Mirage's ORM keeps them in sync; MSW needs the @mswjs/data add-on; fixtures leave it to you. | Supported | Partial | Supported | Not supported |
| AI-authored narrative dataOne account whose signups, tickets, and invoices tell one story. | Supported | Not supported | Not supported | Not supported |
| Hosted optionA managed tier for AI credits and team workspaces. | Supported | Not supported | Not supported | Not supported |
From public docs, July 2026.
Extracted from a production app
DemoKit started as Kasava’s demo mode: hand-written fixture files and data hooks that broke a little more every release. We pulled the interceptor out, made it schema-aware, and open-sourced it under Apache-2.0.
git clone https://github.com/kasava-ai/demokitdocker compose up -dpnpm devThe SDK is free and complete
L3 included, with your own API key. Cloud sells hosted credits, teams, and a managed dashboard.
Open source
Self-hosted · BYOK · Apache-2.0
Pro
RecommendedFor the first sales engineer
Team
For the whole sales org
Enterprise adds SSO, audit logs, custom domains, and an SLA. Talk to us.
Stuff people ask
If you can’t find what you’re looking for, get in touch.