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:
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:
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.