I Got Fed Up With JFLAP, So I Built AutomataFlow
AutomataFlow is a free, browser-based simulator for DFA, NFA, PDA, and Turing Machines — built because the tools my school used were painful to use.
Every time theoretical computer science came up in school, the workflow was the same: open JFLAP, wait for Java to launch, stare at an interface that looks like it was designed in 2003, and hope nothing crashes before you finish your automaton. It worked — barely — but it was always fighting you rather than helping you think.
I wanted something better. So I built AutomataFlow.
What It Is
AutomataFlow is a browser-first simulator for the four core formal models taught in any TCS course:
- DFA — Deterministic Finite Automaton
- NFA — Nondeterministic Finite Automaton (with ε-transitions)
- PDA — Pushdown Automaton (with full stack visualization)
- TM — Turing Machine (with tape visualization)
No download. No Java. No installer. Open the URL, start building.
Why I Built It
The tools available for teaching automata theory — JFLAP being the main one — have two problems. First, they require a local install and a JVM, which means ten minutes of setup before a student can draw their first state. Second, the UI is genuinely hostile. Every action requires three clicks through menus that predate modern UX conventions.
When you’re trying to understand why a pushdown automaton accepts aabb but rejects aab, fighting the tool is the last thing you want.
AutomataFlow takes a different approach:
- Canvas-first — states and transitions are drawn on an interactive graph. Drag states, connect them with edges, click edges to add or edit transitions.
- Modes — a toolbar switches between Select, Add State, and Delete modes to prevent accidental edits.
- Simulation panel — step through execution one transition at a time, or run to completion. Input characters are highlighted at the current read position. Stack branches are shown for PDA nondeterminism.
- Persistent — machines are saved to localStorage automatically. Close the tab, reopen it, everything is still there.
- Multi-tab — multiple machines open at once, each in its own tab.
- Undo/redo — 50-level history so you can experiment freely.
The Tech
Built with React 18, TypeScript, Vite, and Tailwind CSS. The graph editor uses React Flow for the canvas — an excellent library that handles node/edge rendering and interaction. State lives in Zustand with the persist middleware for localStorage. Animations are from Framer Motion.
The whole thing is a static site — no server, no API, no account. Just a bundle of JavaScript that runs entirely in the browser.
Try It
Source code is on GitHub under AGPL-3.0. Contributions and feedback welcome.