Skip to main content
b5 Logo

​
Build creative coding projects with blocks and wires

b5 is a visual programming language for graphics, fast prototyping, and creative coding. Using blocks and wires instead of lines of code, you can quickly build and share visual projects with an online editor featuring live coding and embedded documentation. Inspired by p5.js, b5 makes programming more graphical, friendlier, and instantly responsive.

Quick start

Get started with b5 in under 5 minutes

First project

Build your first visual program step-by-step

Try the editor

Open the live b5 editor and start creating

Watch demo

See b5 in action with a video walkthrough

​
What makes b5 unique

​
Visual programming that makes sense

Unlike most node-based visual programming languages, b5 uses a grid system where sequence matters. The editor executes blocks from left to right, and line by line from top to bottom - just like reading text. This makes your visual code intuitive and predictable.

​
Live coding at 60 FPS

The main code canvas in the Playground runs 60 times per second by default, just like the draw function in p5.js. You see real-time changes to your canvas without restarting the sketch.

​
Embedded documentation

No need to search external docs. Simply hover your cursor over blocks, nodes, or input boxes to see explanations right in the editor.

​
Custom blocks with Factory

Instead of only using predefined blocks, you can design your own customized blocks in the Factory section, including:
  • Variables - Like the setup function in p5.js, run once before Playground starts
  • Functions - Define reusable logic blocks that execute when placed in Playground
  • Objects - Work in progress for more complex data structures

​
Key features

Effect blocks

Blocks like fill and stroke affect other blocks through their contextual relationships, making the drawing context visible through background grid highlighting

Block search

Double-click any empty block room to search for blocks by name, type, or description

Save and continue

Save your progress as a JSON file (⌘/ctrl + S) and drag it back into the editor to continue later

Example library

Load random example files with detailed comments to learn and get inspired

​
How b5 works

b5 Components Your code is based on three core elements:
  • Blocks - Represent functionality (like functions or operations)
  • Nodes - Handle input and output for each block
  • Wires - Connect blocks to create data flow from top to bottom
Data flows from outputs (top of blocks) to inputs (bottom of blocks) via wires. One output can feed data to multiple inputs, while each input can only have one data source.
When an effect block is selected, the background grid cells change color to reflect its effective range - unlike text-based languages where the drawing context remains hidden.

​
Ready to start?

The interface is designed to make coding easier, friendlier, and more graphical. Whether you’re a beginner, artist, or visual learner, b5 helps you get hands-on with creative programming quickly.

Follow the quick start guide

Learn the basics and create your first visual program

​
Research and citation

b5 is research-backed and was published at CHI 2023:
Peiling Jiang. 2023. Positional Control in Node-Based Programming. In Extended Abstracts of the 2023 CHI Conference on Human Factors in Computing Systems (CHI EA ‘23), April 23–28, 2023, Hamburg, Germany. ACM, New York, NY, USA, 7 pages. https://doi.org/10.1145/3544549.3585878