Canvas Support

summary:

• Renders JSON Canvas (.canvas) files, including Obsidian canvases, as interactive zoomable/pannable pages.
• Preserves:
  • text nodes
  • file references
  • links
  • groups
  • edges

Note

Plugin installation, removal, and configuration: Configuration.

plugin:

• provider: CanvasPage
• configuration/features: CanvasPage

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

summary:

• Renders JSON Canvas (.canvas) files through custom "canvas" page frame
• Supports JSON Canvas 1.0 spec

Note

Plugin add/remove/configure: Configuration.

Configuration

configuration: enableInteraction: effect: pan/zoom default: true initialZoom: effect: initial zoom level default: 1 minZoom: effect: minimum zoom level default: 0.1 maxZoom: effect: maximum zoom level default: 5

Canvas Frame

canvas_frame: frame: "canvas" features: fullscreen: 100vw × 100vh left_sidebar: - togglable - slides in - overlays on mobile - contains left slot components - toggles: - top-left button - Escape controls: position: right actions: - zoom in - zoom out - reset override_layout: quartz.config.yaml

quartz.config.yaml

layout:
  byPageType:
    canvas:
      template: default # Use standard three-column layout instead

Features

features: text_nodes: rendering: Markdown/GFM supports: - headings - lists - links - code blocks file_nodes: - local vault page links - hover popover previews link_nodes: - external URL references group_nodes: - containers - optional labels - background colors edges: - SVG paths - optional labels - arrows - colors: - presets: 1–6 - custom hex: #RRGGBB - connections: any side colors: presets: - red - orange - yellow - green - cyan - purple custom_hex: #RRGGBB applies_to: - nodes - edges

API

api: category: Page Type function: ExternalPlugin.CanvasPage() source: quartz-community/canvas-page install: npx quartz plugin add github:quartz-community/canvas-page

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