How is this different from the Regex Tester?

The Regex Tester answers 'what matches?'; this tool answers 'why, and how fast?'. It parses your pattern into an explicit tree and renders it as a railroad diagram, an NFA (Thompson's construction) and a DFA (subset construction), then runs a faithful reimplementation of a backtracking engine one instruction at a time so you can watch branches, assertions and unwinds happen. Use the Tester for everyday matching and substitution; step over here when you need to understand or de-risk a pattern.

Does the step debugger run my browser's real regex engine?

No — browsers don't expose instruction-level tracing, so the tool re-implements a backtracking VM in pure TypeScript. It is verified against the native engine: for every supported construct (classes, groups, backreferences, lookaround, lazy quantifiers, i/m/s flags) it must report the same first match on a fixed corpus, which is enforced by the test suite. The upside of the re-implementation is that it is hard-budgeted: a catastrophic pattern truncates with a warning instead of freezing the tab.

How is the ReDoS score computed?

Two signals are combined. Statically, the AST is scanned for nested quantifiers with overlapping first characters — (a+)+ — and repeated alternation with ambiguous branches — (a|a)* — the two classic exponential shapes. Dynamically, the simulator counts executed instructions per input character: single digits per char is linear and Low, roughly 2–8 per char suggests quadratic behavior (Medium), higher ratios or an exhausted step budget are Critical. The reasons are always listed with the badge.

What does the optimized pattern export change?

Only things that keep the language identical, verified against the native engine: verbose quantifiers become their shorthand (a{1,} → a+, a{0,1} → a?), character classes are deduped and merged ([0-9\d] → \d, [cab] → [a-c]), exact duplicate alternation branches are dropped, and non-capturing groups that carry no precedence are removed. If a rewrite could change semantics, the original is kept.

Why does the DFA sometimes cap out?

Subset construction can blow up exponentially on ambiguous patterns — the display stops at 400 states and warns you. That explosion is itself information: ambiguity in the DFA is the same ambiguity that causes catastrophic backtracking, so treat the warning as a design smell and check the ReDoS panel.

Which regex syntax is supported?

The JavaScript (ECMAScript) core: literals and escapes (\x41, \u{1F600}, control escapes), character classes with ranges and negation, the perl shorthands \d \w \s, capturing/named/non-capturing groups, alternation, greedy and lazy quantifiers including {m,n}, anchors ^ $ \b \B, numbered and named backreferences, and lookahead/lookbehind (positive and negative). Unicode property escapes (\p{...}) and the v flag are not drawn — the parser reports them as unsupported instead of rendering something misleading.

Is my pattern or test text sent anywhere?

No. Parsing, compilation, automata construction and simulation are all pure client-side TypeScript with no network calls. The pattern is encoded in the page URL only so you can share the exact view; nothing is transmitted or stored on a server.

Regex Tester Regex Explainer Regex Railroad & DFA

RegEx Railroad & DFA/NFA Stepper

Visualize any JavaScript regex as a railroad diagram and finite automaton, then step through its backtracking engine — with a ReDoS risk score.

Regular expression

//i

flags i · m · s

Test text

Presets:

Optimized pattern: /([%+\--.0-9A-Z_a-z]+)@([\--.0-9A-Za-z]+\.[A-Za-z]+)/i

Railroad diagram
33 transitions · 0 named groups

Export

<svg xmlns="http://www.w3.org/2000/svg" width="632" height="160" viewBox="0 0 632 160" font-family="ui-monospace, SFMono-Regular, Menlo, monospace">
<title>/([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/i</title>
<style>.rl{fill:none;stroke:#475569;stroke-width:1.6;stroke-linecap:round}.rb{fill:#f8fafc;stroke:#475569;stroke-width:1.4}.rd{fill:none;stroke:#64748b;stroke-width:1.2;stroke-dasharray:5 4}.t{fill:#0f172a;font-size:15px;text-anchor:middle}.s{fill:#64748b;font-size:12px;text-anchor:middle}</style>
<rect width="100%" height="100%" fill="#ffffff"/>
<text class="s" x="118.4" y="53">(1)</text>
<rect class="rb" x="37" y="62" width="162.8" height="34" rx="8"/>
<text class="t" x="118.4" y="84">[a-zA-Z0-9._%+\-]</text>
<path class="rl" d="M 199.8 79 V 113 H 37 V 79"/>
<text class="s" x="118.4" y="117">+</text>
<path class="rl" d="M 211.8 79 H 225.8"/>
<rect class="rb" x="225.8" y="62" width="28.4" height="34" rx="8"/>
<text class="t" x="240" y="84">@</text>
<path class="rl" d="M 254.20000000000002 79 H 268.20000000000005"/>
<text class="s" x="439.00000000000006" y="53">(2)</text>
<rect class="rb" x="281.20000000000005" y="62" width="137.60000000000002" height="34" rx="8"/>
<text class="t" x="350.00000000000006" y="84">[a-zA-Z0-9.\-]</text>
<path class="rl" d="M 418.80000000000007 79 V 113 H 281.20000000000005 V 79"/>
<text class="s" x="350.00000000000006" y="117">+</text>
<path class="rl" d="M 430.80000000000007 79 H 444.80000000000007"/>
<rect class="rb" x="444.80000000000007" y="62" width="36.8" height="34" rx="8"/>
<text class="t" x="463.20000000000005" y="84">\.</text>
<path class="rl" d="M 481.6000000000001 79 H 495.6000000000001"/>
<rect class="rb" x="508.6000000000001" y="62" width="87.2" height="34" rx="8"/>
<text class="t" x="552.2" y="84">[a-zA-Z]</text>
<path class="rl" d="M 595.8000000000001 79 V 113 H 508.6000000000001 V 79"/>
<text class="s" x="552.2" y="117">+</text>
</svg>

The pattern is encoded in the URL — copy the address bar to share this exact view. Everything runs locally in your browser.

About this tool

Visualize regex as railroad diagrams and finite automata (NFA/DFA via Thompson construction), step through backtracking, count backtracks and detect ReDoS risk. Free, runs locally. Interactive RegEx Railroad & DFA/NFA Stepper runs in the browser on DevTools. There is no signup, and your input stays on this device unless the tool explicitly performs a live network lookup.

What this tool does not do

Interactive RegEx Railroad & DFA/NFA Stepper is a free in-browser utility, not a hosted API. It does not keep server-side history and is not a substitute for production verification in your own stack.

How do I use this tool?

How do I use Interactive RegEx Railroad & DFA/NFA Stepper?
Open Interactive RegEx Railroad & DFA/NFA Stepper, enter or paste your input, and copy the result. The page works without an account.

Rule 110, the Glider Gun and Why Cellular Automata Keep Winning

A single black cell plus one rule byte can produce chaos, self-similarity and even universal computation. A tour of the automata that taught computer science — Conway's Life, Wireworld circuits, Langton's Ant and Wolfram's Rule 110 — and why stepping them beats memorizing their properties.

Sorting Races, Maze Walkers and Self-Balancing Trees: Learning Algorithms by Watching Them Lose

Reading that QuickSort degrades to O(n²) on sorted input is one thing; racing it against MergeSort on the same data and watching it flail is another. How algorithm visualizers — with step replay, sonification and line-highlighted code — change how engineers internalize complexity.

Regex Railroad Diagrams and NFA/DFA Steppers: Seeing the Machine Inside Your Pattern

Browsers run regular expressions as backtracking engines, not the finite automata textbooks describe. Railroad diagrams, Thompson's construction and a step debugger close that gap — and make ReDoS visible before it ships.

.env Secret Safety Linter

Validate .env syntax and spot likely leaked credentials or placeholder secrets.

.htaccess Generator

Build an Apache .htaccess — HTTPS redirects, rewrites, error pages, security headers, and basic auth

2D Fluid Dynamics & Particle Physics Sandbox

A physics playground with two engines sharing one canvas. The fluid mode runs a real Eulerian Navier-Stokes solver — semi-Lagrangian advection, explicit diffusion, Jacobi pressure projection and vorticity confinement — that you paint with dye and velocity using mouse or touch. The particle mode is a damped Verlet N-body engine with gravity wells, Coulomb attractors and repulsors, spring links, wall restitution and elastic circle collisions. Particle counts adapt to the device (100k target on WebGL2 desktop, 2k-5k on CPU fallback), and every configuration exports as runnable code: a Matter.js world, a PixiJS ticker setup, or a standalone vanilla Canvas engine.

AI Function Calling Schema Generator

Generate function calling JSON schemas from TypeScript interfaces

Algorithm Arena & Data Structure Visualizer

Interactive arena for algorithms and data structures: eight sorting algorithms racing on one seeded input, six pathfinding algorithms walking generated mazes, and BST, AVL, Red-Black, B-tree, heap and trie operations replayed step by step with rotations highlighted. Every run shows the Big-O table and the phase-highlighted reference implementation in four languages, and compared values can be played as pitch (sonification) through the shared audio engine. Everything runs client-side; inputs never leave the browser.

Ansible Playbook Generator

Build an Ansible playbook — hosts, vars, and tasks with modules — as YAML

Railroad diagram33 transitions · 0 named groups

About this tool

What this tool does not do

How do I use this tool?

How do I use Interactive RegEx Railroad & DFA/NFA Stepper?

Related guides

Rule 110, the Glider Gun and Why Cellular Automata Keep Winning

Sorting Races, Maze Walkers and Self-Balancing Trees: Learning Algorithms by Watching Them Lose

Regex Railroad Diagrams and NFA/DFA Steppers: Seeing the Machine Inside Your Pattern

Related tools

.env Secret Safety Linter

.htaccess Generator

2D Fluid Dynamics & Particle Physics Sandbox

AI Function Calling Schema Generator

Algorithm Arena & Data Structure Visualizer

Ansible Playbook Generator

Railroad diagram33 transitions · 0 named groups

Railroad diagram
33 transitions · 0 named groups

Railroad diagram
33 transitions · 0 named groups