184 Components
Regex Playground
CardsRaycast and Regex101 inspired regular expression matching sandbox with flag toggles (g, i, m), presets (Email, Semver, UUID, Hex), real-time match extraction, and error syntax diagnostics.
Regex Playground
Real-time regular expression pattern matching and token testing.
Presets:
//
Test Text2 matches found
Matched Tokens
alex@boseui.comsupport@acme.cloud
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/regex-playground.json"
Props
TypeScript props supported by <RegexPlayground />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialPattern | string | "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" | Default regular expression pattern. |
| initialFlags | string | "g" | Default RegExp execution flags. |
Key Features
- Interactive regular expression pattern and flag inputs.
- Real-time evaluation with syntax error boundary catching.
- Popular pattern presets for Email, UUID, Semver, and Hex Colors.
- Visual matched token badge list.
Keyboard & Accessibility
- Keyboard accessible flag toggles and textarea inputs.
- High-contrast match badge highlighting.