Introduction to Derivative
Derivative is a visual programming environment designed to make Arduino development accessible, fast, and error-free. Instead of writing syntax-heavy C++ code, you connect logical blocks to define your program's behavior.
Why Visual Programming?
Visual programming abstracts away the complexity of syntax errors (missing semicolons, braces) and allows you to focus purely on the logic of your application. The generated code is still native C++, ensuring zero performance overhead.
- ✓No syntax errors - Blocks ensure valid code structure
- ✓Real Arduino C++ - Generated code compiles natively
- ✓Learn by doing - See how visual logic maps to code
- ✓Web-based upload - No Arduino IDE installation needed
Quick Start
Get started with your first Arduino program in under 5 minutes.
Open the Editor
Navigate to the Editor page. You'll see a canvas with two default blocks: Setup and Loop.
Loop runs repeatedly forever.
Add Your First Block
Press Space or right-click the canvas to open the block menu. Search for "LED Write" and add it to the canvas.
Click the block to set the pin number (e.g., 13 for built-in LED) and state (HIGH to turn on).
Connect & Upload
Drag from the Setup block's output handle to the LED Write block's input handle to create a connection.
Click Upload to Board in the right panel, select your Arduino, and click Upload. Your LED should turn on!
Interface Overview
Left Panel
Browse and search all available blocks by category. Drag blocks onto the canvas to add them to your program.
Center Canvas
Your visual workspace. Drag blocks, create connections, pan/zoom the view, and use keyboard shortcuts for efficiency.
Right Panel
View generated Arduino code in real-time. Connect your board via WebSerial and upload directly from your browser.
Blocks & Categories
Derivative organizes blocks into 8 color-coded categories to help you find what you need quickly.
Setup & Config
Pin modes, serial initialization, and Arduino configuration blocks.
LED & Lights
Digital write, PWM control, and LED manipulation blocks.
Sensors
Read analog/digital inputs, buttons, and sensor values.
Logic & Decisions
If/else conditions, comparisons, and boolean operations.
Math & Calculate
Arithmetic operations, constants, and mathematical functions.
Time & Delays
Delay functions, millis() timer, and time-based operations.
Remember Values
Variables for storing and retrieving data during execution.
Show Messages
Serial print, println, and debug output blocks.
Making Connections
Blocks communicate through three types of handles (connection points):
Input/Output Handles (Blue)
Control program flow. Drag from an output (right side) to an input (left side) to determine execution order.
Value Handles (Green)
Pass data between blocks. Connect sensor readings to variables, variables to comparisons, or constants to outputs.
Condition Handles (Purple)
Special handles for conditional logic. Used by if/else blocks to evaluate boolean expressions.
Pro Tip
Hover over any handle to see what type of connection it accepts. Incompatible handles won't connect, preventing logical errors.
Setup & Loop Blocks
Every Arduino program has two essential parts, represented by the two default blocks on your canvas:
Setup Block
Runs once when your Arduino powers on or resets.
Use this for initialization tasks:
- • Set pin modes (INPUT/OUTPUT)
- • Initialize serial communication
- • Set initial variable values
- • Configure hardware settings
Loop Block
Runs continuously after setup() completes.
Use this for your main program logic:
- • Read sensor values
- • Control LEDs and outputs
- • Make decisions based on conditions
- • Repeat actions continuously
Important Notes
- ℹThese blocks cannot be deleted - they're required for every Arduino program
- ℹConnect other blocks to Setup/Loop to define when they execute
- ℹLoop runs thousands of times per second - use delays to slow down if needed
Code Generation
Derivative automatically converts your visual blocks into production-ready Arduino C++ code. The generated code is:
Compiles directly to Arduino bytecode
No performance overhead
Learn C++ by seeing output
How It Works
- 1.Derivative analyzes your block connections to understand program flow
- 2.Each block maps to a specific C++ code template with your parameters
- 3.Variables are declared at the top, setup() and loop() functions are generated
- 4.Code is validated and displayed in the right panel for review
- 5.Upload via WebSerial to compile and flash your Arduino board
Learning Resource
Compare your visual blocks with the generated code to learn Arduino C++ syntax. This is a great way to transition from visual to text-based programming!
Project Management
Save, load, and share your Derivative projects with built-in project management tools.
💾 Save Project
Click the folder icon in the bottom-left toolbar and select Save Project. Enter a name and your project is stored in browser localStorage with all blocks, connections, and settings.
📂 Load Project
Select Load Project to see a list of all saved projects. Click any project to restore it to the canvas. You'll see the project name, block count, and last modified date.
📤 Export Project
Download your project as a JSON file to share with others or back up outside the browser. Perfect for collaboration and version control.
📥 Import Project
Upload a previously exported JSON file to restore a project. Great for opening projects shared by others or restoring backups.
🗑️ Delete Project
Remove unwanted projects from your saved list. A confirmation dialog prevents accidental deletions.
Keyboard Shortcuts
Speed up your workflow with these keyboard shortcuts:
Open block search menu
Remove selected block
Copy selected block
Paste copied block
Undo last action
Redo undone action
Fit all blocks in view
Open block menu at cursor
Note: On macOS, use Cmd instead of Ctrl.
Block Comments
Add optional comments to any block to document your program logic or leave notes for yourself.
How to Add Comments
- 1.Click any block to open the parameter editor
- 2.Scroll down to the "Comment (Optional)" textarea
- 3.Type your comment or note
- 4.Click Save - the comment appears as a small blue badge on the block
Use Cases for Comments
- • Learning: Explain what each block does in your own words
- • Documentation: Add notes for future reference or collaborators
- • Debugging: Mark blocks that need attention or testing
- • Planning: Leave TODO notes for incomplete features
Block Categories Reference
Quick reference for all available block categories. For detailed block documentation, see the Community page.
Setup & Config
Pin Mode, Serial Begin, Setup Block, Loop Block
LED & Lights
Digital Write, Analog Write (PWM), LED Control
Sensors
Analog Read, Digital Read, Button Input
Logic & Decisions
If/Else, Compare, Boolean AND/OR/NOT
Math & Calculate
Add, Subtract, Multiply, Divide, Constants
Time & Delays
Delay, Delay Microseconds, Millis, Micros
Remember Values
Set Variable, Get Variable, Number Storage
Show Messages
Serial Print, Serial Println, Debug Output
Ready to Start Building?
Jump into the editor or explore example projects to get started.