JSON Canvas Viewer

A TypeScript-based viewer for JSON Canvas files. View and interact with your canvas files directly in the browser, or embed the viewer in front-end projects with ease. It is built without frameworks so it can be easily integrated into any framework.

This project is derived from sofanati-nour/obsidian-canvas-web-renderer, but is far more developed and optimized.

• Documentation: project wiki
• More about JSON Canvas: jsoncanvas.org

🐶 Features

• View JSON Canvas files (.canvas) in a web browser
• Full markdown syntax support (auto-parsed to HTML)
• Embed into websites easily
• Interactive pan and zoom functionality
• Support for different node types:
  • Text nodes
  • File nodes (including Markdown files)
  • Link nodes (embedded web content)
  • Group nodes with custom colors
• Edge connections between nodes with labels
• Minimap for easy navigation (optional extension)
• Mistouch prevention (optional extension)
• Responsive design with mobile and touchpad adaptation
• TypeScript native support
• Server-side rendering (SSR) support
• 🧩 Out-of-the-box extensibility and tree-shaking
• 🔥 More performant than rendering canvases in Obsidian!

🚀 Quick Start

We recommend using your favourite package manager to install the package.

# npm
npm add json-canvas-viewer

# pnpm
pnpm add json-canvas-viewer

# yarn
yarn add json-canvas-viewer

Or include the following lines directly in your HTML file:

<script type="module">
    import { JSONCanvasViewer } from 'https://unpkg.com/json-canvas-viewer/dist/index.js';
</script>

This link ships the latest ESM version by default, to access CJS version or earlier versions, try using a different URL like:

<script src="https://unpkg.com/json-canvas-viewer@3.2.0/dist/index.cjs"></script>

The link above ships version 3.2.0 in CJS.

Then we can instantiate the viewer:

import { Controls, JSONCanvasViewer, Minimap, MistouchPreventer } from 'json-canvas-viewer';

new JSONCanvasViewer(
	{
		container: document.body, // The element to attach the viewer to
		canvasPath: './Example/introduction.canvas', // The path to the canvas to load
		controlsCollapsed: true, // Other options, depending on the modules you passed in
		mistouchPreventer: {
			preventAtStart: false,
		},
	},
	[Controls, Minimap, MistouchPreventer], // The modules to load
);

And the viewer should be right in the body, you can instantiate the viewer multiple times to render multiple canvases.

📝 Copyright & License

Copyright ©️ 2025-2026 Hesprs (Hēsperus) | MIT License