Skip to main content
The canvas is Ganimede’s defining feature - a 2D workspace where you can position and organize notebook cells anywhere on an infinite grid. This spatial approach lets you build the flow of code in a way that matches your mental model, rather than forcing everything into a sequential list.

​
Why a canvas?

Traditional notebooks lock you into a linear, top-to-bottom sequence. But not all code flows linearly:
  • Exploratory work often branches into multiple paths
  • Related cells may be conceptually grouped but not sequential
  • Data pipelines have natural spatial layouts (sources → transforms → outputs)
  • Parallel experiments benefit from side-by-side comparison
The canvas lets you arrange cells to match these natural patterns.

​
Canvas navigation

​
Panning

Click and drag on the empty canvas background to pan around the workspace: 
let mouseDown = function (e) {
  if (e.button === 0 && e.target.id === "canvas") {
    moving = true;
    clicked_x = $mouse_pos.x;
    clicked_y = $mouse_pos.y;
  }
};

let mouseMove = function (e) {
  if (moving) {
    window.scrollBy({
      left: clicked_x - $mouse_pos.x,
      top: clicked_y - $mouse_pos.y,
      behavior: "instant",
    });
  }
};

​
Zooming

Use your mouse wheel or trackpad to zoom in and out. Zooming helps you:
  • Get an overview of your entire notebook structure
  • Focus on specific areas of dense cells
  • Navigate large workspaces efficiently

​
2D scrolling

The canvas supports natural 2D scrolling with your trackpad or mouse: 
window.addEventListener("wheel", (event) => {
  event.preventDefault();
  window.scrollBy({
    left: event.deltaX,
    top: event.deltaY,
    behavior: "instant",
  });
}, { passive: false });

​
Grid snapping

Cells snap to a configurable grid for clean alignment. The default snap interval is 20 pixels in both directions: 
{
  "grid": {
    "snap": {
      "x": 20,
      "y": 20
    }
  }
}
Grid snapping keeps your workspace organized without restricting flexibility.

​
Cell positioning

Every cell has position properties that control its location on the canvas:
  • top: Vertical position from canvas origin
  • left: Horizontal position from canvas origin
  • width: Cell width in pixels
  • height: Cell height in pixels
These properties are stored in the notebook file’s metadata, so your layout persists between sessions.

​
Context menu

Right-click on the canvas to access context-sensitive operations: 
function showCustomContextMenu(event) {
  event.preventDefault();
  menu_left = event.clientX;
  menu_top = event.clientY;
  right_click_menu.style.display = "block";
}
The context menu provides quick access to:
  • Creating new cells
  • Adjusting canvas settings
  • Organizing selected cells
The canvas automatically hides the context menu when you scroll, zoom, or click elsewhere.

​
Working with space

The canvas gives you infinite room to work. Use this space to:

Group related cells

Keep related code, markdown, and outputs together visually

Separate experiments

Run parallel experiments side-by-side for easy comparison

Build pipelines

Layout data flows from left to right or top to bottom

Create sections

Use markdown headings to define regions of your canvas

​
Next steps

Cell management

Learn how to create and manage cells on the canvas

Tissue grouping

Organize cells hierarchically with tissue groups

Build docs developers (and LLMs) love

Get started for freeTalk to us