A deterministic multi-tape Turing Machine simulator with dynamic syntax parsing and interactive graph visualization.
This project is an advanced, fully functional Turing Machine simulator built as a modern Progressive Web App (PWA). It was developed as an engineering thesis to combine and vastly improve functionalities of existing simulators and solve a major limitation of creating programs: rigid syntax rules.
Instead of forcing users to adapt to one specific format, this simulator features a custom template system that allows you to define your own syntax, transpile programs between different syntax styles and write code in a fast, fully featured IDE with visualization and debugging tools.
Check out the live version.
- Multi-Tape Support: Accurately simulates deterministic multi-tape Turing machines.
- Deep Simulation Control: Users can run, pause, step forward, and even step backward through the simulation history.
- Conditional Breakpoints: The execution can be automatically paused when specific states are reached, specific values appear on the tape, or after a certain number of steps.
- Wildcard Support: Natively supports wildcard characters (
*) in the code for creating default transitions and reducing code bloat.
- Custom Syntax Templates: Write code using any syntax format you prefer. The dynamic parser extracts the transition rules regardless of the surrounding formatting.
- Transpilation: Automatically translate source code from one Turing machine syntax to another.
- Integrated Code Editor: Features a CodeMirror-based editor with dynamic syntax highlighting, multi-cursor editing, and line numbering.
- Virtual File System: Saves, imports, and exports programs and project folders directly in the browser using ZenFS and fflate compression.
- Interactive Graph: Generates a dynamic transition graph using a customized version of Neo4j-arc. Users can drag nodes, zoom, and watch the active state highlight in real-time during simulation.
- PWA & Offline Mode: Fully installable and runs flawlessly without an internet connection on both desktop and mobile devices.
- Theming: Includes full support for light and dark modes.
- JavaScript + TypeScript 5.9.3
- CSS + PostCSS 8.5.6
- React 19.2.5
- Vite 7.2.4 + vite-plugin-pwa 1.1.0
- Yarn 1.22.22
- CodeMirror 6 - code editor
- ZenFS (core 2.4.4, dom 1.2.6) - file system in the browser
- fflate 0.8.2 - import and export of zip's
- modified Neo4j-arc (extracted from Neo4j Browser) - graph visualization
- React-toastify - toast notifications
- Heroicons
- GoogleFonts
Building a high-performance simulator in the browser required solving several complex architectural challenges:
- Non-Blocking Multithreading: To ensure the UI (like graph animations) remains smooth during heavy computations, all compilation, transpilation, and simulation steps are strictly isolated in background Web Workers.
-
Asynchronous Memory Dumps: Passing massive tape states between threads via standard
postMessagecauses UI blocking. I engineered a snapshot system that uses IndexedDB as a transmission buffer, allowing fast, collision-free data exchange between the worker and the main thread. -
Handling "Infinite" Tapes: Standard JavaScript
Mapobjects have allocation limits (max$2^{23}$ keys). I designed a customBigMapstructure that transparently fragments memory into smaller pools, enabling the simulation of tapes with tens of millions of cells and supporting negative indexing. -
Dynamic Lexical Analysis: Built a custom lexer using CodeMirror's
StreamParserthat analyzes code line-by-line and applies syntax highlighting on the fly, entirely based on the user's actively selected syntax template.
The configuration area allows users to write their Turing machine code. The editor provides real-time syntax highlighting that immediately reflects the rules of the selected template. Users can also manage templates, switch syntaxes, and transpile code in the adjacent settings section.
The core simulation view presents a clean, dynamic representation of the machine's tapes and read/write heads. Users can initialize starting values on the tapes, track execution steps, and use the control bar to step backward, pause, or fast-forward the execution.
A highly interactive node-based view of the machine's transition functions[cite: 490]. The layout is calculated automatically, but users can manually adjust node positions for better readability[cite: 492, 494].