https://github.com/karthik-saiharsh/fsm-engine
A Figma like Editor to Design Custom Finite State Machines
https://github.com/karthik-saiharsh/fsm-engine
automata automata-theory collaborate computation-theory dfa editor figma finite-state-machine fsm konva machines nfa react react-konva theory-of-computation
Last synced: 6 months ago
JSON representation
A Figma like Editor to Design Custom Finite State Machines
- Host: GitHub
- URL: https://github.com/karthik-saiharsh/fsm-engine
- Owner: karthik-saiharsh
- License: gpl-3.0
- Created: 2025-07-19T09:49:18.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-09-28T08:08:37.000Z (6 months ago)
- Last Synced: 2025-09-28T10:11:11.698Z (6 months ago)
- Topics: automata, automata-theory, collaborate, computation-theory, dfa, editor, figma, finite-state-machine, fsm, konva, machines, nfa, react, react-konva, theory-of-computation
- Language: TypeScript
- Homepage: https://fsm-engine.vercel.app
- Size: 39.3 MB
- Stars: 38
- Watchers: 0
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# FSM Engine
A web-based tool for creating, and visualizing, Finite State Machines (FSMs). Built with React, TypeScript, Tailwind CSS, Jotai, and React Konva for an interactive canvas experience.
## Features
- Interactive Canvas Editor
- Zoom and Pan across an infinite canvas
- Smooth drag to reposition states
- Multiple Modes
- Create: Click on the canvas to add new states
- Select: Drag states to move them
- Connect: Click two states to create a directed transition (supports self-loops)
- Delete: Remove states with a single click
- Grab: Move the Nodes
- State Types
- initial, intermediate, final
- Dynamic Transitions
- Arrows automatically adjust their position and curve as you move states
- Welcome/Tutorial Overlay
- First-run walkthrough with short clips
## Try it at
https://fsm-engine.vercel.app
## Tech Stack
- Frontend: React + TypeScript
- State Management: Jotai
- Canvas: React Konva
- Styling: Tailwind CSS
- Tooling: Vite
- Icons: lucide-react
## Contributing
Contributions are welcome!
- Open issues for bugs or feature requests
- Submit pull requests for fixes or enhancements
- Discuss larger changes in an issue first
## Roadmap
- [ ] Undo/Redo
- [ ] Export Project to JSON
- [ ] Import Project from JSON
- [ ] Generate the transition table for a given NFA/DFA
- [ ] NFA → DFA conversion
- [ ] DFA minimization
- [ ] Validation and error hints (unreachable states, parse a regex)
- [ ] Keyboard shortcuts and accessibility improvements