Node Types
Configuration
Preset Colors
Edges & Connections

CanvasPage Plugin

This plugin renders JSON Canvas (.canvas) files as interactive, pannable and zoomable canvas pages. It supports the full JSON Canvas 1.0 spec.

Install: npx quartz plugin add github:quartz-community/canvas-page

Text Nodes

Text nodes render Markdown content with GFM support:

  • Bold and italic text
  • Strikethrough text
  • External links
  • Inline code blocks
  • Lists (like this one)

Headings Work Too

All standard Markdown syntax is rendered at build time.

File Nodes

File nodes reference other pages in your vault. They appear as clickable links and support popover previews on hover.

The node below links to the CanvasPage documentation:

CanvasPage
CanvasPage

Link Nodes

Link nodes reference external URLs. The node below links to the JSON Canvas specification:

jsoncanvas.org
Open jsoncanvas.org in new tab

Color 1 — Red

Color 2 — Orange

Color 3 — Yellow

Color 4 — Green

Color 5 — Cyan

Color 6 — Purple

Custom hex color — #ff6600

Configuration Options

  • enableInteraction — Enable pan and zoom. Default: true
  • initialZoom — Initial zoom level. Default: 1
  • minZoom — Minimum zoom level. Default: 0.1
  • maxZoom — Maximum zoom level. Default: 5
  • defaultFullscreen — Start in fullscreen mode. Default: false

Configure in quartz.config.yaml:

CanvasPage({ defaultFullscreen: false, initialZoom: 1 })

Fullscreen Mode

Click the expand button (top-right corner) to toggle fullscreen mode. The canvas fills the entire viewport.

  • Press Escape to exit fullscreen
  • Set defaultFullscreen: true to start in fullscreen
  • The toggle button switches between expand and collapse icons

Quartz Integration

  • Popover previews: Hover over file nodes to see a preview
  • Internal links: File nodes link to pages in your vault
  • Dark mode: Canvas adapts to your theme settings

Edges

Edges connect nodes with SVG paths. They support labels, arrows, and colors.

This edge has a label and an arrow marker.

This edge has a custom color (#ff6600).

Edges can use the same preset colors (1–6) as nodes, or custom hex colors like #ff6600.

API

  • Category: Page Type
  • Function name: ExternalPlugin.CanvasPage()
  • Source: quartz-community/canvas-page
  • Install: npx quartz plugin add github:quartz-community/canvas-page

JSON Canvas Spec

This plugin implements the JSON Canvas 1.0 specification — an open file format for infinite canvas data.

Canvas files use the .canvas extension and are standard JSON. They are natively supported by Obsidian.

supportslabeled edge