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
- Open Obsidian
- Click "Open folder as vault"
- Navigate to and select the
static/ folder in your repository
- Start creating your canvas!
4. Github - deployment
- Click on
Settings/Pages
- Make sure it is using Github action for deployment.