Getting started

react-redact is a local demo toolkit. Choose synthetic scenarios for complete demos, or the small visual toolkit for explicitly marked UI fields. Studio and scenario APIs require version 0.4.0 or later.

Install

npm install react-redact

A first synthetic customer

import { createDemoDocument } from 'react-redact/data';
import { DemoProvider, DemoField } from 'react-redact/fields';

const document = createDemoDocument();

export function Customer() {
  return <DemoProvider document={document}>
    <DemoField id="customer.name" entity="demo-1" />
    <DemoField id="customer.email" entity="demo-1" />
    <DemoField id="customer.company" entity="demo-1" />
  </DemoProvider>;
}

No real customer data is needed. The same entity ID produces a coherent identity across views. Missing rules display an unconfigured placeholder. For public demos, generate only synthetic inputs upstream; do not fetch production records behind a visual wrapper.

Choose your next step

• Scenarios and schemas: deterministic samples and explicit field policies.
• Redact Studio: local visual editing, target picking, drafts, and exports.
• Preflight and screenshots: bounded checks and Playwright integration.
• Next.js demo recipe: server/client boundaries and synthetic endpoints.
• Visual modes: quick blur, mask, and replacement.
• Security model: what each approach does and cannot do.

Small visual toolkit

import { RedactProvider, Redact } from 'react-redact';

<RedactProvider defaultEnabled mode="mask">
  <Redact>someone@example.com</Redact>
</RedactProvider>

Toggle with ⌘⇧X or Ctrl+Shift+X. Use defaultEnabled for initial uncontrolled state, or enabled and onEnabledChange for authoritative controlled state. Blur is visual styling, not data removal. Automatic scanning is post-render and cannot keep originals out of server HTML.