Regex Tester & Explainer

Core Usage

Regex Editor (Left Panel):

• Type a pattern in the /pattern/ input — matches highlight instantly
• Toggle flags using buttons (g, i, m, s, u, y)
• Paste test text in textarea — matched substrings highlight with cycling colours
• Match Details table shows position and capture groups
• Copy Pattern button copies /pattern/flags to clipboard
• Share button encodes current state into a URL

AI Assistant (Right Panel):

• Explain tab: Enter a regex, click "Explain Regex" → AI returns plain-English breakdown with token-by-token analysis
• Generate tab: Describe what to match in English, click "✨ Generate Regex" → AI writes the pattern with explanation and examples

Snippets Sidebar:

• Click 📂 Snippets to open sidebar
• My Snippets: Save current regex with name/description; load, share, or delete
• Built-in: Browse 6 pre-built patterns and load instantly
• Search bar filters by name, pattern, or description

Project Structure

src/
├── components/
│   ├── editor/
│   │   ├── RegexInput.tsx
│   │   └── FlagsSelector.tsx
│   ├── explainer/
│   │   ├── ExplainPanel.tsx
│   │   ├── TokenCard.tsx
│   │   └── GroupsTable.tsx
│   ├── generator/
│   │   └── GenerateFromText.tsx
│   ├── sidebar/
│   │   ├── SavedSnippets.tsx
│   │   └── SnippetCard.tsx
│   └── ui/
│       ├── Badge.tsx
│       ├── Tooltip.tsx
│       ├── CopyButton.tsx
│       └── Toast.tsx
├── hooks/
│   ├── useRegex.ts
│   └── useAI.ts
├── utils/
│   ├── regexParser.ts
│   ├── highlighter.ts
│   └── shareUrl.ts
├── data/
│   └── snippets.ts
├── App.tsx
├── main.tsx
└── index.css

Design System

• Primary Colour: Indigo #6366f1
• UI Font: Inter
• Code Font: JetBrains Mono
• Theme: Light, clean, professional
• Animations: Framer Motion — staggered token cards, tab transitions, toast slides

Browser Requirements

• Chrome 127+ for Chrome Built-in AI features
• All other features (regex testing, snippets, share) work in any modern browser

License

Tetrees License

This React web app completed archive review with strong static results. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 8.3 and security 9.

Aesthetic Travel Homepage Design Template

Automation, Utilities & Developer Tools

$13.53