A better day
to demo.
Believable sample data. A little visual polish.
Your real app, ready for its next conversation.
npm install react-redactMIT licensed · No account · Runs locallyLess setup. More show-and-tell.
Change a seed. Pick a field. Try the customer dialog.
This is the actual editor, running on a synthetic workspace.
A calmer working day.
Everything you need for the next conversation.
Your people
3 synthetic customersMore doing.
Less preparing.
Change the scenario seed in Studio. Names, emails, and companies stay consistent everywhere.
Next on your list
✓ Customer updates prepared
✓ Sample data in place
This preview never loads real customer data. The editor exports your field rules and authored samples—not a copy of the page.
Good demos start
with good data.
Let your application tell the story. Keep the customers fictional, the details consistent, and the configuration in your own repository.
Meet demo scenarios →- 01
Declare what matters.
Give names, emails, and invoices explicit field IDs. Synthetic values are generated before they render—including on the server.
- 02
Make it feel like your product.
Adjust a scenario in Studio, preview the actual app, and export a small JSON policy. Your teammate and your coding agent use the same document.
- 03
Do one last pass.
Check declared fields and missing targets. Run local screenshot checks. Know which surfaces were checked and which need your attention.
Fits your React app.
Stays out of its way.
Use the tiny visual toolkit on its own, or bring in data, fields, and Studio through separate imports.
Try the Next.js recipe →import { createDemoDocument } from 'react-redact/data';
import { DemoProvider, DemoField } from 'react-redact/fields';
const demo = createDemoDocument();
<DemoProvider document={demo}>
<DemoField id="customer.name" entity="demo-1" />
<DemoField id="customer.email" entity="demo-1" />
</DemoProvider>A demo toolkit, with honest boundaries.
Visual blur is not data removal. Automatic scanning is best-effort and happens after rendering. For public demos, start with synthetic data—this workspace does. Preflight checks the current view; it cannot certify privacy or inspect network traffic.
Understand the boundaries →Make something
worth showing.
Build your first demo →Free and open source. Every field. Every feature.
Support this project ↗One maintainer, four open-source tools: Tourlight, Kino, Clickmap, and Redact. Optional support helps keep them growing. One-time or monthly React Maintainer Support.