JSON Canvas Viewer

A front-end library that ships an extensible viewer for JSON Canvas, with easy integration with any existing frameworks and paradigms.

GitHub npm Documentation JSON Canvas

Demo

https://jsoncanvas.org

Interface

Logic

Work: Constructs interactive canvas elements and manages element interactions and rendering.

Interface

Logic

Work: Uses Pointeract to listen to interactions on the viewer and translate to DataManager method calls.

Interface

Logic

Work: Renders all groups, edges and labels that doesn't need interactivity.

Interface

Logic

Work: Initializes the canvas, manages states, and provides canvas control mathods.

Main Interface

Main Logic

Work: Controls lazy loading, provides start and dispose hooks, and manages modules.

Interface

Logic

Logic

Work: Controls main render loop and handles viewer resize

Interface

Logic

Work: Generates applies and caches color palette. Controls viewer theme toggling.

Interface

Central Type Machine

All Available Options and Main Class Augmentations

Received Options and Augmentations

Coordinator

• Start/dispose hooks
• DI container

Learn More

• Deadly simple chimp usage
• Full setup
• Vite plugin
• Webpack loader and plugin
• Use as a Vue component
• Use as a React component
• Prerendering
• Optional modules
• Extend the viewer

Above illustration of the architecture of JSON Canvas Viewer is an instance of itself, with modules Minimap, Controls, and MistouchPreventer loaded.

Introduction

Obsidian ships a powerful tool called JSON Canvas, it enables me to think in a non-linear style, perfect for usages like complex state machines or dependency graphs. While it's sufficient for personal use, it's hard to share with others since there's no mature way to view it outside Obsidian.

JSON Canvas Viewer comes to solve this problem, it is a TypeScript-based viewer for JSON Canvas files that enables users to view and interact with canvases directly in a browser, or embed the viewer in websites with ease. It is built without a framework so it is easily embeddable into any framework.

Features

• 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:
  • 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.

Integration

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
• ✅ Webpack: Webpack Loader & Plugin
• ✅ Vue: Vue Component
• ✅ React: React Component

For more about JSON Canvas Viewer, please go to the GitHub Repo.

License

JSON Canvas Viewer is licensed under the MIT License.