Computer Science Education / Interactive Visualization
Regex2NFA
A full-canvas learning tool that turns regular-expression syntax into a visible state machine and shows exactly how an input moves through it.
Public evidence
These reviewed public sources support the adjacent build claims; they do not imply adoption or unmeasured outcomes.
- Live product (opens in new tab)The deployed workspace demonstrates expression entry, Thompson NFA construction, graph interaction, simulation, export, and responsive behavior.
- Public repository (opens in new tab)The public repository contains the parser, construction logic, simulation state, responsive interface, and build configuration.
Problem
- Target user
- Students learning how regular expressions become nondeterministic finite automata and how those machines process strings.
- Challenge
- A correct conversion result is not enough when the state structure, epsilon transitions, and active simulation path remain difficult to follow.
- Why it mattered
- If construction and execution are hidden behind controls or dense panels, the learner sees an answer without building intuition for why it is correct.
Constraints
- The graph must remain readable and interactive across desktop and mobile layouts.
- Start, accept, active, epsilon, and symbol transitions need distinct non-color cues.
- The redesign must retain the existing parser and simulator behavior rather than replacing it with a visual mock.
Solution
The interface treats the NFA as the primary artifact, keeps the active expression centered, and reveals authoring, guidance, export, and simulation controls only when needed.
- Choose an example or enter a custom regular expression from the expression drawer, then generate its Thompson NFA.
- Pan the full-canvas graph, distinguish start and accept rings, follow dashed epsilon edges, and recenter or export the result.
- Enter a test string and animate the input tape while active states progress to an accepted or rejected result.
Engineering Decisions
Make the graph the workspace, not a card
- Constraint
- Persistent side panels and toolbars competed with the automaton for limited screen space.
- Decision
- Use a full-viewport graph with floating expression, information, recenter, export, and simulation controls.
- Rationale
- Keep the machine visible while controls appear only at the moment they are useful.
- Trade-off
- Some secondary actions require opening a drawer instead of remaining permanently visible.
Animate one clear simulation path
- Constraint
- A full transport console added controls before a learner understood the basic run state.
- Decision
- Lead with one Animate action, a speed multiplier, and a live input tape that resolves to Accepted or Rejected.
- Rationale
- Make the primary learning loop obvious while keeping simulation feedback close to the graph.
Outcomes
Product and delivery
Full canvas
Graph stays primary
Expression, guide, graph utility, and simulation controls float or open on demand without permanently reducing the visualization area.
Implementation evidence
4 routes
One coherent system
Workspace, fullscreen graph, unified guide, and legacy About redirect share one responsive visual language and URL-persisted expression state.
Learnings and Next Steps
What I learned
- For educational visualization, progressive disclosure works only when the core artifact and current state remain continuously visible.
- A near-monochrome graph can preserve semantic clarity through rings, dashes, labels, and motion instead of relying on color alone.
What I would improve
- Add optional construction-step playback so learners can inspect how each regex operator contributes fragments to the final NFA.
What remains unvalidated
- The redesign has not yet been evaluated in a structured classroom study or measured against learning outcomes.