a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #52 from davidmonterocrespo24/website 

feat: add Arduino Mega 2560, Arduino, and ATmega328P simulator pages …
pull/74/head
David Montero Crespo 2026-03-23 13:39:15 -03:00 committed by GitHub
parent 1cbeed1296 2eb6a452a7
commit c5b564668f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 1292 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
README.md
View File

@ -4,6 +4,8 @@
A fully local, open-source multi-board emulator. Write Arduino C++ or Python, compile it, and simulate it with real CPU emulation and 48+ interactive electronic components — all running in your browser. A fully local, open-source multi-board emulator. Write Arduino C++ or Python, compile it, and simulate it with real CPU emulation and 48+ interactive electronic components — all running in your browser.
**19 boards · 5 CPU architectures**: AVR8 (ATmega / ATtiny), ARM Cortex-M0+ (RP2040), RISC-V RV32IMC/EC (ESP32-C3 / CH32V003), Xtensa LX6/LX7 (ESP32 / ESP32-S3 via QEMU), and ARM Cortex-A53 (Raspberry Pi 3 Linux via QEMU).
[![Live Demo](https://img.shields.io/badge/Live%20Demo-velxio.dev-007acc?style=for-the-badge)](https://velxio.dev) [![Live Demo](https://img.shields.io/badge/Live%20Demo-velxio.dev-007acc?style=for-the-badge)](https://velxio.dev)
[![Docker Image](https://img.shields.io/badge/Docker-ghcr.io%2Fdavidmonterocrespo24%2Fvelxio-2496ED?style=for-the-badge&logo=docker&logoColor=white)](https://github.com/davidmonterocrespo24/velxio/pkgs/container/velxio) [![Docker Image](https://img.shields.io/badge/Docker-ghcr.io%2Fdavidmonterocrespo24%2Fvelxio-2496ED?style=for-the-badge&logo=docker&logoColor=white)](https://github.com/davidmonterocrespo24/velxio/pkgs/container/velxio)
[![GitHub stars](https://img.shields.io/github/stars/davidmonterocrespo24/velxio?style=for-the-badge)](https://github.com/davidmonterocrespo24/velxio/stargazers) [![GitHub stars](https://img.shields.io/github/stars/davidmonterocrespo24/velxio?style=for-the-badge)](https://github.com/davidmonterocrespo24/velxio/stargazers)
@ -83,26 +85,31 @@ Component Picker showing 48 available components with visual previews, search, a
<td align="center"><img src="docs/img/boards/xiao-esp32-s3.png" width="140" alt="Seeed XIAO ESP32-S3"/><br/><b>Seeed XIAO ESP32-S3</b></td> <td align="center"><img src="docs/img/boards/xiao-esp32-s3.png" width="140" alt="Seeed XIAO ESP32-S3"/><br/><b>Seeed XIAO ESP32-S3</b></td>
<td align="center"><img src="docs/img/boards/arduino-nano-esp32.png" width="140" alt="Arduino Nano ESP32"/><br/><b>Arduino Nano ESP32</b></td> <td align="center"><img src="docs/img/boards/arduino-nano-esp32.png" width="140" alt="Arduino Nano ESP32"/><br/><b>Arduino Nano ESP32</b></td>
<td align="center"><img src="docs/img/boards/Raspberry_Pi_3.png" width="140" alt="Raspberry Pi 3B"/><br/><b>Raspberry Pi 3B</b></td> <td align="center"><img src="docs/img/boards/Raspberry_Pi_3.png" width="140" alt="Raspberry Pi 3B"/><br/><b>Raspberry Pi 3B</b></td>
<td align="center">Arduino Uno / Nano / Mega<br/>(ATmega328p / 2560)</td> <td align="center">Arduino Uno &middot; Nano &middot; Mega 2560<br/>ATtiny85 &middot; Leonardo &middot; Pro Mini<br/>(AVR8 / ATmega)</td>
</tr> </tr>
</table> </table>
| Board | CPU | Engine | Language | | Board | CPU | Engine | Language |
| ----- | --- | ------ | -------- | | ----- | --- | ------ | -------- |
| Arduino Uno | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) | | **Arduino Uno** | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) |
| Arduino Nano | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) | | **Arduino Nano** | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) |
| Arduino Mega | ATmega2560 @ 16 MHz | avr8js (browser) | C++ (Arduino) | | **Arduino Mega 2560** | ATmega2560 @ 16 MHz | avr8js (browser) | C++ (Arduino) |
| Raspberry Pi Pico | RP2040 @ 125 MHz | rp2040js (browser) | C++ (Arduino) | | **ATtiny85** | ATtiny85 @ 8 MHz (int) / 16 MHz (ext) | avr8js (browser) | C++ (Arduino) |
| Raspberry Pi Pico W | RP2040 @ 125 MHz | rp2040js (browser) | C++ (Arduino) | | **Arduino Leonardo** | ATmega32u4 @ 16 MHz | avr8js (browser) | C++ (Arduino) |
| ESP32 DevKit C | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | | **Arduino Pro Mini** | ATmega328p @ 8/16 MHz | avr8js (browser) | C++ (Arduino) |
| ESP32-S3 | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | | **Raspberry Pi Pico** | RP2040 @ 133 MHz | rp2040js (browser) | C++ (Arduino) |
| ESP32-CAM | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | | **Raspberry Pi Pico W** | RP2040 @ 133 MHz | rp2040js (browser) | C++ (Arduino) |
| ESP32-C3 | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | | **ESP32 DevKit V1** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) |
| Seeed XIAO ESP32-C3 | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | | **ESP32 DevKit C V4** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) |
| ESP32-C3 SuperMini | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | | **ESP32-S3** | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) |
| Seeed XIAO ESP32-S3 | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | | **ESP32-CAM** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) |
| Arduino Nano ESP32 | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | | **Seeed XIAO ESP32-S3** | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) |
| Raspberry Pi 3B | ARM Cortex-A53 @ 1.2 GHz | QEMU raspi3b (backend) | Python | | **Arduino Nano ESP32** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) |
| **ESP32-C3 DevKit** | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) |
| **Seeed XIAO ESP32-C3** | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) |
| **ESP32-C3 SuperMini** | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) |
| **CH32V003** | RISC-V RV32EC @ 48 MHz | RiscVCore.ts (browser) | C++ (Arduino) |
| **Raspberry Pi 3B** | ARM Cortex-A53 @ 1.2 GHz | QEMU raspi3b (backend) | Python |
--- ---
@ -118,20 +125,21 @@ Component Picker showing 48 available components with visual previews, search, a
### Multi-Board Simulation ### Multi-Board Simulation
#### AVR8 (Arduino Uno / Nano / Mega) #### AVR8 (Arduino Uno / Nano / Mega / ATtiny85 / Leonardo / Pro Mini)
- **Real ATmega328p / ATmega2560 emulation** at 16 MHz via avr8js - **Real ATmega328p / ATmega2560 / ATmega32u4 / ATtiny85 emulation** at native clock speed via avr8js
- **Full GPIO** — PORTB (pins 8–13), PORTC (A0–A5), PORTD (pins 0–7) - **Full GPIO** — PORTB, PORTC, PORTD (Uno/Nano/Mega); all ATtiny85 ports (PB0–PB5)
- **Timer0/Timer1/Timer2** — `millis()`, `delay()`, PWM via `analogWrite()` - **Timer0/Timer1/Timer2** — `millis()`, `delay()`, PWM via `analogWrite()`
- **USART** — full transmit and receive, auto baud-rate detection - **USART** — full transmit and receive, auto baud-rate detection
- **ADC** — `analogRead()` on A0–A5, voltage injection from potentiometers on canvas - **ADC** — `analogRead()`, voltage injection from potentiometers on canvas
- **SPI** — hardware SPI peripheral (ILI9341, SD card, etc.) - **SPI** — hardware SPI peripheral (ILI9341, SD card, etc.)
- **I2C (TWI)** — hardware I2C with virtual device bus - **I2C (TWI)** — hardware I2C with virtual device bus
- **ATtiny85** — all 6 I/O pins, USI (Wire), Timer0/Timer1, 10-bit ADC; uses `AttinyCore`
- ~60 FPS simulation loop via `requestAnimationFrame` - ~60 FPS simulation loop via `requestAnimationFrame`
#### RP2040 (Raspberry Pi Pico / Pico W) #### RP2040 (Raspberry Pi Pico / Pico W)
- **Real RP2040 emulation** at 125 MHz via rp2040js — ARM Cortex-M0+ - **Real RP2040 emulation** at 133 MHz via rp2040js — ARM Cortex-M0+
- **All 30 GPIO pins** — input/output, event listeners, pin state injection - **All 30 GPIO pins** — input/output, event listeners, pin state injection
- **UART0 + UART1** — serial output in Serial Monitor; Serial input from UI - **UART0 + UART1** — serial output in Serial Monitor; Serial input from UI
- **ADC** — 12-bit on GPIO 26–29 (A0–A3) + internal temperature sensor (ch4) - **ADC** — 12-bit on GPIO 26–29 (A0–A3) + internal temperature sensor (ch4)
@ -159,11 +167,12 @@ See [docs/RP2040_EMULATION.md](docs/RP2040_EMULATION.md) for full technical deta
See [docs/ESP32_EMULATION.md](docs/ESP32_EMULATION.md) for setup and full technical details. See [docs/ESP32_EMULATION.md](docs/ESP32_EMULATION.md) for setup and full technical details.
#### ESP32-C3 / XIAO-C3 (RISC-V, in-browser) #### ESP32-C3 / XIAO-C3 / SuperMini / CH32V003 (RISC-V, in-browser)
- **RV32IMC emulation** in TypeScript — no backend, no QEMU, no WebSocket - **RV32IMC emulation** in TypeScript — no backend, no QEMU, no WebSocket
- **GPIO 0–21** via W1TS/W1TC MMIO registers - **GPIO 0–21** via W1TS/W1TC MMIO registers (ESP32-C3); PB0–PB5 (CH32V003)
- **UART0** serial output in Serial Monitor - **UART0** serial output in Serial Monitor
- **CH32V003** — RV32EC core at 48 MHz, 16 KB flash, DIP-8 / SOP package — ultra-compact
- **Instant startup** — zero latency, works offline - **Instant startup** — zero latency, works offline
- **CI-testable** — same TypeScript runs in Vitest - **CI-testable** — same TypeScript runs in Vitest

150
frontend/index.html
View File

@ -8,9 +8,9 @@
PRIMARY SEO PRIMARY SEO
Replace https://velxio.dev with your real domain Replace https://velxio.dev with your real domain
═══════════════════════════════════════════════ --> ═══════════════════════════════════════════════ -->
<title>Velxio — Free Local Arduino Emulator | AVR8 · RP2040 · 48+ Components</title> <title>Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V · Raspberry Pi</title>
<meta name="description" content="Velxio is a free, open-source Arduino emulator that runs entirely in your browser. Real AVR8 emulation at 16 MHz, 48+ electronic components, Monaco Editor, Serial Monitor, and Library Manager — no cloud, no latency." /> <meta name="description" content="Velxio is a free, open-source multi-board emulator running in your browser. 19 boards across 5 CPU architectures: Arduino Uno/Nano/Mega (AVR8), ESP32 / ESP32-S3 (Xtensa QEMU), ESP32-C3 / CH32V003 (RISC-V), Raspberry Pi Pico (RP2040), and Raspberry Pi 3 (Linux ARM). 48+ components, Monaco Editor, Serial Monitor — no cloud, no account." />
<meta name="keywords" content="arduino emulator, arduino simulator, avr8 emulator, avr simulator, rp2040 emulator, arduino online, wokwi alternative, arduino ide browser, arduino simulator free, attmega328p simulator, raspberry pi pico emulator, arduino uno simulator, electronics simulator, velxio" /> <meta name="keywords" content="arduino emulator, arduino simulator, arduino simulator free, avr8 emulator, avr simulator, atmega328p simulator, atmega2560 simulator, attiny85 simulator, arduino uno simulator, arduino mega simulator, arduino nano simulator, rp2040 emulator, raspberry pi pico simulator, esp32 emulator, esp32 simulator, esp32-c3 simulator, esp32-s3 emulator, risc-v simulator, ch32v003, raspberry pi 3 emulator, wokwi alternative, arduino ide browser, arduino online, electronics simulator, velxio" />
<meta name="author" content="David Montero Crespo" /> <meta name="author" content="David Montero Crespo" />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" /> <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href="https://velxio.dev/" /> <link rel="canonical" href="https://velxio.dev/" />
@ -36,8 +36,8 @@
═══════════════════════════════════════════════ --> ═══════════════════════════════════════════════ -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:site_name" content="Velxio" /> <meta property="og:site_name" content="Velxio" />
<meta property="og:title" content="Velxio — Free Local Arduino Emulator" /> <meta property="og:title" content="Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V" />
<meta property="og:description" content="Write, compile, and simulate Arduino sketches entirely in your browser. Real AVR8 CPU at 16 MHz, 48+ electronic components, Serial Monitor, and Library Manager. Free &amp; open source." /> <meta property="og:description" content="Simulate 19 boards in your browser for free: Arduino Uno/Nano/Mega, ESP32 / ESP32-S3 (Xtensa), ESP32-C3 / CH32V003 (RISC-V), Raspberry Pi Pico (RP2040), and Raspberry Pi 3 Linux. 48+ components, real CPU emulation, no cloud." />
<meta property="og:url" content="https://velxio.dev/" /> <meta property="og:url" content="https://velxio.dev/" />
<meta property="og:image" content="https://velxio.dev/og-image.png" /> <meta property="og:image" content="https://velxio.dev/og-image.png" />
<meta property="og:image:type" content="image/png" /> <meta property="og:image:type" content="image/png" />
@ -52,8 +52,8 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@velxio_app" /> <meta name="twitter:site" content="@velxio_app" />
<meta name="twitter:creator" content="@velxio_app" /> <meta name="twitter:creator" content="@velxio_app" />
<meta name="twitter:title" content="Velxio — Free Local Arduino Emulator" /> <meta name="twitter:title" content="Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V" />
<meta name="twitter:description" content="Write, compile, and simulate Arduino sketches entirely in your browser. Real AVR8 CPU at 16 MHz, 48+ components, Serial Monitor, Library Manager. Free &amp; open source." /> <meta name="twitter:description" content="Simulate 19 boards in your browser: Arduino Uno/Mega, ESP32/ESP32-S3 (QEMU), ESP32-C3/CH32V003 (RISC-V), Raspberry Pi Pico, Raspberry Pi 3 Linux. 48+ components, free &amp; open-source." />
<meta name="twitter:image" content="https://velxio.dev/og-image.png" /> <meta name="twitter:image" content="https://velxio.dev/og-image.png" />
<meta name="twitter:image:alt" content="Velxio Arduino Emulator — Real AVR8, 48+ Components, Monaco Editor" /> <meta name="twitter:image:alt" content="Velxio Arduino Emulator — Real AVR8, 48+ Components, Monaco Editor" />
@ -119,8 +119,8 @@
"@type": "SoftwareApplication", "@type": "SoftwareApplication",
"@id": "https://velxio.dev/#app", "@id": "https://velxio.dev/#app",
"name": "Velxio", "name": "Velxio",
"alternateName": ["Velxio Arduino Emulator", "Velxio AVR Simulator"], "alternateName": ["Velxio Arduino Emulator", "Velxio AVR Simulator", "Velxio ESP32 Emulator", "Velxio Multi-Board Simulator"],
"description": "Free, open-source Arduino emulator running entirely in the browser. Features real ATmega328p (AVR8) emulation at 16 MHz, RP2040 emulation, 48+ interactive electronic components, Monaco Editor, Serial Monitor with baud-rate detection, arduino-cli compilation backend, and Library Manager.", "description": "Free, open-source multi-board emulator running entirely in the browser. 19 boards across 5 CPU architectures: ATmega328p/2560/ATtiny85 (AVR8 via avr8js), RP2040 ARM Cortex-M0+ (rp2040js), ESP32-C3/CH32V003 RISC-V RV32IMC (browser), ESP32/ESP32-S3 Xtensa LX6/LX7 (QEMU), and Raspberry Pi 3B ARM Cortex-A53 (QEMU Linux). Features 48+ interactive electronic components, Monaco Editor, Serial Monitor, arduino-cli compilation, and Library Manager.",
"url": "https://velxio.dev/", "url": "https://velxio.dev/",
"applicationCategory": "DeveloperApplication", "applicationCategory": "DeveloperApplication",
"applicationSubCategory": "Electronics Simulator", "applicationSubCategory": "Electronics Simulator",
@ -135,17 +135,21 @@
"availability": "https://schema.org/InStock" "availability": "https://schema.org/InStock"
}, },
"featureList": [ "featureList": [
"Real ATmega328p AVR8 emulation at 16 MHz", "Real AVR8 emulation: Arduino Uno (ATmega328p), Nano, Mega 2560 (ATmega2560), ATtiny85, Leonardo (ATmega32u4), Pro Mini at 16 MHz",
"RP2040 (Raspberry Pi Pico) emulation", "RP2040 emulation: Raspberry Pi Pico and Pico W (ARM Cortex-M0+ at 133 MHz via rp2040js)",
"48+ electronic web components", "RISC-V emulation: ESP32-C3 DevKit, XIAO ESP32-C3, ESP32-C3 SuperMini, CH32V003 (RV32IMC/RV32EC browser-native)",
"Monaco Code Editor with C++ syntax highlighting", "ESP32 / ESP32-S3 / ESP32-CAM / Nano ESP32 emulation (Xtensa LX6/LX7 via QEMU)",
"arduino-cli compilation backend", "Raspberry Pi 3B emulation: full ARM Cortex-A53 Linux (Raspberry Pi OS via QEMU raspi3b)",
"Serial Monitor with auto baud-rate detection", "48+ electronic web components: LEDs, resistors, servos, sensors, TFT displays, NeoPixel, LCD",
"Library Manager for Arduino libraries", "Monaco Code Editor with C++ / Python syntax highlighting and autocomplete",
"Multi-file workspace", "arduino-cli compilation backend — produces real .hex / .bin / .uf2 files",
"Wire system with orthogonal routing", "Serial Monitor with auto baud-rate detection and send",
"Library Manager for the full Arduino library index",
"Multi-file workspace (.ino, .h, .cpp, .py)",
"Wire system with orthogonal routing and 8 signal-type colors",
"ILI9341 TFT display simulation", "ILI9341 TFT display simulation",
"I2C, SPI, USART, ADC, PWM support" "I2C, SPI, USART, ADC, PWM support across all emulated boards",
"Multi-board canvas: mix Arduino + ESP32 + Raspberry Pi on the same simulation"
], ],
"screenshot": "https://velxio.dev/og-image.png", "screenshot": "https://velxio.dev/og-image.png",
"downloadUrl": "https://hub.docker.com/r/davidmonterocrespo24/velxio", "downloadUrl": "https://hub.docker.com/r/davidmonterocrespo24/velxio",
@ -163,7 +167,7 @@
"name": "David Montero Crespo", "name": "David Montero Crespo",
"url": "https://github.com/davidmonterocrespo24" "url": "https://github.com/davidmonterocrespo24"
}, },
"keywords": "arduino emulator, avr8 simulator, rp2040 emulator, arduino online ide, electronics simulator, wokwi alternative", "keywords": "arduino emulator, arduino simulator, avr8 simulator, atmega328p emulator, atmega2560, attiny85, esp32 emulator, esp32 simulator, esp32-c3 simulator, esp32-s3 emulator, rp2040 emulator, raspberry pi pico emulator, raspberry pi 3 emulator, risc-v simulator, wokwi alternative",
"inLanguage": "en-US" "inLanguage": "en-US"
}, },
{ {
@ -188,7 +192,7 @@
"name": "Is Velxio free?", "name": "Is Velxio free?",
"acceptedAnswer": { "acceptedAnswer": {
"@type": "Answer", "@type": "Answer",
"text": "Yes, Velxio is completely free and open source under the MIT License." "text": "Yes. Velxio is completely free and open-source under the GNU AGPLv3 license. No account required, no cloud subscription. Run it at velxio.dev or self-host with one Docker command."
} }
}, },
{ {
@ -204,7 +208,7 @@
"name": "What boards does Velxio support?", "name": "What boards does Velxio support?",
"acceptedAnswer": { "acceptedAnswer": {
"@type": "Answer", "@type": "Answer",
"text": "Velxio supports Arduino Uno (ATmega328p) with full AVR8 emulation and Raspberry Pi Pico (RP2040) emulation. More boards are planned." "text": "Velxio supports 19 boards across 5 CPU architectures: (1) AVR8 — Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560 (ATmega2560), ATtiny85, Arduino Leonardo (ATmega32u4), Arduino Pro Mini; (2) RP2040 — Raspberry Pi Pico and Raspberry Pi Pico W; (3) RISC-V — ESP32-C3 DevKit, Seeed XIAO ESP32-C3, ESP32-C3 SuperMini, CH32V003 (RV32EC); (4) Xtensa (QEMU) — ESP32 DevKit V1/C V4, ESP32-S3, ESP32-CAM, Seeed XIAO ESP32-S3, Arduino Nano ESP32; (5) ARM Cortex-A53 (QEMU Linux) — Raspberry Pi 3B running Raspberry Pi OS."
} }
}, },
{ {
@ -235,25 +239,41 @@
<div id="root-seo" aria-hidden="true"> <div id="root-seo" aria-hidden="true">
<header style="font-family:sans-serif;background:#0d1117;color:#e6edf3;padding:1.5rem 2rem;"> <header style="font-family:sans-serif;background:#0d1117;color:#e6edf3;padding:1.5rem 2rem;">
<a href="/" style="text-decoration:none;color:inherit;"> <a href="/" style="text-decoration:none;color:inherit;">
<h1 style="margin:0;font-size:1.5rem;">Velxio &mdash; Free Local Arduino Emulator</h1> <h1 style="margin:0;font-size:1.5rem;">Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V · Raspberry Pi</h1>
</a> </a>
<nav style="margin-top:.75rem;"> <nav style="margin-top:.75rem;">
<a href="/editor" style="color:#58a6ff;margin-right:1.5rem;">Editor</a> <a href="/editor" style="color:#58a6ff;margin-right:1.5rem;">Editor</a>
<a href="/examples" style="color:#58a6ff;margin-right:1.5rem;">Examples</a> <a href="/examples" style="color:#58a6ff;margin-right:1.5rem;">Examples</a>
<a href="/arduino-simulator" style="color:#58a6ff;margin-right:1.5rem;">Arduino Simulator</a>
<a href="/arduino-emulator" style="color:#58a6ff;margin-right:1.5rem;">Arduino Emulator</a>
<a href="/atmega328p-simulator" style="color:#58a6ff;margin-right:1.5rem;">ATmega328P Simulator</a>
<a href="/arduino-mega-simulator" style="color:#58a6ff;margin-right:1.5rem;">Arduino Mega Simulator</a>
<a href="https://github.com/davidmonterocrespo24/velxio" style="color:#58a6ff;margin-right:1.5rem;">GitHub</a> <a href="https://github.com/davidmonterocrespo24/velxio" style="color:#58a6ff;margin-right:1.5rem;">GitHub</a>
<a href="https://discord.gg/rCScB9cG" style="color:#58a6ff;">Discord</a> <a href="https://discord.gg/rCScB9cG" style="color:#58a6ff;">Discord</a>
<a href="/docs/intro" style="color:#58a6ff;margin-right:1.5rem;">Documentation</a> <a href="/docs/intro" style="color:#58a6ff;margin-right:1.5rem;">Documentation</a>
</nav> </nav>
</header> </header>
<main style="font-family:sans-serif;background:#0d1117;color:#e6edf3;padding:2rem;"> <main style="font-family:sans-serif;background:#0d1117;color:#e6edf3;padding:2rem;">
<h2>The free, open-source Arduino emulator that runs in your browser</h2> <h2>Free multi-board emulator running in your browser — 19 boards, 5 CPU architectures</h2>
<p>Write Arduino code, compile it, and simulate it with real AVR8 CPU emulation and 48+ interactive electronic components &mdash; all running locally in your browser. No cloud, no latency, no account required.</p> <p>Simulate Arduino, ESP32, Raspberry Pi Pico, RISC-V, and Raspberry Pi 3 code in your browser with real CPU emulation. 48+ interactive electronic components, Monaco Editor, Serial Monitor, arduino-cli compiler, and Library Manager — no cloud, no latency, no account required.</p>
<h3>Features</h3> <h3>Features</h3>
<ul> <ul>
<li>Real ATmega328p (AVR8) emulation at 16 MHz via avr8js</li> <li>Real AVR8 emulation: Arduino Uno (ATmega328p), Nano, Mega 2560, ATtiny85, Leonardo, Pro Mini at 16 MHz via avr8js</li>
<li>Raspberry Pi Pico (RP2040) emulation via rp2040js</li> <li>Raspberry Pi Pico &amp; Pico W (RP2040, ARM Cortex-M0+ at 133 MHz) via rp2040js</li>
<li>48+ wokwi interactive electronic components (LEDs, resistors, buttons, sensors&hellip;)</li> <li>ESP32-C3 / XIAO ESP32-C3 / SuperMini / CH32V003 (RISC-V RV32IMC/EC) &mdash; browser-native, no backend needed</li>
<li>Monaco Code Editor with full C++ / Arduino syntax highlighting</li> <li>ESP32 / ESP32-S3 / ESP32-CAM / Arduino Nano ESP32 (Xtensa LX6/LX7 at 240 MHz) via QEMU lcgamboa</li>
<li>Raspberry Pi 3B (ARM Cortex-A53, full Linux) via QEMU raspi3b &mdash; runs Python scripts with RPi.GPIO</li>
<li>48+ wokwi interactive electronic components (LEDs, resistors, buttons, sensors, TFT displays, NeoPixel&hellip;)</li>
<li>Monaco Code Editor with full C++ / Python syntax highlighting</li>
<li>arduino-cli compilation backend &mdash; produces real .hex / .uf2 / .bin files</li>
<li>Serial Monitor with auto baud-rate detection and send</li>
<li>Library Manager for Arduino libraries</li>
<li>Multi-file workspace (.ino, .h, .cpp, .py)</li>
<li>Wire system with orthogonal routing</li>
<li>ILI9341 TFT display simulation</li>
<li>I2C, SPI, USART, ADC, PWM support</li>
<li>Multi-board canvas: mix Arduino + ESP32 + Raspberry Pi in one simulation</li>
</ul>
<li>arduino-cli compilation backend &mdash; produces real .hex / .uf2 files</li> <li>arduino-cli compilation backend &mdash; produces real .hex / .uf2 files</li>
<li>Serial Monitor with auto baud-rate detection and send</li> <li>Serial Monitor with auto baud-rate detection and send</li>
<li>Library Manager for Arduino libraries</li> <li>Library Manager for Arduino libraries</li>
@ -265,8 +285,24 @@
</ul> </ul>
<h3>Supported Boards</h3> <h3>Supported Boards</h3>
<ul> <ul>
<li>Arduino Uno (ATmega328p) &mdash; full AVR8 emulation</li> <li>Arduino Uno (ATmega328P) &mdash; full AVR8 emulation at 16 MHz</li>
<li>Raspberry Pi Pico (RP2040) &mdash; RP2040 emulation</li> <li>Arduino Nano (ATmega328P) &mdash; full AVR8 emulation at 16 MHz</li>
<li>Arduino Mega 2560 (ATmega2560) &mdash; 256 KB flash, 54 digital pins, 4 serial ports</li>
<li>ATtiny85 &mdash; AVR, 8 KB flash, DIP-8, all 6 I/O pins emulated</li>
<li>Arduino Leonardo (ATmega32u4) &mdash; USB HID capable AVR</li>
<li>Arduino Pro Mini (ATmega328P) &mdash; 3.3 V / 5 V variants</li>
<li>Raspberry Pi Pico (RP2040) &mdash; ARM Cortex-M0+ at 133 MHz</li>
<li>Raspberry Pi Pico W (RP2040) &mdash; ARM Cortex-M0+ + WiFi</li>
<li>ESP32-C3 DevKit (RISC-V RV32IMC) &mdash; 160 MHz, browser-native</li>
<li>Seeed XIAO ESP32-C3 (RISC-V RV32IMC) &mdash; compact, browser-native</li>
<li>ESP32-C3 SuperMini (RISC-V RV32IMC) &mdash; mini form factor</li>
<li>CH32V003 (RISC-V RV32EC) &mdash; 48 MHz, ultra-compact DIP-8</li>
<li>ESP32 DevKit V1 / C V4 (Xtensa LX6) &mdash; 240 MHz, WiFi, QEMU</li>
<li>ESP32-S3 (Xtensa LX7) &mdash; 240 MHz, dual-core, QEMU</li>
<li>ESP32-CAM (Xtensa LX6) &mdash; camera module, QEMU</li>
<li>Seeed XIAO ESP32-S3 (Xtensa LX7) &mdash; compact, QEMU</li>
<li>Arduino Nano ESP32 (Xtensa LX6) &mdash; Arduino form factor, QEMU</li>
<li>Raspberry Pi 3B (ARM Cortex-A53) &mdash; full Linux OS via QEMU raspi3b, runs Python</li>
</ul> </ul>
<h3>Get Started</h3> <h3>Get Started</h3>
<p> <p>
@ -297,8 +333,58 @@
<dt>Is Velxio a Wokwi alternative?</dt> <dt>Is Velxio a Wokwi alternative?</dt>
<dd>Yes. Velxio is a free, self-hosted alternative to Wokwi. It uses the same avr8js and wokwi-elements open-source libraries but runs on your own machine.</dd> <dd>Yes. Velxio is a free, self-hosted alternative to Wokwi. It uses the same avr8js and wokwi-elements open-source libraries but runs on your own machine.</dd>
<dt>What boards are supported?</dt> <dt>What boards are supported?</dt>
<dd>Arduino Uno (ATmega328p / AVR8) and Raspberry Pi Pico (RP2040). More boards are planned.</dd> <dd>Arduino Uno (ATmega328p / AVR8), Arduino Nano, Arduino Mega 2560, Raspberry Pi Pico (RP2040), ESP32-C3 (RISC-V), and more. 17 boards in total.</dd>
</dl> </dl>
<!-- SEO landing pages — keyword content for crawlers -->
<section>
<h2>Free Online Arduino Simulator</h2>
<p>Velxio is a free online Arduino simulator with real AVR8 emulation at 16 MHz. Simulate Arduino code with 48+ interactive electronic components directly in your browser — no install, no account required. <a href="/arduino-simulator">Open Arduino Simulator →</a></p>
<ul>
<li>Arduino Uno (ATmega328P) simulation at 16 MHz</li>
<li>48+ visual components: LEDs, sensors, displays, servos</li>
<li>Serial Monitor with auto baud-rate detection</li>
<li>Multi-file sketch support (.ino, .h, .cpp)</li>
<li>Free and open-source (GNU AGPLv3)</li>
</ul>
</section>
<section>
<h2>Arduino Emulator — Real AVR8 &amp; RP2040 Emulation</h2>
<p>Velxio is a cycle-accurate Arduino emulator built on avr8js and rp2040js. Every AVR opcode is faithfully emulated at 16 MHz — the same silicon behavior as real hardware. <a href="/arduino-emulator">Open Arduino Emulator →</a></p>
<ul>
<li>All 135 AVR8 instructions emulated</li>
<li>Hardware timers (Timer0/1/2) with PWM, CTC, and overflow interrupts</li>
<li>10-bit ADC, full USART0 (TX/RX), SPI, I2C</li>
<li>RP2040 dual-core ARM Cortex-M0+ via rp2040js</li>
<li>RISC-V RV32IMC (ESP32-C3) emulation in browser</li>
</ul>
</section>
<section>
<h2>ATmega328P Simulator</h2>
<p>Simulate ATmega328P firmware exactly as it runs on Arduino Uno and Nano. Full AVR8 emulation: PORTB, PORTC, PORTD, Timer0/1/2, ADC, USART0, and all interrupt vectors. <a href="/atmega328p-simulator">Open ATmega328P Simulator →</a></p>
<ul>
<li>ATmega328P: 32 KB flash, 2 KB SRAM, 16 MHz</li>
<li>GPIO: PORTB (pins 8–13), PORTC (A0–A5), PORTD (0–7)</li>
<li>Timer0 (8-bit), Timer1 (16-bit), Timer2 (8-bit) — all PWM modes</li>
<li>10-bit ADC, 6 analog channels (A0–A5)</li>
<li>USART0 with configurable baud rate</li>
</ul>
</section>
<section>
<h2>Arduino Mega 2560 Simulator</h2>
<p>Simulate Arduino Mega 2560 (ATmega2560) code for free. 256 KB flash, 54 digital pins, 16 analog inputs, 4 hardware serial ports (Serial, Serial1, Serial2, Serial3), and 6 hardware timers. <a href="/arduino-mega-simulator">Open Mega 2560 Simulator →</a></p>
<ul>
<li>ATmega2560: 256 KB flash, 8 KB SRAM, 16 MHz</li>
<li>54 digital I/O pins (PORTA through PORTL)</li>
<li>16 analog input channels (A0–A15), 10-bit ADC</li>
<li>4 hardware USART channels: Serial0–3</li>
<li>6 hardware timers: Timer0–5 (including three 16-bit)</li>
<li>15 PWM output pins</li>
</ul>
</section>
</main> </main>
</div> </div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>

31
frontend/public/sitemap.xml
View File

@ -95,11 +95,40 @@
<url> <url>
<loc>https://velxio.dev/examples</loc> <loc>https://velxio.dev/examples</loc>
<lastmod>2026-03-15</lastmod> <lastmod>2026-03-23</lastmod>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<priority>0.8</priority> <priority>0.8</priority>
</url> </url>
<!-- SEO keyword landing pages -->
<url>
<loc>https://velxio.dev/arduino-simulator</loc>
<lastmod>2026-03-23</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://velxio.dev/arduino-emulator</loc>
<lastmod>2026-03-23</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://velxio.dev/atmega328p-simulator</loc>
<lastmod>2026-03-23</lastmod>
<changefreq>monthly</changefreq>
<priority>0.85</priority>
</url>
<url>
<loc>https://velxio.dev/arduino-mega-simulator</loc>
<lastmod>2026-03-23</lastmod>
<changefreq>monthly</changefreq>
<priority>0.85</priority>
</url>
<url> <url>
<loc>https://velxio.dev/login</loc> <loc>https://velxio.dev/login</loc>
<lastmod>2026-03-06</lastmod> <lastmod>2026-03-06</lastmod>

9
frontend/src/App.tsx
View File

@ -10,6 +10,10 @@ import { UserProfilePage } from './pages/UserProfilePage';
import { ProjectPage } from './pages/ProjectPage'; import { ProjectPage } from './pages/ProjectPage';
import { ProjectByIdPage } from './pages/ProjectByIdPage'; import { ProjectByIdPage } from './pages/ProjectByIdPage';
import { AdminPage } from './pages/AdminPage'; import { AdminPage } from './pages/AdminPage';
import { ArduinoSimulatorPage } from './pages/ArduinoSimulatorPage';
import { ArduinoEmulatorPage } from './pages/ArduinoEmulatorPage';
import { AtmegaSimulatorPage } from './pages/AtmegaSimulatorPage';
import { ArduinoMegaSimulatorPage } from './pages/ArduinoMegaSimulatorPage';
import { useAuthStore } from './store/useAuthStore'; import { useAuthStore } from './store/useAuthStore';
import './App.css'; import './App.css';
@ -31,6 +35,11 @@ function App() {
<Route path="/register" element={<RegisterPage />} /> <Route path="/register" element={<RegisterPage />} />
<Route path="/admin" element={<AdminPage />} /> <Route path="/admin" element={<AdminPage />} />
<Route path="/docs/:section" element={<DocsPage />} /> <Route path="/docs/:section" element={<DocsPage />} />
{/* SEO landing pages — keyword-targeted */}
<Route path="/arduino-simulator" element={<ArduinoSimulatorPage />} />
<Route path="/arduino-emulator" element={<ArduinoEmulatorPage />} />
<Route path="/atmega328p-simulator" element={<AtmegaSimulatorPage />} />
<Route path="/arduino-mega-simulator" element={<ArduinoMegaSimulatorPage />} />
{/* Canonical project URL by ID */} {/* Canonical project URL by ID */}
<Route path="/project/:id" element={<ProjectByIdPage />} /> <Route path="/project/:id" element={<ProjectByIdPage />} />
{/* Legacy slug route — redirects to /project/:id */} {/* Legacy slug route — redirects to /project/:id */}

189
frontend/src/pages/ArduinoEmulatorPage.tsx Normal file
View File

@ -0,0 +1,189 @@
/**
* /arduino-emulator — SEO landing page
* Target keywords: "arduino emulator"
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { AppHeader } from '../components/layout/AppHeader';
import { useSEO } from '../utils/useSEO';
import './SEOPage.css';
const FAQ_ITEMS = [
{
q: 'What is an Arduino emulator?',
a: 'An Arduino emulator reproduces the behavior of a physical Arduino microcontroller in software — CPU instruction execution, peripheral registers (GPIO, USART, ADC, timers, PWM), and interrupts — with no hardware required.',
},
{
q: 'How accurate is Velxio\'s Arduino emulation?',
a: 'Velxio uses avr8js, which provides cycle-accurate AVR8 instruction emulation. Every AVR opcode is faithfully emulated at 16 MHz, making it reliable for developing and debugging real firmware before flashing to hardware.',
},
{
q: 'Which Arduino boards can Velxio emulate?',
a: 'Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560 (ATmega2560), ATtiny85 (AVR8), Arduino Leonardo (ATmega32u4), Arduino Pro Mini, Raspberry Pi Pico and Pico W (RP2040), and multiple ESP32/RISC-V boards. 19 boards across 5 CPU architectures.',
},
{
q: 'What peripherals are emulated?',
a: 'GPIO ports (PORTB, PORTC, PORTD), hardware timers (Timer0, Timer1, Timer2), 8/16-bit PWM, USART serial, 10-bit ADC (analog inputs), SPI, and I2C. All standard Arduino library functions work correctly.',
},
{
q: 'How is Velxio different from Wokwi?',
a: 'Velxio is fully self-hosted and open-source under GNU AGPLv3. It uses the same avr8js emulation library as Wokwi but runs entirely on your own machine — no cloud dependency, no registration, no subscription.',
},
];
const JSON_LD: object[] = [
{
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: 'Velxio Arduino Emulator',
applicationCategory: 'DeveloperApplication',
operatingSystem: 'Any (browser-based)',
description:
'Free, open-source Arduino emulator with cycle-accurate AVR8 emulation at 16 MHz. Emulate Arduino Uno, Nano, Mega and Raspberry Pi Pico in your browser — no cloud, no install.',
url: 'https://velxio.dev/arduino-emulator',
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
author: { '@type': 'Person', name: 'David Montero Crespo' },
license: 'https://www.gnu.org/licenses/agpl-3.0.html',
},
{
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: FAQ_ITEMS.map(({ q, a }) => ({
'@type': 'Question',
name: q,
acceptedAnswer: { '@type': 'Answer', text: a },
})),
},
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{ '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' },
{ '@type': 'ListItem', position: 2, name: 'Arduino Emulator', item: 'https://velxio.dev/arduino-emulator' },
],
},
];
export const ArduinoEmulatorPage: React.FC = () => {
useSEO({
title: 'Arduino Emulator — Real AVR8 & RP2040 Emulation, Free | Velxio',
description:
'Free, open-source Arduino emulator with cycle-accurate AVR8 emulation at 16 MHz. Emulate Arduino Uno, Nano, Mega and Raspberry Pi Pico in your browser — no cloud, no install.',
url: 'https://velxio.dev/arduino-emulator',
jsonLd: JSON_LD,
});
return (
<div className="seo-page">
<AppHeader />
<main>
{/* Hero */}
<section className="seo-hero">
<h1>
Arduino Emulator<br />
<span className="accent">Real AVR8 &amp; RP2040 Emulation, Free</span>
</h1>
<p className="subtitle">
Velxio is a cycle-accurate Arduino emulator running entirely in your browser. Every AVR opcode is faithfully
executed at 16 MHz — the same silicon behavior as real hardware, without buying hardware.
</p>
<div className="seo-cta-group">
<Link to="/editor" className="seo-btn-primary">Open Emulator →</Link>
<Link to="/docs/emulator" className="seo-btn-secondary">Emulation Details</Link>
</div>
<p className="seo-trust">Free &amp; open-source · Built on avr8js &amp; rp2040js · No signup required</p>
</section>
{/* Emulation accuracy */}
<section className="seo-section">
<h2>Emulation accuracy</h2>
<p className="lead">
Velxio uses <strong style={{ color: '#e6edf3' }}>avr8js</strong> for AVR8 and <strong style={{ color: '#e6edf3' }}>rp2040js</strong> for RP2040 — open-source libraries developed by the Wokwi team that provide genuine hardware fidelity.
</p>
<div className="seo-grid">
<div className="seo-card">
<h3>AVR8 Instruction Set</h3>
<p>All 135 AVR instructions emulated including MUL, MULSU, FMUL, LPM, SPM, and all branch/skip instructions. 16 MHz clock.</p>
</div>
<div className="seo-card">
<h3>Hardware Timers</h3>
<p>Timer0, Timer1, Timer2 with prescaler support, overflow interrupts, and Output Compare — enabling <code>delay()</code>, <code>millis()</code>, and PWM.</p>
</div>
<div className="seo-card">
<h3>USART Serial</h3>
<p>Full USART emulation with configurable baud rate and TX/RX interrupts. <code>Serial.print()</code> works exactly as on real Arduino hardware.</p>
</div>
<div className="seo-card">
<h3>10-bit ADC</h3>
<p>Analog-to-digital converter emulation with analog reference support. <code>analogRead()</code> returns accurate values from simulated sensors.</p>
</div>
<div className="seo-card">
<h3>RP2040 Dual-Core ARM</h3>
<p>Cortex-M0+ emulation via rp2040js. Runs Arduino-pico and PlatformIO sketches for Raspberry Pi Pico and Pico W.</p>
</div>
<div className="seo-card">
<h3>RISC-V (ESP32-C3)</h3>
<p>Browser-native RV32IMC emulation for ESP32-C3 — no backend server required, compiled to WebAssembly, runs at 160 MHz.</p>
</div>
</div>
</section>
{/* Supported boards */}
<section className="seo-section">
<h2>Supported boards</h2>
<p className="lead">19 boards across 5 CPU architectures — AVR8, ARM Cortex-M0+, RISC-V, Xtensa LX6/LX7, and ARM Cortex-A53.</p>
<div className="seo-grid">
<div className="seo-card">
<h3>AVR8 — avr8js</h3>
<p>Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560 (ATmega2560), ATtiny85, Arduino Leonardo (ATmega32u4), Arduino Pro Mini.</p>
</div>
<div className="seo-card">
<h3>RP2040 — rp2040js</h3>
<p>Raspberry Pi Pico, Raspberry Pi Pico W — dual ARM Cortex-M0+ at 133 MHz.</p>
</div>
<div className="seo-card">
<h3>RISC-V — Browser</h3>
<p>ESP32-C3 DevKit, XIAO ESP32-C3, ESP32-C3 SuperMini, CH32V003 — RV32IMC at 160 MHz.</p>
</div>
<div className="seo-card">
<h3>Xtensa — QEMU</h3>
<p>ESP32 DevKit V1/C V4, ESP32-S3, ESP32-CAM, Seeed XIAO ESP32-S3, Arduino Nano ESP32 — Xtensa LX6/LX7 at 240 MHz.</p>
</div>
<div className="seo-card">
<h3>ARM Cortex-A53 — QEMU</h3>
<p>Raspberry Pi 3B — quad-core 1.2 GHz, full Linux, Python 3. Run real OS-level programs in the browser.</p>
</div>
</div>
</section>
{/* FAQ */}
<section className="seo-section">
<h2>Frequently Asked Questions</h2>
<dl className="seo-faq">
{FAQ_ITEMS.map(({ q, a }) => (
<React.Fragment key={q}>
<dt>{q}</dt>
<dd>{a}</dd>
</React.Fragment>
))}
</dl>
</section>
{/* Bottom CTA */}
<div className="seo-bottom">
<h2>Start emulating Arduino today</h2>
<p>Open the editor and execute your firmware against a real emulated CPU — no hardware purchase, no cloud, no limits.</p>
<Link to="/editor" className="seo-btn-primary">Launch Emulator →</Link>
<div className="seo-internal-links">
<Link to="/arduino-simulator">Arduino Simulator</Link>
<Link to="/atmega328p-simulator">ATmega328P Simulator</Link>
<Link to="/arduino-mega-simulator">Mega 2560 Simulator</Link>
<Link to="/docs/emulator">Emulator Architecture</Link>
<Link to="/examples">Example Projects</Link>
</div>
</div>
</main>
</div>
);
};

186
frontend/src/pages/ArduinoMegaSimulatorPage.tsx Normal file
View File

@ -0,0 +1,186 @@
/**
* /arduino-mega-simulator — SEO landing page
* Target keywords: "arduino mega", "mega 2560", "arduino mega 2560"
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { AppHeader } from '../components/layout/AppHeader';
import { useSEO } from '../utils/useSEO';
import './SEOPage.css';
const FAQ_ITEMS = [
{
q: 'What is the Arduino Mega 2560?',
a: 'The Arduino Mega 2560 is a microcontroller board based on the ATmega2560. It offers 256 KB flash memory, 8 KB SRAM, 54 digital I/O pins (15 PWM), 16 analog inputs, and 4 hardware USART channels — making it the go-to board for large, complex Arduino projects.',
},
{
q: 'Can I simulate Arduino Mega 2560 code in my browser?',
a: 'Yes. Velxio provides full ATmega2560 AVR8 emulation. Select "Arduino Mega 2560" in the board picker, write your sketch, compile, and simulate — with all 54 digital pins and 16 analog inputs available.',
},
{
q: 'Is the Arduino Mega 2560 emulation accurate?',
a: 'Velxio uses avr8js for cycle-accurate AVR8 instruction emulation. The ATmega2560 shares the same AVR8 core as the ATmega328P but with extended memory, more ports (PORTA–PORTL), and additional timers (Timer3, Timer4, Timer5) — all emulated.',
},
{
q: 'What additional features does the Mega have over Arduino Uno?',
a: 'Arduino Mega 2560 adds: 8× more flash (256 KB vs 32 KB), 4× more SRAM (8 KB vs 2 KB), 40 extra digital pins, 10 extra analog inputs, 3 extra hardware serial ports (Serial1, Serial2, Serial3), and 3 extra 16-bit timers (Timer3, Timer4, Timer5).',
},
{
q: 'Does the Mega simulator support multiple Serial ports?',
a: 'Yes. Serial (USART0), Serial1 (USART1), Serial2 (USART2), and Serial3 (USART3) are all emulated. Each appears in the Serial Monitor tab so you can monitor multi-serial communication projects.',
},
];
const JSON_LD: object[] = [
{
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: 'Arduino Mega 2560 Simulator — Velxio',
applicationCategory: 'DeveloperApplication',
operatingSystem: 'Any (browser-based)',
description:
'Free online Arduino Mega 2560 simulator. Emulate ATmega2560 with 256 KB flash, 54 digital pins, 16 analog inputs, and 4 serial ports — full AVR8 emulation in your browser.',
url: 'https://velxio.dev/arduino-mega-simulator',
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
author: { '@type': 'Person', name: 'David Montero Crespo' },
license: 'https://www.gnu.org/licenses/agpl-3.0.html',
},
{
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: FAQ_ITEMS.map(({ q, a }) => ({
'@type': 'Question',
name: q,
acceptedAnswer: { '@type': 'Answer', text: a },
})),
},
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{ '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' },
{ '@type': 'ListItem', position: 2, name: 'Arduino Mega 2560 Simulator', item: 'https://velxio.dev/arduino-mega-simulator' },
],
},
];
export const ArduinoMegaSimulatorPage: React.FC = () => {
useSEO({
title: 'Arduino Mega 2560 Simulator — Free Online AVR8 Emulator | Velxio',
description:
'Simulate Arduino Mega 2560 (ATmega2560) code for free in your browser. 256 KB flash, 54 digital pins, 16 analog inputs, 4 serial ports — full AVR8 emulation with 48+ components.',
url: 'https://velxio.dev/arduino-mega-simulator',
jsonLd: JSON_LD,
});
return (
<div className="seo-page">
<AppHeader />
<main>
{/* Hero */}
<section className="seo-hero">
<h1>
Arduino Mega 2560 Simulator<br />
<span className="accent">Free Online AVR8 Emulation</span>
</h1>
<p className="subtitle">
Simulate Arduino Mega 2560 sketches in your browser with full ATmega2560 emulation — 256 KB flash, 54 digital
pins, 16 analog inputs, 4 serial ports, and 6 timers. Free and open-source.
</p>
<div className="seo-cta-group">
<Link to="/editor" className="seo-btn-primary">Open Mega 2560 Simulator →</Link>
<Link to="/examples" className="seo-btn-secondary">Browse Examples</Link>
</div>
<p className="seo-trust">Free &amp; open-source · No signup required · Full ATmega2560 emulation</p>
</section>
{/* ATmega2560 specs */}
<section className="seo-section">
<h2>Arduino Mega 2560 — full spec emulation</h2>
<p className="lead">
The ATmega2560 is the most capable AVR8 microcontroller in the Arduino lineup. Velxio emulates its complete
peripheral set so every Mega-specific feature works in the simulator.
</p>
<div className="seo-grid">
<div className="seo-card">
<h3>256 KB Flash</h3>
<p>8× more program storage than Arduino Uno. Run large sketches, complex state machines, and data-heavy applications without storage constraints.</p>
</div>
<div className="seo-card">
<h3>54 Digital Pins</h3>
<p>Full PORTA through PORTL emulation. 40 extra I/O pins compared to the Uno — ideal for multiplexed displays, large button matrices, and multi-module projects.</p>
</div>
<div className="seo-card">
<h3>16 Analog Inputs</h3>
<p>10-bit ADC with 16 channels (A0–A15). Connect multiple sensors, potentiometers, and analog components simultaneously in the simulation.</p>
</div>
<div className="seo-card">
<h3>4 Hardware Serial</h3>
<p>Serial (USART0–3) all emulated. Serial1, Serial2, Serial3 appear in the Serial Monitor — test multi-device serial communication projects.</p>
</div>
<div className="seo-card">
<h3>6 Hardware Timers</h3>
<p>Timer0/1/2/3/4/5. Three extra 16-bit timers (Timer3, Timer4, Timer5) compared to Uno — more PWM outputs and precise timing channels.</p>
</div>
<div className="seo-card">
<h3>15 PWM Outputs</h3>
<p>15 pins with hardware PWM support via analogWrite(). Ideal for motor control, servo arrays, LED dimming, and audio output projects.</p>
</div>
</div>
</section>
{/* Use cases */}
<section className="seo-section">
<h2>What the Mega 2560 is used for</h2>
<p className="lead">The Arduino Mega 2560 is the preferred board for complex makers projects. Simulate them all without hardware.</p>
<div className="seo-grid">
<div className="seo-card">
<h3>3D Printer Firmware</h3>
<p>Marlin and RAMPS 1.4 shields run on ATmega2560. Prototype and debug printer control logic in the simulator.</p>
</div>
<div className="seo-card">
<h3>CNC &amp; Robotics</h3>
<p>GRBL CNC controller and multi-servo robot arms benefit from the Mega's extra I/O pins and timers.</p>
</div>
<div className="seo-card">
<h3>Large LED Matrices</h3>
<p>Driving 8×8 or 16×16 LED matrices requires many pins. The Mega's 54 digital outputs make it ideal.</p>
</div>
<div className="seo-card">
<h3>Multi-Sensor Systems</h3>
<p>16 analog inputs allow simultaneous reading from temperature, pressure, humidity, and light sensors without multiplexing.</p>
</div>
</div>
</section>
{/* FAQ */}
<section className="seo-section">
<h2>Frequently Asked Questions</h2>
<dl className="seo-faq">
{FAQ_ITEMS.map(({ q, a }) => (
<React.Fragment key={q}>
<dt>{q}</dt>
<dd>{a}</dd>
</React.Fragment>
))}
</dl>
</section>
{/* Bottom CTA */}
<div className="seo-bottom">
<h2>Simulate your Arduino Mega project</h2>
<p>Select the Mega 2560 board in the editor and start simulating — full ATmega2560 emulation, no hardware purchase needed.</p>
<Link to="/editor" className="seo-btn-primary">Launch Mega 2560 Simulator →</Link>
<div className="seo-internal-links">
<Link to="/arduino-simulator">Arduino Simulator</Link>
<Link to="/arduino-emulator">Arduino Emulator</Link>
<Link to="/atmega328p-simulator">ATmega328P (Uno/Nano)</Link>
<Link to="/examples">Example Projects</Link>
<Link to="/docs/intro">Documentation</Link>
</div>
</div>
</main>
</div>
);
};

185
frontend/src/pages/ArduinoSimulatorPage.tsx Normal file
View File

@ -0,0 +1,185 @@
/**
* /arduino-simulator — SEO landing page
* Target keywords: "arduino simulator", "arduino simulator free"
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { AppHeader } from '../components/layout/AppHeader';
import { useSEO } from '../utils/useSEO';
import './SEOPage.css';
const FAQ_ITEMS = [
{
q: 'Is this Arduino simulator free?',
a: 'Yes. Velxio is completely free and open-source (GNU AGPLv3). No account, no payment, no cloud subscription — run it in your browser or self-host it with one Docker command.',
},
{
q: 'Does the Arduino simulator work without installing anything?',
a: 'The simulation engine runs entirely in your browser. Compiling code requires the arduino-cli backend, which you can run locally or via Docker. No IDE installation is needed.',
},
{
q: 'What Arduino boards can I simulate?',
a: 'Velxio supports 19 boards: Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560, ATtiny85, Arduino Leonardo, Arduino Pro Mini (AVR8) — plus Raspberry Pi Pico (RP2040), ESP32-C3 / XIAO ESP32-C3 / CH32V003 (RISC-V), ESP32 / ESP32-S3 / ESP32-CAM (Xtensa via QEMU), and Raspberry Pi 3B (Linux via QEMU).',
},
{
q: 'Can I simulate LEDs, sensors, and displays?',
a: 'Yes. Velxio includes 48+ interactive wokwi-elements: LEDs, resistors, buttons, servo motors, ultrasonic sensors, ILI9341 TFT displays, LCD, NeoPixel strips, buzzers, DHT22, and more.',
},
{
q: 'Is Velxio a Wokwi alternative?',
a: 'Yes. Velxio is a free, self-hosted alternative to Wokwi. It uses the same avr8js emulation library and wokwi-elements visual components, but runs entirely on your own machine with no cloud dependency.',
},
];
const JSON_LD: object[] = [
{
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: 'Velxio — Free Online Arduino Simulator',
applicationCategory: 'DeveloperApplication',
operatingSystem: 'Any (browser-based)',
description:
'Free online Arduino simulator with real AVR8 emulation at 16 MHz. Simulate Arduino code with 48+ interactive electronic components directly in your browser — no install, no account.',
url: 'https://velxio.dev/arduino-simulator',
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
author: { '@type': 'Person', name: 'David Montero Crespo' },
license: 'https://www.gnu.org/licenses/agpl-3.0.html',
},
{
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: FAQ_ITEMS.map(({ q, a }) => ({
'@type': 'Question',
name: q,
acceptedAnswer: { '@type': 'Answer', text: a },
})),
},
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{ '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' },
{ '@type': 'ListItem', position: 2, name: 'Arduino Simulator', item: 'https://velxio.dev/arduino-simulator' },
],
},
];
export const ArduinoSimulatorPage: React.FC = () => {
useSEO({
title: 'Free Online Arduino Simulator — Run Sketches in Your Browser | Velxio',
description:
'A free online Arduino simulator with real AVR8 emulation. Write and simulate Arduino code with LEDs, sensors, and 48+ components — no install, no account, instant results.',
url: 'https://velxio.dev/arduino-simulator',
jsonLd: JSON_LD,
});
return (
<div className="seo-page">
<AppHeader />
<main>
{/* Hero */}
<section className="seo-hero">
<h1>
Free Online Arduino Simulator<br />
<span className="accent">Run Sketches in Your Browser</span>
</h1>
<p className="subtitle">
Write Arduino code and simulate it instantly — real AVR8 emulation at 16 MHz with 48+ interactive
electronic components. No install, no cloud, no account required.
</p>
<div className="seo-cta-group">
<Link to="/editor" className="seo-btn-primary">Open Arduino Simulator →</Link>
<Link to="/examples" className="seo-btn-secondary">Browse Examples</Link>
</div>
<p className="seo-trust">Free &amp; open-source · No signup required · Runs 100% in your browser</p>
</section>
{/* What you can simulate */}
<section className="seo-section">
<h2>What can you simulate?</h2>
<p className="lead">
Velxio simulates Arduino programs with full AVR8 CPU accuracy — including GPIO ports, hardware timers,
USART, ADC, PWM, SPI, and I2C. No approximations, no shortcuts.
</p>
<div className="seo-grid">
<div className="seo-card">
<h3>Arduino Uno &amp; Nano</h3>
<p>Full ATmega328P simulation at 16 MHz. PORTB, PORTC, PORTD register emulation. All 14 digital and 6 analog pins.</p>
</div>
<div className="seo-card">
<h3>Arduino Mega 2560</h3>
<p>ATmega2560 with 256 KB flash, 54 digital pins, 16 analog inputs, and 4 hardware USART channels.</p>
</div>
<div className="seo-card">
<h3>48+ Electronic Components</h3>
<p>LEDs, resistors, buttons, buzzer, servo, ultrasonic sensor, ILI9341 TFT, 16×2 LCD, NeoPixel, DHT22, and more.</p>
</div>
<div className="seo-card">
<h3>Serial Monitor</h3>
<p>Real-time TX/RX with auto baud-rate detection. Send commands and view <code>Serial.print()</code> output live.</p>
</div>
<div className="seo-card">
<h3>Multi-file Sketches</h3>
<p>Write .ino, .h, and .cpp files in a VS Code-style Monaco editor — full multi-file Arduino project support.</p>
</div>
<div className="seo-card">
<h3>Library Manager</h3>
<p>Search and install any library from the full Arduino library index directly inside the simulator.</p>
</div>
</div>
</section>
{/* How it works */}
<section className="seo-section">
<h2>How the simulator works</h2>
<p className="lead">
Velxio uses <strong style={{ color: '#e6edf3' }}>avr8js</strong> — the battle-tested open-source AVR8 emulation
library — to execute your compiled firmware byte-for-byte, exactly as it would run on physical hardware.
</p>
<div className="seo-grid">
<div className="seo-card">
<h3>1. Write</h3>
<p>Write your Arduino sketch in the Monaco editor with C++ syntax highlighting and autocomplete.</p>
</div>
<div className="seo-card">
<h3>2. Compile</h3>
<p>Click Compile. arduino-cli produces a real .hex file — the same output as the Arduino IDE.</p>
</div>
<div className="seo-card">
<h3>3. Simulate</h3>
<p>The .hex is loaded into the AVR8 emulator. Your program executes at 16 MHz and drives the visual components.</p>
</div>
</div>
</section>
{/* FAQ */}
<section className="seo-section">
<h2>Frequently Asked Questions</h2>
<dl className="seo-faq">
{FAQ_ITEMS.map(({ q, a }) => (
<React.Fragment key={q}>
<dt>{q}</dt>
<dd>{a}</dd>
</React.Fragment>
))}
</dl>
</section>
{/* Bottom CTA */}
<div className="seo-bottom">
<h2>Ready to simulate your Arduino?</h2>
<p>Open the editor and start coding in seconds — no setup, no install, no account needed.</p>
<Link to="/editor" className="seo-btn-primary">Launch Arduino Simulator →</Link>
<div className="seo-internal-links">
<Link to="/examples">Example Projects</Link>
<Link to="/docs/intro">Documentation</Link>
<Link to="/arduino-emulator">Arduino Emulator</Link>
<Link to="/atmega328p-simulator">ATmega328P Simulator</Link>
<Link to="/arduino-mega-simulator">Mega 2560 Simulator</Link>
</div>
</div>
</main>
</div>
);
};

190
frontend/src/pages/AtmegaSimulatorPage.tsx Normal file
View File

@ -0,0 +1,190 @@
/**
* /atmega328p-simulator — SEO landing page
* Target keywords: "atmega328p", "atmega", "atmega 328p", "atmega328p arduino"
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { AppHeader } from '../components/layout/AppHeader';
import { useSEO } from '../utils/useSEO';
import './SEOPage.css';
const FAQ_ITEMS = [
{
q: 'What is the ATmega328P?',
a: 'The ATmega328P is an 8-bit AVR microcontroller by Microchip (formerly Atmel). It is the heart of the Arduino Uno and Arduino Nano, running at 16 MHz with 32 KB flash, 2 KB SRAM, and 1 KB EEPROM.',
},
{
q: 'Can I simulate ATmega328P register-level code?',
a: 'Yes. Velxio\'s AVR8 emulation faithfully executes all ATmega328P registers: DDRB/C/D, PORTB/C/D, PINB/C/D, TCCR0/1/2, OCR0/1/2, UBRR, UDR, ADCL/ADCH, and all interrupt vectors — including direct register manipulation without the Arduino abstraction layer.',
},
{
q: 'Does it emulate ATmega328P timers correctly?',
a: 'Timer0 (8-bit), Timer1 (16-bit), and Timer2 (8-bit) are all emulated with full prescaler support, PWM modes, overflow interrupts, and Output Compare Match interrupts. millis(), delay(), analogWrite(), and tone() all work correctly.',
},
{
q: 'Can I use analogRead() and analogWrite() in the simulator?',
a: 'Yes. The 10-bit ADC (analogRead) and PWM output (analogWrite on pins 3, 5, 6, 9, 10, 11) are fully emulated. You can connect simulated sensors, potentiometers, and any wokwi-elements analog component.',
},
{
q: 'Can I simulate USART / Serial on ATmega328P?',
a: 'Yes. USART0 is fully emulated. Serial.begin(), Serial.print(), Serial.println(), and Serial.read() all work. The built-in Serial Monitor shows TX output and lets you send RX data to the running program.',
},
];
const JSON_LD: object[] = [
{
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: 'ATmega328P Simulator — Velxio',
applicationCategory: 'DeveloperApplication',
operatingSystem: 'Any (browser-based)',
description:
'Free browser-based ATmega328P simulator. Full AVR8 emulation at 16 MHz — PORTB, PORTC, PORTD, Timer0/1/2, ADC, USART, PWM — with 48+ interactive components. No install required.',
url: 'https://velxio.dev/atmega328p-simulator',
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
author: { '@type': 'Person', name: 'David Montero Crespo' },
license: 'https://www.gnu.org/licenses/agpl-3.0.html',
},
{
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: FAQ_ITEMS.map(({ q, a }) => ({
'@type': 'Question',
name: q,
acceptedAnswer: { '@type': 'Answer', text: a },
})),
},
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{ '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' },
{ '@type': 'ListItem', position: 2, name: 'ATmega328P Simulator', item: 'https://velxio.dev/atmega328p-simulator' },
],
},
];
export const AtmegaSimulatorPage: React.FC = () => {
useSEO({
title: 'ATmega328P Simulator — Free Browser-Based AVR8 Emulation | Velxio',
description:
'Simulate ATmega328P code in your browser. Full AVR8 emulation at 16 MHz — PORTB, PORTC, PORTD, Timer0/1/2, ADC, USART — with 48+ interactive components. Free & open-source.',
url: 'https://velxio.dev/atmega328p-simulator',
jsonLd: JSON_LD,
});
return (
<div className="seo-page">
<AppHeader />
<main>
{/* Hero */}
<section className="seo-hero">
<h1>
ATmega328P Simulator<br />
<span className="accent">Free AVR8 Emulation in Your Browser</span>
</h1>
<p className="subtitle">
Simulate ATmega328P firmware exactly as it runs on Arduino Uno and Nano — real AVR8 instruction execution at
16 MHz with full GPIO, timer, ADC, and USART emulation. No hardware, no install.
</p>
<div className="seo-cta-group">
<Link to="/editor" className="seo-btn-primary">Open ATmega328P Simulator →</Link>
<Link to="/docs/emulator" className="seo-btn-secondary">Technical Details</Link>
</div>
<p className="seo-trust">Free &amp; open-source · Genuine AVR8 emulation · Runs 100% in your browser</p>
</section>
{/* ATmega328P specs */}
<section className="seo-section">
<h2>ATmega328P specification — fully emulated</h2>
<p className="lead">
Everything about the ATmega328P is emulated: registers, peripherals, interrupts, and timing. Write bare-metal
firmware or use the Arduino core library — both work identically in the simulator.
</p>
<div className="seo-grid">
<div className="seo-card">
<h3>CPU Core</h3>
<p>AVR8 (8-bit RISC), 16 MHz, 135 instructions, 32 general-purpose registers, 2-stage pipeline.</p>
</div>
<div className="seo-card">
<h3>Flash Memory</h3>
<p>32 KB program flash. Upload any sketch compiled by arduino-cli. Supports self-programming via SPM instruction.</p>
</div>
<div className="seo-card">
<h3>GPIO Ports</h3>
<p>PORTB (pins 8–13), PORTC (A0–A5), PORTD (0–7). DDR, PORT, PIN registers all emulated. Interrupt-on-change via PCINT.</p>
</div>
<div className="seo-card">
<h3>Timers 0 / 1 / 2</h3>
<p>8-bit Timer0 &amp; Timer2, 16-bit Timer1. All PWM modes. Prescaler 1–1024. CTC, Fast PWM, Phase-correct PWM.</p>
</div>
<div className="seo-card">
<h3>10-bit ADC</h3>
<p>6 analog input channels (A0–A5). Single conversion and free-running modes. Analog voltage from simulated components.</p>
</div>
<div className="seo-card">
<h3>USART0</h3>
<p>Full duplex serial with configurable baud rate. TX, RX, and UDRE interrupts. Works with the built-in Serial Monitor.</p>
</div>
</div>
</section>
{/* Compatible boards */}
<section className="seo-section">
<h2>ATmega328P boards in Velxio</h2>
<p className="lead">The ATmega328P powers several popular Arduino boards — all selectable in Velxio. The broader AVR8 family also includes ATmega2560 (Mega) and ATtiny85.</p>
<div className="seo-grid">
<div className="seo-card">
<h3>Arduino Uno R3</h3>
<p>The classic board. 14 digital I/O pins (6 PWM), 6 analog inputs, 32 KB flash. The most widely used ATmega328P board.</p>
</div>
<div className="seo-card">
<h3>Arduino Nano</h3>
<p>Same ATmega328P in a compact 45×18mm form factor with mini-USB. Same pin count as Uno.</p>
</div>
<div className="seo-card">
<h3>Arduino Pro Mini</h3>
<p>Bare-bones ATmega328P without USB chip. Available at 3.3 V/8 MHz and 5 V/16 MHz variants.</p>
</div>
<div className="seo-card">
<h3>ATtiny85</h3>
<p>Ultra-compact 8-pin AVR. 8 KB flash, 6 I/O pins (PB0–PB5), USI (Wire), Timer0/1, 10-bit ADC. Ideal for embedded minimal projects.</p>
</div>
<div className="seo-card">
<h3>Arduino Mega 2560</h3>
<p>ATmega2560 with 256 KB flash, 54 digital pins, 16 analog inputs, and 4 hardware USART channels.</p>
</div>
</div>
</section>
{/* FAQ */}
<section className="seo-section">
<h2>Frequently Asked Questions</h2>
<dl className="seo-faq">
{FAQ_ITEMS.map(({ q, a }) => (
<React.Fragment key={q}>
<dt>{q}</dt>
<dd>{a}</dd>
</React.Fragment>
))}
</dl>
</section>
{/* Bottom CTA */}
<div className="seo-bottom">
<h2>Simulate your ATmega328P code now</h2>
<p>Open the editor, paste your sketch, and click Simulate — no setup, no hardware purchase required.</p>
<Link to="/editor" className="seo-btn-primary">Launch ATmega328P Simulator →</Link>
<div className="seo-internal-links">
<Link to="/arduino-simulator">Arduino Simulator</Link>
<Link to="/arduino-emulator">Arduino Emulator</Link>
<Link to="/arduino-mega-simulator">Arduino Mega 2560</Link>
<Link to="/examples">Example Sketches</Link>
<Link to="/docs/emulator">Emulator Architecture</Link>
</div>
</div>
</main>
</div>
);
};

8
frontend/src/pages/EditorPage.tsx
View File

@ -3,6 +3,7 @@
*/ */
import React, { useRef, useState, useCallback, useEffect, lazy, Suspense } from 'react'; import React, { useRef, useState, useCallback, useEffect, lazy, Suspense } from 'react';
import { useSEO } from '../utils/useSEO';
import { CodeEditor } from '../components/editor/CodeEditor'; import { CodeEditor } from '../components/editor/CodeEditor';
import { EditorToolbar } from '../components/editor/EditorToolbar'; import { EditorToolbar } from '../components/editor/EditorToolbar';
import { FileTabs } from '../components/editor/FileTabs'; import { FileTabs } from '../components/editor/FileTabs';
@ -45,6 +46,13 @@ const resizeHandleStyle: React.CSSProperties = {
}; };
export const EditorPage: React.FC = () => { export const EditorPage: React.FC = () => {
useSEO({
title: 'Multi-Board Simulator Editor — Arduino, ESP32, RP2040, RISC-V | Velxio',
description:
'Write, compile and simulate Arduino, ESP32, Raspberry Pi Pico, ESP32-C3, and Raspberry Pi 3 code in your browser. 19 boards, 5 CPU architectures, 48+ components. Free and open-source.',
url: 'https://velxio.dev/editor',
});
const [editorWidthPct, setEditorWidthPct] = useState(45); const [editorWidthPct, setEditorWidthPct] = useState(45);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const resizingRef = useRef(false); const resizingRef = useRef(false);

8
frontend/src/pages/ExamplesPage.tsx
View File

@ -8,6 +8,7 @@ import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { ExamplesGallery } from '../components/examples/ExamplesGallery'; import { ExamplesGallery } from '../components/examples/ExamplesGallery';
import { AppHeader } from '../components/layout/AppHeader'; import { AppHeader } from '../components/layout/AppHeader';
import { useSEO } from '../utils/useSEO';
import { useEditorStore } from '../store/useEditorStore'; import { useEditorStore } from '../store/useEditorStore';
import { useSimulatorStore } from '../store/useSimulatorStore'; import { useSimulatorStore } from '../store/useSimulatorStore';
import { useVfsStore } from '../store/useVfsStore'; import { useVfsStore } from '../store/useVfsStore';
@ -16,6 +17,13 @@ import type { ExampleProject } from '../data/examples';
import type { BoardKind } from '../types/board'; import type { BoardKind } from '../types/board';
export const ExamplesPage: React.FC = () => { export const ExamplesPage: React.FC = () => {
useSEO({
title: 'Arduino Simulator Examples — Run 18+ Sketches Instantly | Velxio',
description:
'Explore 18+ interactive Arduino examples with LEDs, sensors, displays, and games. Runs entirely in your browser — free, no install, no account required.',
url: 'https://velxio.dev/examples',
});
const navigate = useNavigate(); const navigate = useNavigate();
const { setCode } = useEditorStore(); const { setCode } = useEditorStore();
const { setComponents, setWires, setBoardType, activeBoardId, boards, addBoard, removeBoard, setActiveBoardId } = useSimulatorStore(); const { setComponents, setWires, setBoardType, activeBoardId, boards, addBoard, removeBoard, setActiveBoardId } = useSimulatorStore();

9
frontend/src/pages/LandingPage.css
View File

@ -351,6 +351,15 @@
transform: scale(1.02); transform: scale(1.02);
} }
/* Trust line under CTA buttons */
.hero-trust-line {
margin: 6px 0 0;
font-size: 11.5px;
font-weight: 400;
color: #48484a;
letter-spacing: 0.02em;
}
/* Specs strip */ /* Specs strip */
.hero-specs { .hero-specs {
margin: 0; margin: 0;

11
frontend/src/pages/LandingPage.tsx
View File

@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/useAuthStore'; import { useAuthStore } from '../store/useAuthStore';
import { AppHeader } from '../components/layout/AppHeader'; import { AppHeader } from '../components/layout/AppHeader';
import { useSEO } from '../utils/useSEO';
import raspberryPi3Svg from '../assets/Raspberry_Pi_3_illustration.svg'; import raspberryPi3Svg from '../assets/Raspberry_Pi_3_illustration.svg';
import './LandingPage.css'; import './LandingPage.css';
@ -434,6 +435,13 @@ const UserMenu: React.FC = () => {
/* ── Component ────────────────────────────────────────── */ /* ── Component ────────────────────────────────────────── */
export const LandingPage: React.FC = () => { export const LandingPage: React.FC = () => {
useSEO({
title: 'Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V · Raspberry Pi',
description:
'Velxio is a free, open-source multi-board emulator. 19 boards across 5 CPU architectures: Arduino Uno/Mega/ATtiny (AVR8), ESP32/ESP32-S3 (Xtensa QEMU), ESP32-C3/CH32V003 (RISC-V), Raspberry Pi Pico (RP2040), Raspberry Pi 3 (Linux). 48+ components, no cloud.',
url: 'https://velxio.dev/',
});
return ( return (
<div className="landing"> <div className="landing">
<AppHeader /> <AppHeader />
@ -451,13 +459,14 @@ export const LandingPage: React.FC = () => {
<div className="hero-ctas"> <div className="hero-ctas">
<Link to="/editor" className="cta-primary"> <Link to="/editor" className="cta-primary">
<IcoZap /> <IcoZap />
Launch Editor Try Simulator Free →
</Link> </Link>
<a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="cta-secondary"> <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="cta-secondary">
<IcoGitHub /> <IcoGitHub />
View on GitHub View on GitHub
</a> </a>
</div> </div>
<p className="hero-trust-line">No signup required · Runs 100% in your browser · Free &amp; open-source</p>
</div> </div>
<div className="hero-right"> <div className="hero-right">

231
frontend/src/pages/SEOPage.css Normal file
View File

@ -0,0 +1,231 @@
/* ── SEOPage.css — Shared layout for keyword-targeted landing pages ── */
.seo-page {
min-height: 100vh;
background: #0d0d0f;
color: #e6edf3;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ── Hero ─────────────────────────────────────────────── */
.seo-hero {
max-width: 820px;
margin: 0 auto;
padding: 72px 2rem 56px;
text-align: center;
}
.seo-hero h1 {
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
color: #ffffff;
margin: 0 0 1rem;
letter-spacing: -0.5px;
}
.seo-hero h1 .accent {
color: #007acc;
}
.seo-hero .subtitle {
font-size: 1.1rem;
color: #8b949e;
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.65;
}
.seo-cta-group {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* Reuse brand CTA style consistent with LandingPage */
.seo-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 26px;
background: #007acc;
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: 500;
border-radius: 9999px;
transition: filter 0.2s, transform 0.2s;
border: none;
cursor: pointer;
letter-spacing: -0.1px;
}
.seo-btn-primary:hover {
filter: brightness(1.14);
transform: scale(1.02);
}
.seo-btn-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 26px;
background: #2c2c2e;
color: #e6edf3;
text-decoration: none;
font-size: 15px;
font-weight: 500;
border-radius: 9999px;
transition: background 0.2s, transform 0.2s;
border: none;
cursor: pointer;
}
.seo-btn-secondary:hover {
background: #3a3a3c;
transform: scale(1.02);
}
.seo-trust {
font-size: 0.78rem;
color: #484848;
margin-top: 1rem;
letter-spacing: 0.02em;
}
/* ── Section wrapper ──────────────────────────────────── */
.seo-section {
max-width: 820px;
margin: 0 auto;
padding: 48px 2rem;
border-top: 1px solid #1c1c1e;
}
.seo-section h2 {
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.5rem;
letter-spacing: -0.3px;
}
.seo-section .lead {
color: #8b949e;
font-size: 0.95rem;
margin: 0 0 1.75rem;
line-height: 1.6;
}
/* ── Feature grid ─────────────────────────────────────── */
.seo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 12px;
}
.seo-card {
background: #121214;
border: 1px solid #1c1c1e;
border-radius: 10px;
padding: 1.2rem 1.25rem;
}
.seo-card h3 {
font-size: 0.88rem;
font-weight: 600;
color: #007acc;
margin: 0 0 0.35rem;
letter-spacing: -0.1px;
}
.seo-card p {
font-size: 0.83rem;
color: #8b949e;
margin: 0;
line-height: 1.55;
}
/* ── FAQ ──────────────────────────────────────────────── */
.seo-faq {
display: flex;
flex-direction: column;
gap: 0;
}
.seo-faq dt {
font-weight: 600;
color: #e6edf3;
font-size: 0.9rem;
margin: 1.2rem 0 0.25rem;
}
.seo-faq dd {
margin: 0;
color: #8b949e;
font-size: 0.875rem;
line-height: 1.6;
padding-left: 1rem;
border-left: 2px solid #1c1c1e;
}
/* ── Bottom CTA ───────────────────────────────────────── */
.seo-bottom {
text-align: center;
padding: 64px 2rem 72px;
border-top: 1px solid #1c1c1e;
max-width: 600px;
margin: 0 auto;
}
.seo-bottom h2 {
font-size: 1.55rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.75rem;
letter-spacing: -0.3px;
}
.seo-bottom p {
color: #8b949e;
font-size: 0.95rem;
margin: 0 0 2rem;
line-height: 1.6;
}
/* ── Internal links ───────────────────────────────────── */
.seo-internal-links {
display: flex;
gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
font-size: 0.82rem;
}
.seo-internal-links a {
color: #007acc;
text-decoration: none;
transition: color 0.15s;
}
.seo-internal-links a:hover {
color: #3b9ae8;
text-decoration: underline;
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
.seo-hero {
padding: 48px 1.25rem 40px;
}
.seo-section {
padding: 36px 1.25rem;
}
.seo-grid {
grid-template-columns: 1fr;
}
}

88
frontend/src/utils/useSEO.ts Normal file
View File

@ -0,0 +1,88 @@
import { useEffect, useRef } from 'react';
export interface SEOMeta {
title: string;
description: string;
url: string;
ogImage?: string;
/** Module-level constant: injected once on mount, removed on unmount. */
jsonLd?: object | object[];
}
function qs(selector: string): HTMLMetaElement | null {
return document.querySelector(selector) as HTMLMetaElement | null;
}
/**
* Updates document.title, meta description, OG/Twitter tags, and canonical
* to reflect the current page. Restores originals on unmount.
*
* jsonLd (if provided) is injected as a <script type="application/ld+json">
* once on mount and removed on unmount. Pass a module-level constant to avoid
* unnecessary re-injection.
*/
export function useSEO({ title, description, url, ogImage, jsonLd }: SEOMeta) {
const scriptRef = useRef<HTMLScriptElement | null>(null);
useEffect(() => {
const origTitle = document.title;
const descEl = qs('meta[name="description"]');
const ogTitleEl = qs('meta[property="og:title"]');
const ogDescEl = qs('meta[property="og:description"]');
const ogUrlEl = qs('meta[property="og:url"]');
const ogImgEl = qs('meta[property="og:image"]');
const twTitleEl = qs('meta[name="twitter:title"]');
const twDescEl = qs('meta[name="twitter:description"]');
const canonicalEl = document.querySelector('link[rel="canonical"]') as HTMLLinkElement | null;
const get = (el: HTMLMetaElement | null) => el?.getAttribute('content') ?? '';
const set = (el: HTMLMetaElement | null, v: string) => el?.setAttribute('content', v);
const origDesc = get(descEl);
const origOgTitle = get(ogTitleEl);
const origOgDesc = get(ogDescEl);
const origOgUrl = get(ogUrlEl);
const origOgImg = get(ogImgEl);
const origTwTitle = get(twTitleEl);
const origTwDesc = get(twDescEl);
const origCanonical = canonicalEl?.getAttribute('href') ?? '';
// Apply
document.title = title;
set(descEl, description);
set(ogTitleEl, title);
set(ogDescEl, description);
set(ogUrlEl, url);
if (ogImage) set(ogImgEl, ogImage);
set(twTitleEl, title);
set(twDescEl, description);
canonicalEl?.setAttribute('href', url);
// Inject JSON-LD once (module-level constants don't change)
if (jsonLd && !scriptRef.current) {
const script = document.createElement('script');
script.type = 'application/ld+json';
script.setAttribute('data-seo-page', '1');
script.textContent = JSON.stringify(Array.isArray(jsonLd) ? jsonLd : [jsonLd]);
document.head.appendChild(script);
scriptRef.current = script;
}
return () => {
document.title = origTitle;
set(descEl, origDesc);
set(ogTitleEl, origOgTitle);
set(ogDescEl, origOgDesc);
set(ogUrlEl, origOgUrl);
if (ogImage) set(ogImgEl, origOgImg);
set(twTitleEl, origTwTitle);
set(twDescEl, origTwDesc);
canonicalEl?.setAttribute('href', origCanonical);
if (scriptRef.current) {
document.head.removeChild(scriptRef.current);
scriptRef.current = null;
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [title, description, url, ogImage]);
}