# canvas-to-html

> Convert Obsidian Canvas (.canvas) JSON files to standalone HTML for viewing on GitHub or in browsers. Use when users want to export, convert, or view canvas files as HTML, share canvas diagrams outside Obsidian, or need a web-viewable version of their .canvas files. Handles edge cases like scrollable content for long text, proper box sizing, markdown rendering, and SVG edge connections.

- Author: Steve Li
- Repository: BitSteve/claude-skills
- Version: 20260126165424
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/BitSteve/claude-skills
- Web: https://mule.run/skillshub/@@BitSteve/claude-skills~canvas-to-html:20260126165424

---

---
name: canvas-to-html
description: Convert Obsidian Canvas (.canvas) JSON files to standalone HTML for viewing on GitHub or in browsers. Use when users want to export, convert, or view canvas files as HTML, share canvas diagrams outside Obsidian, or need a web-viewable version of their .canvas files. Handles edge cases like scrollable content for long text, proper box sizing, markdown rendering, and SVG edge connections.
---

# Canvas to HTML Converter

Convert Obsidian Canvas (.canvas) files to standalone, GitHub-viewable HTML.

## Quick Start

Run the conversion script:

```bash
python scripts/canvas_to_html.py <input.canvas> [-o output.html]
```

**Example:**
```bash
python scripts/canvas_to_html.py architecture.canvas -o architecture.html
```

If no output path is specified, creates `<input-name>.html` in the same directory.

## Features

The converter handles:

| Feature | Implementation |
|---------|---------------|
| Long text content | Scrollable containers within fixed node bounds |
| Markdown rendering | Headers, bold, italic, code, tables, lists, links |
| Node types | Text, file, link, and group nodes |
| Edge connections | SVG paths with arrows and labels |
| Color presets | Maps "1"-"6" to Obsidian-like colors |
| Groups | Dashed border containers with labels |

## Content Overflow Handling

Nodes with content exceeding their dimensions get:
- `overflow: auto` on the content container
- Styled scrollbars (thin, semi-transparent)
- Fixed outer dimensions matching canvas specification
- Inner content scrollable both vertically and horizontally

This ensures long text, tables, or code blocks remain readable without breaking the visual layout.

## Output Characteristics

- **Standalone HTML**: No external dependencies, embedded CSS
- **Dark theme**: GitHub-compatible dark background
- **Responsive scrolling**: Both canvas-level and node-level scrolling
- **Preserved layout**: Exact node positions from canvas JSON

## Markdown Support

| Element | Syntax |
|---------|--------|
| Headers | `#` through `######` |
| Bold | `**text**` |
| Italic | `*text*` |
| Strikethrough | `~~text~~` |
| Code (inline) | `` `code` `` |
| Code blocks | ` ```lang ... ``` ` |
| Links | `[text](url)` |
| Lists | `- item` or `* item` |
| Tables | `| col | col |` format |

## Color Mapping

| Preset | Hex Value | Color |
|--------|-----------|-------|
| "1" | #fb464c | Red |
| "2" | #e9973f | Orange |
| "3" | #e0de71 | Yellow |
| "4" | #44cf6e | Green |
| "5" | #53dfdd | Cyan |
| "6" | #a882ff | Purple |

## Programmatic Usage

Import and call directly:

```python
from canvas_to_html import convert_canvas_to_html

# Basic conversion
output_path = convert_canvas_to_html("diagram.canvas")

# With custom output path
output_path = convert_canvas_to_html("diagram.canvas", "output/diagram.html")
```

## Edge Cases Handled

1. **Content overflow**: Scrollable containers prevent text from being cut off
2. **Negative coordinates**: Canvas bounds calculated to include all nodes
3. **Missing optional fields**: Sensible defaults for colors, sides, labels
4. **Special characters**: HTML entities properly escaped
5. **Empty canvas**: Generates valid HTML with minimal dimensions
6. **Large canvases**: Viewport scrolling for oversized diagrams