Type a regex and watch it compile into an NFA, a DFA and a minimal DFA.
A small recursive descent parser turns the pattern into a syntax tree, and Thompson's construction turns the tree into an NFA whose layout mirrors the pattern: concatenation runs left to right, alternatives stack, stars loop over the top and skip underneath. Subset construction then discovers DFA states one set of NFA states at a time, and Hopcroft's partition refinement colors equivalent states until no input can tell them apart, flying the surviving blocks into the minimal DFA. A test string then runs through all three machines at once: the NFA keeps a glowing token on every state it might be in, spreading along epsilon moves after each character, while each DFA moves a single token. A recursive backtracking matcher counts its own steps alongside, which is where the catastrophic preset earns its name.
Try it. Click the pattern or test field and type (Enter or the up and down arrows switch fields); every keystroke recompiles. Pick a preset below, hover a DFA state to see which NFA states it stands for, and click a machine to replay the test string.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive regular expression visualizer with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Add a text input for a pattern and another for a test string above a full-width canvas that stays sharp on high-DPI screens.
- Write a tiny recursive descent parser for literals, parentheses, | (alternation), and the * + ? operators. It should produce a syntax tree and report the position of any error.
- Compile the tree into an NFA with Thompson's construction: each fragment has a start and an end state, and epsilon edges glue fragments together.
- Lay the NFA out straight from the tree: concatenation goes left to right, alternatives stack vertically, and a star's back edge arcs over the top while its skip edge arcs underneath. Draw states as circles, the accepting state as a double circle, and epsilon edges dashed.
- Simulate the test string by tracking the set of active states (follow epsilon edges after every character) and highlight that set as the string is read one character per half second.
Once that works, make it beautiful:
- Animate a glowing dot along every edge being followed, so you can watch the NFA explore all possibilities at once.
- Add subset construction to build a DFA from sets of NFA states and draw it beside the NFA, with a single token moving through it in step.
- Recompile on every keystroke and show a friendly error marker under the pattern when it does not parse.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as Hopcroft minimization of the DFA, character classes with a symbol-class alphabet, or a step counter that compares the NFA with a backtracking matcher on catastrophic patterns like (a+)+b.
