Demo • Documentation • About JSON Canvas

• View JSON Canvas files (.canvas) in a web browser
• Embed into websites easily
• Interactive pan and zoom functionality
• Can display 100% of canvas features described in the official spec
• Responsive design with mobile and touchpad adaptation
• Supports Lazy loading
• TypeScript native
• 🔥 More performant than rendering canvases in Obsidian!
• 🧩 Out-of-the-box extensibility and tree-shaking, current optional modules include:
  • Minimap for easy navigation
  • Controls displays zoom in/out and fullscreen buttons
  • MistouchPreventer prevents the canvas from intercepting page scroll.
  • DebugPanel displays scale and position data.

JSON Canvas Viewer currently can work seamlessly with the following techstacks / technologies (including but not limited to):

• ✅ Vanilla JS/TS: natural support
• ✅ Prerendering: renderToString
• ✅ Vite: Vite Plugin
• ✅ Vue: Vue Component
• ✅ React: React Component

🙌 Contributions are welcomed!

You firstly need a markdown-to-HTML parser, which is of the type below:

type MarkdownParser = (markdown: string) => string | Promise<string>;

For demonstration only, we'll use Marked. Note that marked will be a development dependency, when configured correctly, markdown parsing will happen only at build time.

Then we recommend using your favourite package manager to install the package.

# npm
npm add json-canvas-viewer
npm add marked -D

# pnpm
pnpm add json-canvas-viewer
pnpm add marked -D

# yarn
yarn add json-canvas-viewer
yarn add marked -D

You also need to configure your bundler to support seamless canvas resolution. Currently, we only support Vite:

// vite.config.ts
import { defineConfig } from 'vite';
import { jsonCanvasVitePlugin } from 'json-canvas-viewer/bridges';
import  { marked } from 'marked';

export default defineConfig({
    // ... your other config
    plugins: [
        jsonCanvasVitePlugin(marked),
        // ... your other plugins
    ]
})

The argument is any markdown parser, when empty, build-time parsing is disabled.

The setup above gives you:

• bundler resolution of .canvas file as modules
• build-time parsing of .canvas files (less client-side overhead)
• ease for later framework integration and prerendering

Instantiate the viewer:

import { JSONCanvasViewer } from 'json-canvas-viewer';
import { Minimap } from 'json-canvas-viewer/modules';
import canvasData from 'path/to/your.canvas';

new JSONCanvasViewer(
	{
		container: document.body, // The element to attach the viewer to
		canvas: canvasData, // The path to the canvas to load
	},
	[Minimap], // The modules to load
);

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

This project welcomes anyone that have ideas to improve it.

• Open a pull request for a new module, documentation update, and so on.
• Open an issue if you find a bug.
• Start a new thread in Discussions if you have feature requests or questions, please avoid posting them in Issues.
• Report a vulnerability if you find one, please do not disclose it publicly.

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