Derivative documentation
Derivative is a visual programming environment for Arduino. You drag blocks onto a canvas, wire them together, and the editor generates real Arduino C++ that you can upload straight to your board. No syntax errors, no missing semicolons — just logic.
What ships today
- ✓Programming blocks — Control, Logic, Math, Variables, Hardware Pins, Serial Output
- ✓Component blocks — Sensors, Motion, GPS, Displays, Motors — with their Arduino libraries auto-included
- ✓Real C++ output — generated code compiles on the standard Arduino toolchain with zero overhead
- ✓Free trial — anyone can poke around at /trial without signing up
- ✓Full account unlocks Arduino upload, saved projects, and live collaboration
- ✓Web Serial upload — no Arduino IDE install required (Chrome / Edge / Opera)
Trial vs. full account
Derivative has two surfaces: the public trial sandbox at /trial and the full editor at /editor. Anonymous visitors are automatically redirected to /trial. Once you have an account, you go straight to /editor.
Trial sandbox
Same canvas, same blocks, no account needed.
- ✓ Drag and wire every block
- ✓ Preview generated Arduino code
- ✗ Generate code only twice per browser
- ✗ No Arduino upload (Web Serial disabled)
- ✗ No project save / load
- ✗ No live collaboration
When you hit the generate limit, a request-access form pops up; an admin reaches out to set you up with a real account.
Full account
Sign in at /login to unlock the full editor.
- ✓ Unlimited code generation
- ✓ Upload sketches to a real Arduino via Web Serial
- ✓ Save and load projects on the backend
- ✓ Live multi-user collaboration on a project
- ✓ Serial monitor for reading device output
Quick start
From blank canvas to blinking LED in under three minutes.
Add a Pin Mode block
13 and Mode to OUTPUT. Wire it under the Setup anchor — Pin Mode is setup-only and will turn red if dropped in Loop.Add a Digital Write and a Delay
13, state HIGH), then Control → Delay (1000 ms), then a second Digital Write set to LOW, then another Delay. Wire them under the Loop anchor in that order.Generate the code
setup() and loop().Upload (full account only)
Interface tour
Left — Block palette
Every available block, grouped by category. Click a header to collapse a group. Type in the search box to filter across categories. Clicking a block drops it on the canvas near your last click position (or near the average of existing nodes).
Center — Canvas
The graph editor. Drag blocks to position them, wire handles to connect blocks, scroll to pan, ⌘/Ctrl-scroll to zoom. Grab any wire and drag it to re-route — wires behave like flexible cables. Double-click a wire to reset its routing.
Right — Project panel
Three tabs in the full editor: Profile, Projects, Upload & Code. Trial mode replaces this with a stripped-down sandbox panel showing only the generate-code button and code preview.
Top toolbar
The toolbar floats above the canvas. From left to right (full editor): project picker, collaboration status, tool toggle (select / hand), theme toggle, clear canvas, and the right-panel toggle. The trial view replaces the project picker with a "Trial sandbox" chip and adds "Login" + "Get full access" buttons.
Block categories
Blocks are grouped by what they do. The core programming categories cover logic and flow; the component categories (Sensors, Motion, GPS, Displays, Motors) wrap real hardware and auto-add the libraries they need. Each category has its own header color so blocks group visually on the canvas.
Root
Setup, Loop
The two anchor blocks every sketch starts with. Can't be deleted, can't be duplicated, only emit flow output.
Control
Delay, Break, Continue
Flow control: wait for a duration, exit a loop body, skip to the next iteration.
Logic
While, For, If, If/Else, AND, OR, NOT
Loops and branching. AND / OR / NOT are pure boolean operators; If / While take a condition input.
Variables
Create Variable, Set Variable, Get Variable
Declare globals with a type and initial value, assign new values, read existing values anywhere.
Math
Compare, Math
Two-operand comparison (==, !=, <, >, <=, >=) and arithmetic (+, -, *, /, %).
Hardware Pins
Pin Mode, Digital Write, Digital Read, Analog Read, Analog Write
Low-level pin control. Pin Mode is setup-only; Read blocks emit expressions, Write blocks live in the flow chain. Analog Write is PWM (0–255).
Serial Output
Serial Begin, Serial Print
Console output for debugging. Serial Begin is setup-only; Serial Print writes a value with an optional label.
Sensors
Ultrasonic (HC-SR04), DHT temp/humidity
Read the physical world. Ultrasonic stores a distance you can wire; DHT exposes temperature + humidity outputs.
Motion
MPU Init / Read / Accel / Gyro / Temp / Calibrate
MPU6050 accelerometer + gyroscope. Init in setup, Read in loop, then wire the per-axis getters.
GPS
GPS Init / Read / Latitude / Longitude / Speed / Satellites / Date-Time
NEO-6M/8M location module over SoftwareSerial. Init in setup, Read first in loop, then read the value getters.
Displays
LCD (16x2 I2C) + OLED (SSD1306) init / draw / print
Screens. LCD prints text/values to a cell; OLED draws text and shapes to a buffer you push with OLED Show.
Motors
Servo, Servo Detach
Drive a servo to an angle (0–180°), or detach it to release torque.
Libraries are automatic
Component blocks that need an Arduino library (DHT, the LCD, the OLED, GPS, MPU6050, Servo) add the right #include, the global object, and its setup call for you — just by being on the canvas. Drop two of the same block and the include still appears once. Nothing to install by hand.
Wires & connections
Blocks have three handle kinds, each color-coded. Wires only carry one kind of data, and the editor refuses connections that would mix the wrong types.
Flow (blue)
Execution order. Drag from a block's bottom output to the next block's top input — that's how Setup says 'run this, then this, then this'. Flow wires are the only ones that define a chain of actions; everything else just carries data.
Value (green)
A number, string, or expression flowing into a block parameter. Examples: Digital Read's output, Create Variable's output, Math's output. You can wire green into a green socket OR a purple socket — see below.
Condition (purple)
A boolean expression for branching: Compare's output, AND/OR/NOT's output, Digital Read used as a true/false test. Condition wires also feed into green sockets.
Green and purple interconnect freely
In C++ any number is truthy / falsy and any boolean is just 0 or 1, so Derivative lets you wire a value into a condition socket (and vice versa) without an explicit converter. Flow stays separate — a blue wire never connects to green or purple.
Reshaping wires
Grab anywhere on a wire and drag — it'll re-route to follow the cursor like a flexible cable. Double-click the wire to clear that routing and return to the default Bézier curve.
Setup & Loop anchors
Setup
Runs once when the board powers on. Typical contents:
- • Pin Mode (configure each pin direction)
- • Serial Begin (start the console for debugging)
- • Initial Set Variable assignments
Loop
Runs continuously after Setup completes. Typical contents:
- • Reading pins and sampling sensors
- • If / While conditional logic
- • Driving outputs (Digital Write, Serial Print)
- • Delay / non-blocking timing
Placement rules
- • Pin Mode and Serial Begin are setup-only. The editor flags them red if they end up under Loop.
- • Break and Continue only make sense inside a While or For body. Placed elsewhere, they turn red.
- • Anchors can't be deleted. The Clear Canvas action (trash icon) wipes everything except Setup and Loop.
Editing parameters
Every block exposes its parameters as little chips on the block face. Interaction is consistent everywhere:
Single click
Opens the parameter editor modal. Use this for free-form values (numbers, identifiers, expressions) and for select fields with many options.
Double click (binary params only)
Booleans and two-option select fields (HIGH/LOW, ms/sec) flip in place on double-click — no modal needed. Useful for rapid toggling.
Wired inputs hide their fallback
Several blocks (If, While, Set Variable, Compare, Math) expose both a wire input and a text-fallback parameter for the same value. When you wire something into the input, the fallback row disappears from the block face — the wired value is the only one being used in the generated code. Pull the wire and the fallback chip comes back.
Variables
Variables are global to the sketch. Declaration, assignment, and reads live in three separate blocks so the canvas reads like the program flow.
Create Variable
Sits off the flow chain — it represents a declaration, not an action. Set the Name, pick a Type (int, long, float, bool, byte, char, String), set an Initial value. Emits a global at the top of the sketch like int counter = 0;. Wire the green output anywhere a value is expected.
Names that match C++ / Arduino keywords (int, HIGH, setup, A0, …) are rejected with a red error badge.
Set Variable
Flow block. Takes a Var (either typed or wired from Create Variable's output) and a Value, plus an op selector for =, +=, -=, *=, /=. Emits counter += 1;.
Get Variable
Pure value source. Type a name, plug the green output into a Comparator, Math block, Set Variable's value, or Serial Print. Use this when wiring from Create Variable across the canvas would be unwieldy.
Code generation
The generated code is real Arduino C++. The same sketch you'd write by hand.
Pipeline
- 1.Declaration pass — every node on the canvas gets a chance to register globals and includes, regardless of whether it's wired into the flow. Create Variable emits its declaration here.
- 2.Setup walk — the editor follows flow wires from the Setup anchor, emitting each block's code in order.
- 3.Loop walk — same, from the Loop anchor.
- 4.Value resolution — whenever a block needs a value input, the editor walks back through green/purple wires and substitutes the source expression. Cycles in the value graph (e.g. AND wired into itself) are caught and reported.
- 5.Format — includes first, globals next, then
void setup() { … }, thenvoid loop() { … }.
Side-by-side learning
The right panel re-generates whenever you click Generate code. Build a sketch visually, glance at the C++, build the next sketch — you'll pick up Arduino syntax without trying.
Saving & loading projects
Projects are stored server-side and tied to your account. The right panel's Projects tab is your home base.
Saving
Use the project picker in the top toolbar to name and save the current canvas. After the first save, auto-save runs in the background — your graph is captured server-side so collaborators see the same thing.
Loading
Pick any project from the dropdown to swap canvases. The URL updates to /editor?project=<id>so the link is shareable.
Visibility
Each project is private by default. Toggle it public to publish it to the community page, where others can view, like, and comment.
Export / import (offline backup)
The editor also lets you export the canvas to a portable .cad file and re-import it later. Useful for archives and for moving work between accounts.
Live collaboration
Open a saved project and the Collaborate tab in the right panel lights up. Invite a teammate and you'll see each other's cursors and edits on the canvas in real time.
How it works
The editor opens a WebSocket session per project. Every node drag, parameter change, and wire change is broadcast to other connected users. Cursors carry a deterministic per-user color so it's clear who's editing what.
Invites
Generate an invite link from the Collaborate tab. The link contains a one-time token; the recipient lands directly in the project and fetches the host's current canvas before their own auto-save kicks in.
Trial users
Collaboration is fully disabled in the trial sandbox. No WebSocket connection is opened at all — the trial page doesn't even import the collaboration hook.
Uploading to Arduino
The full editor flashes a real board straight from the browser using Web Serial. No Arduino IDE install, no extra driver beyond what the OS already provides.
Supported boards
Arduino Uno, Nano, Mega, Leonardo, ESP32, ESP8266. The board picker maps each to the right fqbn (e.g. arduino:avr:uno).
Pipeline
- Click Upload to Arduino
- Pick the serial port from the browser prompt
- The server compiles the generated sketch
- The compiled hex is streamed to the board via Web Serial
Browser requirements
Web Serial only works in Chromium-based browsers — Chrome, Edge, Opera, Brave. Firefox and Safari can build and preview code but can't upload.
Serial monitor
After upload, open the Serial Monitor in the right panel to watch Serial.print output from the board live. Pick the baud rate that matches your Serial Begin block.
Keyboard shortcuts
Every block
Generated from the current registrations in lib/blocks/index.ts. If you don't see a block here, it isn't shipped yet.
Root
Setup
Anchor block. Runs once. Flow output only — connect your initialization chain here.
Loop
Anchor block. Runs continuously after Setup. Flow output only.
Control
Delay
delay(ms). Pauses execution. Pick milliseconds or seconds via the Unit select.
Break
Exits the nearest enclosing While / For loop. Only valid inside a loop body.
Continue
Skips to the next iteration of the enclosing loop. Only valid inside a loop body.
Logic
While
while (cond) { … }. Condition can be wired into the purple input or typed as a fallback expression. Body chain off the bottom-left; flow continues off bottom-right.
For
for (int i = from; i < to; i += step). Counter name, From, To, Step are all params. Negative steps automatically use > for termination.
If
if (cond) { … }. Single Then body; flow continues from Next.
If / Else
if (cond) { … } else { … }. Two body chains plus the Next continuation.
AND
(a) && (b). Two condition inputs, one condition output. Unwired inputs default to true (identity element for AND).
OR
(a) || (b). Unwired inputs default to false.
NOT
!(value). One condition input, one condition output.
Variables
Create Variable
Declares a global at the top of the sketch. Name + Type (int/long/float/bool/byte/char/String) + Initial value. Sits off the flow chain. Output emits the variable name.
Set Variable
Assignment in the flow chain. Var (typed or wired), Op (=/+=/-=/*=//=), Value (typed or wired).
Get Variable
Pure value source. Returns the typed-in name. Wire it anywhere a value is expected.
Math
Compare
Two-operand comparison with an op chip in the middle (==, !=, <, >, <=, >=). Two value inputs, one condition output.
Math
Two-operand arithmetic (+, -, *, /, %). Two value inputs, one value output. Division / modulo by literal 0 flags the node red at codegen time.
Hardware Pins
Pin Mode
pinMode(pin, mode). Mode is OUTPUT / INPUT / INPUT_PULLUP. Setup-only — flagged red if it ends up under Loop.
Digital Write
digitalWrite(pin, state). State is HIGH or LOW. Pin and state are typed in the params (no wired inputs).
Digital Read
digitalRead(pin). Pure value/condition producer; one green output that also plugs into purple sockets (If's When, AND's A/B, etc.).
Analog Read
analogRead(pin). Returns 0..1023. Pure value producer — wire into Compare, Math, or Set Variable.
Analog Write
analogWrite(pin, value). PWM 0–255 (clamped). For LED brightness, motor speed. Use a PWM pin (3, 5, 6, 9, 10, 11 on an Uno).
Serial Output
Serial Begin
Serial.begin(baud). Setup-only. Required before any Serial Print.
Serial Print
Serial.print / Serial.println of a label + value. Use the boolean newline param to toggle between print and println.
Sensors
Ultrasonic
HC-SR04. Flow block: pulses trig + measures echo into a float variable each pass. Wire the green output (distance) anywhere. Trig/Echo pins, cm/inch unit, and timeout are params.
DHT Temp/Humidity
DHT11/DHT22. Two value outputs — temperature and humidity. Auto-adds DHT.h + the sensor object. Read no faster than every 500ms or it returns NaN.
Motion
MPU Init
Sets up an MPU6050 over I2C (address, accel + gyro ranges). Place in Setup. Auto-adds MPU6050.h + Wire.h.
MPU Read
Samples all six axes into shared variables. Place first in the loop, before any MPU getter.
MPU Accel / Gyro
Per-axis (X/Y/Z) acceleration or angular rate. Raw int16, or converted (g / °per-sec) at the default ±2g / ±250°/s ranges.
MPU Temp
On-chip temperature in °C (the sensor die, not ambient air).
MPU Calibrate
Calibrates offsets. Place in Setup, keep the sensor flat and still while it runs.
GPS
GPS Init
NEO-6M/8M over SoftwareSerial (RX/TX pins, baud). Place in Setup. Auto-adds TinyGPSPlus.h + SoftwareSerial.h.
GPS Read
Feeds incoming bytes into the parser. Place FIRST in the loop, before any GPS getter.
GPS Latitude / Longitude
Current position in degrees (double). Needs a fix — first fix needs open sky and can take 30–60s.
GPS Speed / Satellites / Date-Time
Speed (kmph/mph/knots), satellite count, or a single date/time field (UTC). Value producers.
Displays
LCD Init
16x2 I2C LCD (address, columns, rows). Place in Setup. Auto-adds LiquidCrystal_I2C.h + init() + backlight().
LCD Print / Clear / Backlight
Print text or a wired value at a column/row (optionally clear first), wipe the screen, or toggle the backlight.
OLED Init
SSD1306 I2C OLED (address, 128x64 or 128x32). Place in Setup. Auto-adds Adafruit GFX + SSD1306.
OLED Print / Line / Rectangle / Circle / Clear
Draw text or shapes into the buffer (position, size, White/Black/Inverse color, fill toggle).
OLED Show
Pushes the buffer to the screen. Nothing appears until this runs — call it after your drawing blocks.
Motors
Servo
servo.write(angle), 0–180°. Auto-adds Servo.h + the servo object + attach() in setup. Angle accepts a wire (e.g. from Math/Map) or a number. Use a PWM pin.
Servo Detach
servo.detach() — releases the servo so it stops holding position and drawing torque. Same Servo name as the Servo block.
Ready to build something?
Open the trial sandbox to poke around, or sign in to your account for the full editor.