Arduino Emulator - Wokwi Clone

Local Arduino emulator with code editor and visual simulator.

Features

• ✅ Code editor with syntax highlighting (Monaco Editor)
• ✅ Arduino code compilation with arduino-cli
• ✅ Official Wokwi repositories cloned locally
  • ✅ wokwi-elements - Electronic web components
  • ✅ avr8js - AVR8 emulator
  • ✅ rp2040js - RP2040 emulator (future)
• ✅ Visual components using wokwi-elements (Arduino Uno, LEDs, etc.)
• ⏳ Full emulation with avr8js (in progress)
• ⏳ SQLite persistence (coming soon)

Screenshots

Arduino emulator with Monaco code editor and visual simulator with wokwi-elements

Interactive component properties dialog and segment-based wire editing

Prerequisites

1. Node.js

• Version 18 or higher
• Download from: https://nodejs.org/

2. Python

• Version 3.12 or higher
• Download from: https://www.python.org/

3. Arduino CLI

Install arduino-cli on your system:

Windows (with Chocolatey):

choco install arduino-cli

Windows (manual):

1. Download from: https://github.com/arduino/arduino-cli/releases
2. Add to system PATH

Verify installation:

arduino-cli version

Initialize arduino-cli:

arduino-cli core update-index
arduino-cli core install arduino:avr

Installation

1. Clone the repository

cd e:\Hardware\wokwi_clon

2. Setup Backend

cd backend

# Create virtual environment
python -m venv venv

# Activate virtual environment (Windows)
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

3. Setup Frontend

cd frontend

# Install dependencies
npm install

Running

Start Backend

cd backend
venv\Scripts\activate
uvicorn app.main:app --reload --port 8001

The backend will be available at:

• API: http://localhost:8001
• Documentation: http://localhost:8001/docs

Start Frontend

cd frontend
npm run dev

The frontend will be available at:

• App: http://localhost:5173

Usage

1. Open http://localhost:5173 in your browser
2. Write Arduino code in the editor (there's a Blink example by default)
3. Click "Compile" to compile the code
4. If compilation is successful, click "Run" to start the simulation
5. Watch the simulated LED blinking

Project Structure

wokwi_clon/
├── frontend/                    # React + Vite
│   ├── src/
│   │   ├── components/          # React components
│   │   │   ├── components-wokwi/  # wokwi-elements wrappers
│   │   │   ├── editor/          # Monaco Editor
│   │   │   └── simulator/       # Simulation canvas
│   │   ├── store/               # Global state (Zustand)
│   │   ├── services/            # API clients
│   │   └── App.tsx              # Main component
│   └── package.json
│
├── backend/                     # FastAPI + Python
│   ├── app/
│   │   ├── api/routes/          # REST endpoints
│   │   ├── services/            # Business logic
│   │   └── main.py              # Entry point
│   └── requirements.txt
│
├── wokwi-libs/                  # Cloned Wokwi repositories
│   ├── wokwi-elements/          # Web Components
│   ├── avr8js/                  # AVR8 Emulator
│   ├── rp2040js/                # RP2040 Emulator
│   └── wokwi-features/          # Features and documentation
│
├── README.md
├── WOKWI_LIBS.md                # Wokwi integration documentation
└── update-wokwi-libs.bat        # Update script

Technologies Used

Frontend

• React 18 - UI framework
• Vite 5 - Build tool
• TypeScript - Static typing
• Monaco Editor - Code editor (VSCode)
• Zustand - State management
• Axios - HTTP client

Backend

• FastAPI - Python web framework
• uvicorn - ASGI server
• arduino-cli - Arduino compiler
• SQLAlchemy - ORM (coming soon)
• SQLite - Database (coming soon)

Simulation

• avr8js - AVR8 emulator (coming soon)
• @wokwi/elements - Electronic components (coming soon)

Upcoming Features

Phase 2: Real Emulation with avr8js

• Integrate avr8js for real ATmega328p emulation
• .hex file parser
• PinManager for pin management
• Real-time execution

Phase 3: Visual Components

• Integrate @wokwi/elements
• LED component with real state
• Resistor component
• Component drag & drop
• Visual connections (wires)

Phase 4: Persistence

• SQLite database
• Project CRUD
• Save/load code and circuit
• Project history

Phase 5: Advanced Features

• More components (buttons, potentiometers, sensors)
• Serial monitor
• Simulation speed control
• Example projects
• Export/import projects

Update Wokwi Libraries

This project uses official Wokwi repositories cloned locally. To get the latest updates:

# Run update script
update-wokwi-libs.bat

Or manually:

cd wokwi-libs/wokwi-elements
git pull origin main
npm install
npm run build

See WOKWI_LIBS.md for more details about Wokwi integration.

Troubleshooting

Error: "arduino-cli: command not found"

• Make sure arduino-cli is installed and in PATH
• Verify with: arduino-cli version

Error: "arduino:avr core not found"

• Run: arduino-cli core install arduino:avr

Frontend doesn't connect to backend

• Verify backend is running at http://localhost:8001
• Check CORS logs in browser console

Compilation errors

• Check backend console for arduino-cli logs
• Make sure Arduino code is valid
• Verify you have the arduino:avr core installed

Contributing

This is an educational project. Suggestions and improvements are welcome!

License

MIT

References

• Wokwi - Project inspiration
• avr8js - AVR8 emulator
• wokwi-elements - Web components
• arduino-cli - Arduino compiler
• Monaco Editor - Code editor