Canvas Support

Quartz supports rendering JSON Canvas (.canvas) files as interactive, pannable and zoomable canvas pages. This brings your Obsidian canvas files to the web, preserving text nodes, file references, link nodes, group nodes, and edges with full visual fidelity.

Note

For information on how to add, remove or configure plugins, see the Configuration page.

Canvas support is provided by the CanvasPage plugin. See the plugin page for configuration options and a full list of supported features.

Demo

Canvas

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.

Link to original

Customization

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