Generate, visualize, and simulate NFA and DFA from Regular Expressions. Fully responsive with an accessible, modern design.
Statera is a powerful, visual educational tool and playground for finite automata. It allows users to input regular expressions and instantly generates the corresponding Non-deterministic Finite Automaton (NFA), Deterministic Finite Automaton (DFA), and Minimized DFA.
- Regex Parsing: Supports Union
|, Kleene Star*, One or more+, Zero or one?, Character classes[], and Grouping(). - Step-by-Step Generation: Watch how the NFA is built from the regular expression fragment by fragment.
- Interactive Graph Visualization: Beautiful, auto-routing graphs using React Flow and Dagre. Features custom edge routing to prevent line overlaps (handling self-loops, backward edges, and bidirectional edges).
- String Simulation: Test strings against the generated automata to see if they are accepted or rejected, with visual path highlighting.
- Export Capabilities: Export your generated diagrams as high-quality PNG images.
- Modern UI/UX: Fully responsive, accessible design with Dark Mode support, built with Tailwind CSS and Lucide Icons.
- Node.js (v18 or higher recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/umairhex/statera.git cd statera -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:3000.
If you want to use an AI (like ChatGPT or Claude) to generate complex regular expressions compatible with Statera, copy and paste this prompt:
"Generate a regular expression for [YOUR REQUIREMENT HERE]. Only use the operators: '|' (Union), '*' (Kleene Star), '+' (One or more), '?' (Zero or one), '[]' (Character classes), and '()' (Grouping). Concatenation should be implicit. Use '\' to escape literal characters if needed. Do not use advanced regex features like lookaheads, backreferences, or bounded quantifiers like {n,m}."
- Framework: React + Vite
- Styling: Tailwind CSS
- Graph Visualization: @xyflow/react (React Flow)
- Graph Layout: Dagre
- Icons: Lucide React
- Image Export: html-to-image
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- Fork the project.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
This project is licensed under the MIT License.