{"id":"e16c3d2c-f6df-4f91-9fb8-cd9a847d7a4f","slug":"react-redact","kind":"skill","name":"react-redact","summary":"One keyboard shortcut to make your entire app demo-safe.","owner":"btahir","repoUrl":"https://github.com/btahir/react-redact","license":"MIT","licenseTier":"permissive","trust":"community","stars":2,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-03-01T21:32:50.000Z","addedAt":"2026-10-21T22:40:11.393Z","logoUrl":"https://avatars.githubusercontent.com/u/10962432?u=c97fd92fe8b44594dc91521a032226a5f74684a1&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["writing"],"tags":[],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-25T17:51:16.344Z","sample":false,"url":"https://conduits.dev/tools/react-redact","language":"TypeScript","transports":["stdio"],"install":{"npm":"react-redact"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# react-redact\n\n**A better day to demo.** Consistent synthetic data, a visual field editor, and local checks for your React application. Free and MIT licensed.\n\n[Live demo & Studio](https://react-redact.vercel.app) · [Documentation](https://react-redact.vercel.app/docs) · [Security boundaries](https://react-redact.vercel.app/docs/security) · [GitHub](https://github.com/btahir/react-redact)\n\n> Scenario, Studio, and preflight APIs require react-redact 0.4.0 or later.\n\n## Choose your workflow\n\n| Need | Import | What it does |\n| --- | --- | --- |\n| Consistent demo records | `react-redact/data` | Pure seeded generation with explicit fields; works in Node and Server Components |\n| React demo fields | `react-redact/fields` | Substitutes configured fields during rendering, including SSR |\n| Visual authoring | `react-redact/studio` | Target picking, field editing, undo/redo, local drafts, validated JSON import/export |\n| Local checks | `react-redact/diagnostics` | Bounded field coverage and synthetic-sentinel checks |\n| Browser test helper | `react-redact/playwright` | Checks a supplied Playwright page; no browser dependency in the runtime |\n| Quick visual hiding | `react-redact` | Provider, `Redact`, best-effort `RedactAuto`, keyboard shortcut, hooks |\n\n## Install\n\n```sh\nnpm install react-redact\n```\n\nReact 18+ is a peer dependency. Studio is optional and does not enter the default runtime import. There is no account, hosted database, telemetry, or required paid feature.\n\n## A synthetic-only demo\n\n```tsx\nimport { createDemoDocument } from 'react-redact/data';\nimport { DemoProvider, DemoField } from 'react-redact/fields';\n\nconst document = createDemoDocument();\n\nexport function Customer() {\n  return (\n    <DemoProvider document={document}>\n      <h2><DemoField id=\"customer.name\" entity=\"demo-1\" /></h2>\n      <p><DemoField id=\"customer.email\" entity=\"demo-1\" /></p>\n      <p><DemoField id=\"customer.company\" entity=\"demo-1\" /></p>\n    </DemoProvider>\n  );\n}\n```\n\nThe same seed and demo entity produce the same name, email, and company across views. No original customer record is needed. Missing field rules show an unconfigured placeholder instead of a supplied child. Without `DemoProvider`, `DemoField` displays its children normally.\n\nFor server-rendered tables, fixtures, or API mocks:\n\n```ts\nimport { createDemoDocument, createDemoRecord } from 'react-redact/data';\nconst policy = createDemoDocument();\nconst customers = ['demo-1', 'demo-2'].map(id => createDemoRecord(policy, id));\n```\n\nOnly declared keys are generated. Use demo-only entity IDs and seeds. These are deterministic samples, not encryption or irreversible anonymization. Authored replacements are included in exports; do not type private values into them.\n\n## Add the optional editor\n\n```tsx\n'use client';\nimport { useRef, useState } from 'react';\nimport { createDemoDocument } from 'react-redact/data';\nimport { DemoProvider, DemoField } from 'react-redact/fields';\nimport { RedactStudio } from 'react-redact/studio';\nimport 'react-redact/studio.css';\n\nexport function Demo() {\n  const [document, setDocument] = useState(createDemoDocument);\n  const rootRef = useRef<HTMLDivElement>(null);\n  return <>\n    <div ref={rootRef}>\n      <DemoProvider document={document}>\n        <DemoField id=\"customer.name\" />\n        <DemoField id=\"customer.email\" />\n        <DemoField id=\"customer.company\" />\n      </DemoProvider>\n    </div>\n    <RedactStudio document={document} onChange={setDocument}\n      rootRef={rootRef} storageKey=\"my-demo-policy-v1\" />\n  </>;\n}\n```\n\nStudio edits the same versioned policy used by your application. It supports semantic target picking, required-field checks, sample/mask/hide rules, validation, 50 history entries, and JSON import/export. Draft storage is opt-in; saved work is restored explicitly rather than overriding server-rendered state. The editor never captures page text into exported documents.\n\n## Local CLI and browser checks\n\n```sh\nnpx --no-install redact init demo.json\nnpx --no-install redact validate demo.json\nnpx --no-install redact fixtures demo.json 3\n```\n\n`init` refuses to overwrite an existing file. The CLI performs no network requests. The schema ships at `react-redact/schema.json`; the agent instructions ship in `skills/react-redact/SKILL.md`.\n\n```ts\nimport { checkDemoPage } from 'react-redact/playwright';\nconst report = await checkDemoPage(page, policy, {\n  root: '[data-testid=\"demo-preview\"]',\n  sentinels: ['FAKE-PRIVATE-SENTINEL'],\n});\nexpect(report.passed).toBe(true);\n```\n\nUse invented sentinels, never actual private values. Reports contain rule IDs/counts and sentinel indices. Coverage checks do not prove all private information is absent. Visit the routes and dialog states you intend to demonstrate. Clipboard contents, network traffic, media pixels, and unvisited pages are not checked by this helper.\n\n## Existing visual toolkit\n\n```tsx\nimport { RedactProvider, Redact, RedactAuto, useRedactMode } from 'react-redact';\n\n<RedactProvider defaultEnabled mode=\"mask\" shortcut=\"mod+shift+x\">\n  <Redact accessibleLabel=\"Email hidden for this demo\">person@example.com</Redact>\n  <RedactAuto patterns={['email', 'phone']}>{/* best-effort subtree scan */}</RedactAuto>\n</RedactProvider>\n```\n\n`⌘⇧X` / `Ctrl+Shift+X` toggles an uncontrolled provider. `useRedactMode()` exposes `isRedacted`, `mode`, `enable`, `disable`, `toggle`, and `isScreenSharing`. Pass `enabled` with `onEnabledChange` for controlled state; use `defaultEnabled` for an initially active, internally toggled provider. A supplied `enabled` is authoritative, even if the parent declines an internal toggle request.\n\nModes: `blur`, `mask`, `replace`, `secure` (compatibility name), and `custom`. Blur uses an inline style; `react-redact/styles.css` is optional. `Redact` accepts `replacement`, `blurRadius`, `maskChar`, `accessibleLabel`, and `renderRedacted`. Provider `customRender` supplies the default custom renderer. Non-text children cannot be extracted safely; manual mask/replace use a placeholder.\n\n`RedactAuto` supports an `as` wrapper, built-in `email`, `phone`, `ssn`, `credit-card` (Luhn), `ip`, and explicit custom regex. It inherits provider patterns unless overridden. `useRedactPatterns().addPattern(regex, name)` registers a provider-local custom pattern. Empty regex matches are unsupported and stop that pattern's scan. Keep custom patterns trusted and bounded; this is not a general untrusted-regex execution engine.\n\n`getInitialRedactEnabled()` reads `?redact=true` or `?redact=1`; it returns false on the server. For stable SSR, resolve initial demo state in your own server logic. Opt-in `autoRedactOnScreenShare` sees only `getDisplayMedia` calls made by the same page; it cannot detect Zoom, another tab, or an OS screen share. Prepare your demo before sharing.\n\n## Important boundaries\n\n- **Blur** leaves original text in the DOM. CSS is not a security boundary.\n- **Manual mask/replace/secure** render a replacement instead of their children while enabled. Original values can still exist in React props, application memory, network responses, or serialized Server Component data.\n- **Automatic scanning** happens after rendering. Original text can be present in server HTML and between dynamic updates and scans. All restoration values are kept in memory; no mode writes a `data-redact-original` attribute. The name `secure` does not change the post-render boundary.\n- Inputs, attributes, iframe/shadow-root content, and media are not comprehensively scanned. Regex detections miss information and can match harmless samples.\n- **Demo fields** substitute during rendering. For public demos, generate synthetic inputs upstream and avoid fetching real records at all. Never pass real source data through an RSC/client boundary and assume a visual wrapper removes it.\n\n## Examples and development\n\nThe [Next.js workspace](https://github.com/btahir/react-redact/tree/main/apps/docs) includes three routes, a customer dialog, a synthetic API endpoint, and the actual Studio. A [Vite example](https://github.com/btahir/react-redact/tree/main/examples/vite) shows standalone local use. The [recipes](https://react-redact.vercel.app/docs/recipes) cover MSW, Storybook, and screenshot workflows.\n\n```sh\npnpm install\npnpm validate\npnpm --filter react-redact-docs build\npnpm --filter react-redact-docs dev\n```\n\nSee [architecture](https://github.com/btahir/react-redact/blob/main/docs/ARCHITECTURE.md), [verification](https://github.com/btahir/react-redact/blob/main/docs/VERIFICATION.md), and [changelog](https://github.com/btahir/react-redact/blob/main/CHANGELOG.md).\n\n## Shared maintenance\n\nreact-redact is maintained alongside react-tourlight, react-kino, and react-clickmap. Voluntary maintainer support funds fixes, compatibility, documentation, and new features across these tools. [Support this project](https://react-tourlight.vercel.app/support). Shared React Maintainer Support offers one-time and recurring contributions. Contributions are optional and support shared maintenance.\n\nEvery feature remains free under the [MIT license](https://github.com/btahir/react-redact/blob/main/LICENSE); no membership or paid entitlement is required.\n"}