Regex Railroad
Interactive regex visualizer with railroad diagrams, step-through NFA debugger, and plain English explanations. Supports JS, Python, and PCRE flavors.
Regex Railroad
See your regex. Debug your regex. Understand your regex.
Regex Railroad turns regular expressions into interactive railroad diagrams, plain English explanations, and a step-through NFA debugger — all in the browser, with zero server dependencies. Supports JavaScript, Python, and PCRE flavors.
Features
- 🚂 Interactive railroad diagrams — real-time SVG rendering from regex AST
- 🔍 Step-through debugger — watch NFA execution with backtracking visualization
- 📖 Plain English explanations — every regex element described clearly
- ⚠️ Backtracking detection — static analysis warns about catastrophic patterns
- 🎨 Dark/light mode — beautiful themes for both preferences
- 📋 Copy for any language — escape regex for JS, Python, Java, Go, Rust, C#, PHP
- 🔗 Shareable URLs — encode full state in the URL hash
- 📚 Pattern library — 22 pre-built patterns for emails, URLs, IPs, dates, and more
- 🌐 Three regex flavors — JavaScript, Python, PCRE with flavor-specific parsing
- ⚡ 100% client-side — no server, no tracking, works offline
- 🧪 4,896 unit tests — battle-tested regex engine
Quick Start
git clone https://github.com/ndcorder/regex-railroad.git
cd regex-railroad
pnpm install
pnpm dev
Open http://localhost:5173 and start typing a regex.
Usage
- Enter a regex — type or paste a pattern into the input field
- See the diagram — the railroad diagram updates as you type
- Read the explanation — plain English breakdown appears alongside the diagram
- Debug with a test string — enter text and step through NFA execution
- Copy for your language — grab the escaped version for JS, Python, Java, Go, Rust, C#, or PHP
- Share — the URL encodes your pattern, flags, flavor, and test string
Regex Flavors
| Feature | JS | Python | PCRE |
|---|---|---|---|
| Named groups | (?<name>) |
(?P<name>) |
(?<name>), (?'name'), (?P<name>) |
| Named backreferences | \k<name> |
(?P=name) |
\k<name>, \k'name', (?P=name) |
| Possessive quantifiers | — | — | ✓ |
| Atomic groups | — | — | ✓ |
| Unicode properties | ✓ | — | ✓ |
| Inline flags | — | ✓ | ✓ |
Architecture
src/lib/
├── parser/ Lexer + recursive descent parser → AST
├── diagram/ AST → layout → SVG rendering
├── engine/ NFA simulator with step recording
├── explain/ AST → plain English descriptions
├── copy/ Regex escaping for 7 target languages
├── library/ 22 pre-built regex patterns
├── sharing/ URL hash encoding/decoding
└── stores.svelte.ts Reactive state (Svelte 5 runes)
Testing
pnpm test # 4,896 unit tests (Vitest)
pnpm test:e2e # Playwright end-to-end tests
pnpm check # TypeScript type checking
pnpm lint # ESLint + Prettier
Building
pnpm build # Static site output in build/
pnpm preview # Preview production build
The build produces a fully static site (via @sveltejs/adapter-static) that can be deployed anywhere — GitHub Pages, Netlify, Vercel, or a plain file server.
Tech Stack
- SvelteKit 2 + Svelte 5 with runes
- Tailwind CSS 4
- TypeScript (strict mode)
- Vitest + Playwright
Contributing
Contributions are welcome! See CONTRIBUTING.md for guidelines.
License
