jsoncanvas-kit Svelte Themes

Jsoncanvas Kit

SvelteKit template for hosting JSON Canvas files with interactive viewer - pan, zoom, drag nodes, and render markdown content

JSON Canvas Kit

A SvelteKit template for hosting interactive JSON Canvas files on GitHub Pages. Edit your canvas and markdown files in Obsidian, commit your changes, and have them automatically deployed to a beautiful, interactive web viewer.

Features

  • 📝 Obsidian Integration - Edit canvas and markdown files directly in Obsidian
  • 🎨 Interactive Viewer - Pan, zoom, and drag nodes on the canvas
  • 🔗 Markdown Support - Render markdown files with full GFM support
  • 🚀 Auto-Deploy - GitHub Actions automatically deploys to GitHub Pages on push
  • 📱 Responsive - Works on desktop and mobile devices
  • Fast - Static site generation with SvelteKit

Getting Started

1. Create Your Repository

Click the "Use this template" button at the top of this repository to create your own copy.

2. Clone and Install

# Clone your new repository
git clone https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
cd YOUR-REPO-NAME

# Install dependencies
npm install

3. Open in Obsidian

  1. Open Obsidian
  2. Click "Open folder as vault"
  3. Navigate to and select the static/ folder in your repository
  4. Start creating your canvas!

4. Github - deployment

  1. Click on Settings/Pages
  2. Make sure it is using Github action for deployment.

Top categories

Loading Svelte Themes