Skip to main content
The Viewer displays the live output of your b5 program running in the Playground. It provides real-time visual feedback and controls for managing your sketch.

​
Viewer Controls

The Viewer header contains several control buttons:
Toggle sketch execution
  • Loop: Sketch runs continuously at 60 FPS
  • No Loop: Sketch is paused, showing a static “PAUSED” indicator
Click to pause a running sketch or resume a paused one. This is useful for:
  • Inspecting specific frames
  • Debugging visual output
  • Reducing CPU usage when not actively developing
Refresh and Capture buttons are disabled when the sketch is paused. Click the Loop button to resume execution first.

​
Viewer Modes

The Viewer can be displayed in two modes:

​
Popup Mode (Default)

The Viewer appears as a floating window that can be:
  • Dragged: Click and hold the header, then drag to reposition
  • Resized: Automatically sizes to fit your canvas
  • Moved freely: Position anywhere on screen
The Viewer header shows a grab cursor when you hover over it, indicating you can drag the window.

​
Mini Mode

Click the minimize button to shrink the Viewer to a corner:
1

Click Minimize

Click the small minimize button in the Viewer header.
2

Viewer Shrinks

The Viewer scales down and moves to the corner of the screen.The canvas is automatically scaled to fit within a small target size while maintaining aspect ratio.
3

Click Expand

Click the expand button to restore the Viewer to full size.The Viewer returns to popup mode at its original scale.
Mini mode gives you maximum workspace for editing while keeping your sketch output visible.

​
Dragging the Viewer

The Viewer window can be repositioned anywhere on screen:
1

Hover on Header

Move your cursor over the Viewer header. The cursor changes to indicate the window is draggable.
2

Click and Drag

Click and hold the header, then drag the window to your desired position.
3

Boundary Constraints

The Viewer stays within the window bounds:
  • Can’t be dragged completely off-screen
  • At least the header remains visible
  • Automatically constrains to window edges
Position the Viewer where it doesn’t obscure your code canvas or block search.

​
Canvas Rendering

The Viewer uses the b5.js rendering engine to display your sketch:

​
Default Canvas

The sketch renders to a canvas with ID defaultCanvas0 (p5.js convention).

​
Rendering Loop

When the sketch is running:
  • Executes the Playground code at 60 FPS
  • Updates the canvas in real-time
  • Reflects code changes immediately

​
Paused State

When paused:
  • Canvas is hidden
  • “PAUSED” icon is displayed
  • No code execution occurs
  • CPU usage is minimal

​
Automatic Resizing

The Viewer automatically adjusts to canvas size changes:

​
In Mini Mode

When variables in the Factory change (which may affect canvas size):
  • The Viewer detects the change
  • Recalculates the scale to fit the target size
  • Updates automatically to maintain aspect ratio
const targetScale = Math.min(
  (targetSize / canvas.height) * 2,
  (targetSize / canvas.width) * 2
)

​
In Popup Mode

The Viewer uses automatic sizing to fit the canvas without scaling.

​
Live Coding Feedback

The Viewer provides immediate visual feedback:
When you add, remove, or modify blocks:
  • Changes are reflected instantly
  • No need to refresh manually
  • Animations continue running

​
Performance Considerations

Pause When Not Needed

Pause the Viewer when not actively testing to reduce CPU usage.

Minimize for Space

Use mini mode to save screen space while keeping output visible.

60 FPS Default

The default 60 FPS provides smooth animations but uses more CPU than lower frame rates.

Capture Interesting Frames

Save frames you want to keep before refreshing or closing.

​
Viewer State

The Viewer maintains several pieces of state:
  • Loop status: Running or paused
  • Position: X and Y coordinates on screen
  • Mode: Popup or mini
  • Size: Canvas dimensions and scale
The Viewer state is managed in React component state and is reset when you load a new project.

​
Keyboard Shortcuts

While the Viewer itself doesn’t have dedicated keyboard shortcuts, related operations include:
  • Cmd/Ctrl + S: Save your project (includes Viewer state)
  • Escape: Close block search (doesn’t affect Viewer)

​
Integration with Editor

The Viewer is tightly integrated with the editor:
1

Data Flow

Editor changes are sent to the Viewer via a bridge function.
2

Rendering

The Viewer receives the editor state and renders it using b5.js.
3

Real-time Updates

Updates happen on every editor state change, providing instant feedback.

​
Troubleshooting

The loop state may have toggled accidentally. Click the Loop button to resume execution.
Ensure the sketch is running (not paused). The Capture button only works when the loop is active.
The Viewer should auto-constrain to window bounds. Try reloading the page to reset its position.
This can happen if the canvas size changed. Click expand and then minimize again to recalculate the scale.

​
Next Steps

Playground

Learn how the code canvas generates output for the Viewer

Navigation

Master all editor controls for an efficient workflow