Open the editor
Visit b5editor.app to access the b5 online editor. No installation required.The editor works best on desktop browsers. Mobile support is limited.
Create your first program
Open the Playground
The Playground is the main code canvas on the left side. It runs at 60 FPS by default, like the
draw() function in p5.js.Add a block
Double-click on any empty block room (grid cell) to open the block search. Search for “circle” and press Enter to add a circle block.
Add inputs
Double-click the block rooms to the left of the circle to add input blocks:
- Add a number block above the first input (x position)
- Add another number block above the second input (y position)
- Add a third number block above the third input (diameter)
Connect with wires
Click and drag from the output node (bottom) of each number block to the input node (top) of the circle block. The wire shows the data flow.
Add color
Double-click to the left of the circle block (same row) to add a fillPicker block. This is an effect block that sets the fill color for blocks to its right.Click the color picker to choose a color.
Watch it run
Check the Viewer on the right to see your circle! The canvas updates in real-time as you make changes.
Key concepts you just used
Sequential execution
Blocks execute left-to-right, line-by-line, top-to-bottom
Data flow
Wires connect output nodes (bottom) to input nodes (top)
Effect blocks
Some blocks affect others by position, not wires (like fillPicker)
Live coding
Changes appear instantly at 60 FPS
Next steps
Build your first project
Follow a complete tutorial to build a bouncing ball animation
Explore the editor
Learn about the Playground, Factory, and all editor features
Browse examples
Check out example projects with detailed explanations
Block reference
Explore all available blocks and their parameters
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| Double-click | Open block search |
| Click + hold empty space | Pan around canvas |
| Scroll | Zoom in/out |
| Shift + scroll | Scroll horizontally |
| ⌘/Ctrl + S | Save project |
| Escape | Close dialogs |
Need help? Click the link icon at the top-left of the editor to report issues or start a discussion on GitHub.