Skip to main content
Navigating the b5 editor efficiently is key to a smooth coding experience. This guide covers all mouse, keyboard, and scroll controls for moving around the code canvas, managing blocks, and controlling the interface.

​
Mouse Controls

Mouse interactions vary depending on what you’re clicking on:

​
Canvas Panning

Click and hold on any empty block room, then drag to pan around the code canvas.
1

Find Empty Space

Click on an empty block room (not on a block, wire, or node).
2

Drag to Pan

Hold the mouse button and drag. The cursor changes to a grabbing hand.
3

Release

Release the mouse button to stop panning. The canvas position is saved automatically.
The canvas position is constrained to keep at least half the canvas visible at all times.

​
Block Interaction

Left click on blocks, nodes, and wires to interact with them:
Click a block to select it. Selected blocks show:
  • Highlighted appearance
  • Effect range visualization (for effect blocks)
  • Available connection points

​
Double Click

Double-click on an empty block room to open block search:
  • Search interface appears immediately
  • Input field is automatically focused
  • Search at the exact position you clicked
See Block Search for complete details.

​
Right Click

Right-click is currently prevented on the code canvas to avoid context menu interference.
Right-click functionality may be added in future versions for additional controls.

​
Zoom Controls

The code canvas supports smooth zooming from 0.5x to 2x magnification:

​
Scroll to Zoom

Scroll on the code canvas to zoom in and out:
Scroll up (or pinch out on trackpad)
  • Increases magnification
  • Maximum: 2x (200%)
  • Smooth interpolation
  • Center point stays fixed
{
  zoomFactor: 0.0006,     // Scroll sensitivity
  minZoom: 0.5,           // 50% minimum
  maxZoom: 2.0,           // 200% maximum
  throttle: 50            // ms delay to reduce re-renders
}

​
Zoom Behavior

The zoom system includes several optimizations:
  • Throttling: Zoom updates are throttled to 50ms to prevent excessive re-rendering
  • Rounding: Zoom levels are rounded to 2 decimal places for consistency
  • Constraints: Zoom is automatically clamped to the 0.5x - 2x range
  • Transform: Uses CSS scale() for smooth, GPU-accelerated zooming
The canvas width and height are automatically adjusted based on zoom level to maintain the correct interactive area.

​
Scroll Controls

Hold modifier keys while scrolling to navigate instead of zoom:

​
Horizontal Scrolling

Shift + Scroll to scroll left and right:
  • Move horizontally across wide code canvases
  • Useful for navigating blocks that extend beyond the visible area
  • Combines with panning for precise positioning

​
Vertical Scrolling

Cmd/Ctrl + Scroll to scroll up and down:
  • Move vertically through tall code canvases
  • Navigate between different lines of blocks
  • Alternative to panning for vertical movement
These modifier + scroll combinations override the default zoom behavior.

​
Keyboard Shortcuts

The editor supports several keyboard shortcuts:

​
Global Shortcuts

Cmd/Ctrl + SSaves your current project as a .b5.json file:
  • Includes all blocks and connections
  • Saves canvas positions and zoom levels
  • Preserves Factory definitions
  • Downloads to your default folder

​
Developer Shortcuts

The following shortcut is for development and will clear your current work:Cmd/Ctrl + Alt + ` (backtick): Load default empty editor (with warning)

​
Canvas Boundaries

The code canvas has built-in boundary constraints:

​
Panning Limits

You cannot pan the canvas completely off-screen:
  • At least half the canvas width remains visible
  • At least half the canvas height remains visible
  • Prevents losing track of your workspace
// Horizontal constraint
const minLeft = -maxAllBlockWidth + canvasWidth / 2
const maxLeft = lineNumberWidth

// Vertical constraint
const minTop = -maxAllBlockHeight + canvasHeight / 2
const maxTop = blockAlphabetHeight

​
Grid Visibility

The grid axes (line numbers and block alphabets) are always visible:
  • Line numbers: Fixed to the left edge
  • Block alphabets: Fixed to the top edge
  • Move with the canvas when panning
  • Always provide position reference

​
Cursor States

The cursor changes to indicate available actions:
Standard arrow cursor when hovering over most interface elements.

​
Panel Resizing

The Factory and Playground panels can be resized:

​
Dragging the Separator

1

Hover on Separator

Move your cursor over the vertical line between Factory and Playground.
2

Click and Drag

Click and hold the separator, then drag left or right.
3

Release

Release to set the new panel widths.
The Factory has a minimum width to ensure usability. You cannot resize it below this threshold.

​
Factory Section Resizing

Each section in the Factory can be resized vertically:
1

Locate Resize Bar

Find the thin bar at the bottom edge of a Factory section.
2

Drag Vertically

Click and drag the resize bar up or down.
3

Release

Release to set the new height. The height is saved with your project.

​
Viewer Navigation

The Viewer window can be repositioned:
1

Click Header

Click and hold the Viewer header (the grab cursor indicates it’s draggable).
2

Drag Window

Move the Viewer to any position on screen.
3

Release

Release to place the Viewer. It’s constrained to stay within window bounds.
See Viewer for all Viewer controls.

​
File Drag and Drop

You can load .b5.json project files by dragging them into the editor:
1

Prepare File

Locate a .b5.json file in your file manager.
2

Drag to Editor

Drag the file and hover it over the editor interface.A file upload overlay appears.
3

Drop to Load

Release the file to load it.Your current work is replaced with the loaded project.
Drag and drop will replace your current work. Save first if you want to keep it.

​
Touch and Trackpad

While b5 is primarily designed for mouse interaction, trackpad gestures work for:
  • Pinch to zoom: Two-finger pinch on trackpad
  • Scroll gestures: Two-finger scroll for panning/zooming
  • Click and drag: Single-finger drag after click
Touch screen support is not currently optimized. A mouse or trackpad is recommended for the best experience.

​
Performance Tips

Zoom Before Panning

Zoom out for an overview before panning to distant blocks.

Use Search Instead

Block search is faster than panning to find specific blocks.

Minimize When Editing

Minimize the Viewer to maximize workspace when editing code.

Save Frequently

Use Cmd/Ctrl + S often to save your work.

​
Accessibility

Accessibility features are currently limited. Future versions will include:
  • Keyboard-only navigation
  • Screen reader support
  • High contrast themes
  • Configurable zoom levels

​
Next Steps

Block Search

Learn the fastest way to add blocks

Playground

Understand the main code canvas