Canvas Basics

Navigate, zoom, and arrange blocks on the infinite canvas.

Every page in Cobloc is an infinite canvas. Unlike a traditional document that scrolls vertically, the canvas lets you place content anywhere in a 2D space — pan around, zoom in on details, and arrange blocks in whatever layout makes sense for your thinking.

Panning

How you pan depends on your navigation mode. In Mouse mode, right-click and drag or hold Space and drag. In Trackpad mode, two-finger scroll in any direction. The canvas is infinite — there are no edges to hit.

Zooming

Zoom in and out to focus on details or see the big picture:

Zoom in⌘ +
Zoom out⌘ -
Reset to 100%⌘ 0
Fit all blocks in view⌘ ⇧ 1

Pinch-to-zoom on a trackpad also works. The zoom level is displayed in the bottom toolbar.

Adding blocks

Click and drag on empty canvas space to draw a selection rectangle. When you release, the block type selector appears. Choose from six block types: Note, Todo, Link, Image, Document, or AI Chat.

For faster creation, use keyboard shortcuts: N for a note, T for a todo, or L for a link. The block appears at the center of your current view.

Selecting blocks

Click a block to select it. A highlight ring appears around the selected block. Hold Shift and click additional blocks to add them to your selection. Press Cmd+A to select all blocks on the canvas.

Moving blocks

Drag a selected block to move it anywhere on the canvas. If you have multiple blocks selected, they all move together, maintaining their relative positions.

Resizing blocks

Grab the resize handles on the edges and corners of a block to resize it. For image blocks, resizing preserves the aspect ratio automatically.

Layering (z-index)

Blocks can overlap. When they do, you can control which block appears on top:

Bring selected block to front]
Send selected block to back[

Viewport persistence

Your canvas position and zoom level are saved automatically. When you return to a page, you'll be exactly where you left off. Changes are saved with a short debounce to avoid excessive writes.

The canvas is powered by React Flow, giving you smooth panning, zooming, and block interactions.