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
- Modern aesthetics with light and dark mode support
- A chimp version specially designed for fast trial is available
- π₯ More performant than rendering canvases in Obsidian!
- 𧩠Out-of-the-box extensibility and tree-shaking, current optional modules include:
Minimapfor easy navigationControlsdisplays zoom in/out and fullscreen buttonsMistouchPreventerprevents the canvas from intercepting page scroll.DebugPaneldisplays scale and position data.
You can explore a demo canvas here.
This is the monorepo for JSON Canvas Viewer, which contains a the core viewer and a set of adaptors for popular paradigms.
JSON Canvas Viewer currently can work seamlessly with the following techstacks / technologies (including but not limited to):
- β
Vanilla JS/TS: natural support -
json-canvas-viewer - β
Prerendering:
renderToString-json-canvas-viewer - β
Vite: Vite Plugin -
vite-plugin-json-canvas - β
Vue: Vue Component -
@json-canvas-viewer/vue - β
React: React Component -
@json-canvas-viewer/react - β
Preact: Preact Component -
@json-canvas-viewer/preact
π Contributions are welcomed!
The HTML snippet below uses the chimp version of JSON Canvas Viewer. You also need to prepare a canvas file, if you don't have one, you can download one at here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>π Canvas Viewer</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body></body>
<script type="module">
import { JSONCanvasViewer, parser, fetchCanvas } from 'https://unpkg.com/json-canvas-viewer';
new JSONCanvasViewer({
container: document.body, // The element to attach the viewer to
canvas: await fetchCanvas('path/to/your.canvas'), // remember to prepare your canvas
markdownParser: parser,
});
</script>
</html>For full elaboration about the instantiation and APIs, please refer to the documentation.
Copy and paste the following prompt to OpenCode, ClaudeCode, Cursor or even a chat bot, replace the placeholder to your task, let it handle everything for you:
I'm using `json-canvas-viewer`, a library to view JSON Canvas (from Obsidian) interactively in a browser. Read its documentations, figure out wether to use `chimp` version or `full` version, and help me with my requirements.
**Documentation**:
[Readme](https://github.com/hesprs/json-canvas-viewer/raw/refs/heads/main/README.md)
[Quick Start and React / Vue / Preact/Vite Integration](https://github.com/hesprs/json-canvas-viewer/raw/refs/heads/main/docs/1-%F0%9F%9A%80-Quick-Start.md)
[Construction Details](https://github.com/hesprs/json-canvas-viewer/raw/refs/heads/main/docs/2-%F0%9F%8F%97%EF%B8%8F-Construction-Details.md)
[Modules](https://github.com/hesprs/json-canvas-viewer/raw/refs/heads/main/docs/3-%F0%9F%A7%A9-Modules.md)
[Prerendering](https://github.com/hesprs/json-canvas-viewer/raw/refs/heads/main/docs/4-%F0%9F%96%87%EF%B8%8F-Prerendering.md)
**Requirements**:
<!-- your requirements here -->JSON Canvas Viewer is also available on Context7. If you're using it, you can skip the above prompt and simply ask the agent:
Query `json-canvas-viewer` on Context7.Or don't care about this at all, the agents are smart enough to search on Context7 themselves.
This project welcomes anyone that has 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 or have a feature request.
- Start a new thread in Discussions if you have feature requests or questions to discuss.
- Report a vulnerability if you find one, please do not disclose it publicly.
Copyright Β©οΈ 2025-2026 Hesprs (HeΜsperus) | MIT License