Arduino Visual Block Coder

A browser-based, Blockly-powered visual programming editor that lets you build Arduino sketches by dragging and dropping blocks — no typing required. The editor generates readable Arduino C++ code in real time, and can optionally compile and upload that code straight to a connected board through a small local Node.js server and arduino-cli.

It also includes a standalone browser-based serial monitor (built on the Web Serial API) for talking to your board without any extra software.

Available in both Japanese (index.html) and English (index.en.html) — see Language versions below.

Features

• Drag-and-drop block editor for Arduino, built on Google Blockly.
• Live Arduino/C++ code generation shown side-by-side with the block workspace.
• Block categories covering:
  • Control flow (setup/loop, delays, if/while, repeat loops)
  • Digital & analog pin I/O
  • Logic and comparison operators
  • Math (arithmetic, trig, random numbers, division)
  • Typed variables (generic, int, float) and strings
  • Generic hardware helpers: servo motors, HC-SR04 ultrasonic sensors, character LCDs (LiquidCrystal), 7-segment displays, and tone()/noTone()
  • Serial communication (begin/print/println/read)
  • Escape hatches for custom raw code, strings, numbers, and functions
• Workspace persistence in the URL — your blocks are compressed with pako and stored in the page's query string, so a link to the page is a link to your program. Use the Save button to copy that link.
• Export options — copy the generated code, download it as an .ino file, or print a snapshot of the block workspace (via html2canvas).
• One-click transfer to hardware — the optional local server compiles and uploads the generated sketch with arduino-cli.
• Built-in serial monitor — connect, send commands (with a small history), view incoming data, and export a log to a text file.

Repository layout

.
├── index.html            # Main block editor (Japanese UI)
├── index.en.html         # Main block editor (English UI)
├── index2.html           # Serial monitor (Japanese UI)
├── index2.en.html        # Serial monitor (English UI)
├── ja.js                 # Blockly's official Japanese message file
├── blockly.min.js        # Blockly core library (bundled, Apache-2.0)
├── pako.min.js           # zlib compression library (bundled)
├── html2canvas.min.js    # Workspace-to-image export library (bundled)
├── server.js             # Optional local server: save + compile + upload
├── package.json          # npm metadata / dependencies for server.js
├── go-web.bat            # Windows convenience launcher for server.js
├── data/                 # Icons and cursor assets used by the editor
├── index/                # Generated Arduino sketch folder (build output)
├── index.txt             # Last generated code, used by server.js
├── LICENSE               # MIT license for this project's original code
└── THIRD_PARTY_NOTICES.md# Licenses of bundled third-party libraries

Language versions

Purpose	Japanese	English
Block editor	index.html	index.en.html
Serial monitor	index2.html	index2.en.html

The two versions are functionally identical; only the on-screen block labels, buttons, and status messages differ. The Japanese build loads Blockly's official ja.js locale file; the English build relies on Blockly's built-in English strings and does not load ja.js.

Opening the Serial Monitor button inside index.html opens index2.html in a modal <iframe>; the same button inside index.en.html opens index2.en.html, keeping each language variant self-contained.

Getting started

Option A — Just the block editor (no install required)

Since the editor is a static web page, you can use it with nothing more than a browser:

1. Download or clone this repository.
2. Open index.en.html (or index.html for Japanese) directly in a modern desktop browser (Chrome or Edge recommended, for full Web Serial API support).
3. Drag blocks from the toolbox on the left into the workspace to build your program. The generated Arduino code appears on the right in real time.
4. Use Save to copy a shareable link, Download to save an .ino file, Print to snapshot the workspace, or Serial Monitor to open the built-in serial console.

In this mode, the Transfer button (which needs the local server) and arduino-cli are not required — you can always copy the generated code into the Arduino IDE yourself and upload it from there.

Option B — Full setup with one-click upload to a board

To use the Transfer button and upload straight from the browser, you'll need Node.js and the Arduino CLI installed locally.

Prerequisites

• Node.js 16 or newer
• arduino-cli, installed and available on your system PATH, with the core for your board installed (e.g. arduino-cli core install arduino:avr for an Uno/Nano/Mega)
• An Arduino board connected over USB

Install and run

# 1. Install dependencies
npm install

# 2. Start the local server
npm start
# (equivalent to: node server.js)

By default the server listens on http://localhost:3000 and serves the editor's static files (including both language versions) from the project root.

On Windows, double-clicking go-web.bat does the same thing (after running npm install once) with a small startup animation.

Configuring your board and serial port

server.js defaults to an Arduino Uno (arduino:avr:uno) on COM5. Override these with environment variables instead of editing the file:

# macOS/Linux example
ARDUINO_FQBN=arduino:avr:uno ARDUINO_PORT=/dev/ttyUSB0 npm start

# Windows (PowerShell) example
$env:ARDUINO_FQBN="arduino:avr:uno"; $env:ARDUINO_PORT="COM7"; npm start

You can also change the server's own HTTP port with the PORT environment variable (default 3000).

Once the server is running, open http://localhost:3000/index.en.html (or index.html) in your browser. Building blocks and clicking Transfer will:

1. POST the generated code to /save, which writes it to index.txt.
2. POST to /upload, which copies index.txt into index/index.ino and runs arduino-cli compile followed by arduino-cli upload against the board and port you configured.

If compilation or upload fails, the error output from arduino-cli is shown in an alert so you can diagnose wiring, board selection, or port issues.

Serial Monitor

Whether or not you run the local server, index2.html / index2.en.html work as a standalone serial monitor using the Web Serial API:

1. Click Serial Monitor (or open the file directly).
2. Choose a baud rate and click Connect, then pick your board's serial port from the browser's permission prompt.
3. Type a command and press Enter to send it (recent commands are kept in a short history you can click to resend).
4. Incoming lines are shown in the output area; use Clear to reset it, the copy icon to copy it to the clipboard, or Export to save it as a .txt file.

The Web Serial API requires a Chromium-based browser (Chrome, Edge, Opera, etc.) served over http://localhost or https://; it is not available in Firefox or Safari at the time of writing.

How code generation works

Each block's init() defines its shape and on-screen labels; a set of generateCodeForBlock() / generateValueCode() functions in index.html / index.en.html walk the block tree and emit the matching Arduino C++ statements and expressions. Blocks that need setup code (such as attaching a Servo, or initializing a LiquidCrystal display) register the required #includes, global objects, and setup() statements automatically the first time they're used, so you don't have to manage boilerplate yourself.

The full program structure follows the usual Arduino convention: any global variables and objects are emitted first, followed by void setup() { ... } and void loop() { ... }, built from the blocks nested inside the corresponding Setup and Loop blocks.

Compatibility notes

• Tested against boards supported by arduino-cli's AVR core (Uno, Nano, Mega, etc.); other cores should work as long as you set the correct ARDUINO_FQBN.
• The block editor itself works in any modern browser; only the Transfer feature and the Serial Monitor require Chromium-based browsers (for the Web Serial API) and, for Transfer, a local arduino-cli installation.
• The generated .ino files use standard Arduino APIs (pinMode, digitalWrite, Servo, LiquidCrystal, Serial, etc.), so they can also be opened and uploaded from the regular Arduino IDE.

Contributing

Issues and pull requests are welcome. If you add a new block type, please add both the block definition and its corresponding code generation logic (in both the Japanese and English editor files) so the two language versions stay in sync.

License

The original code in this repository (the block editor's application logic, custom Blockly block definitions, code generator, serial monitor, and Node.js server) is licensed under the MIT License — see LICENSE.

This project bundles Google's Blockly library, which is licensed under the Apache License 2.0, along with a couple of smaller MIT/Zlib licensed helper libraries (pako, html2canvas). Bundling these libraries does not change their own license terms. See THIRD_PARTY_NOTICES.md for full details and attribution.

Acknowledgments

• Blockly by Google LLC
• pako
• html2canvas
• The Arduino project and arduino-cli

Author

ek15072809