Kanvas

A hand-drawn style diagramming/whiteboard canvas that opens as a custom editor for .kanvas files, right inside VS Code.

Preview

Features

• Custom Editor: Registered for *.kanvas files (JSON structure under the hood).
• Rich Tools: Selection (V), Rectangle (R), Ellipse (O), Diamond (D), Arrow (A), Line (L), Freehand Draw (P), Text (T), Code Block (C), Laser Pointer (K), and Eraser (E).
• Notion-Style Code Blocks:
  • Add syntax-highlighted code blocks via the toolbar or Markdown trigger (typing ```).
  • Multi-language support (TypeScript, JavaScript, Python, HTML, CSS, Rust, Go, SQL, C/C++, Bash, JSON, Markdown).
  • Minimalist floating pill header with Language switcher and 1-click 📋 Copy to clipboard with visual feedback.
  • Interactive edge resizing and smooth header drag-to-move.
  • Context-aware UI: Automatically hides the left style sidebar when code blocks are selected or edited for a distraction-free workflow.
• Seamless Text Editing:
  • Double-click anywhere on the canvas or shapes to start typing directly.
  • Instant outside-click commit that seamlessly preserves text and code blocks.
• Whiteboard Aesthetics: Drawing grid background, custom colors (stroke & fill tints), circular selection handles.
• Styling Panel:
  • Stroke width: Thin, Medium, Thick.
  • Stroke style: Solid, Dashed, Dotted.
  • Fill style: Hachure, Cross-hatch, Solid.
  • Sloppiness (Roughness): Neat, Artist, Cartoon.
  • Font Family: Handwritten, Normal, Code.
  • Arrow types & endpoints: Straight, Curved, Elbow with various arrowheads.
• Layer Operations: Move elements to front (Ctrl+]) or back (Ctrl+[).
• Hand-drawn style: Powered by the rough.js rendering engine.
• History & Sync: Full undo/redo wired into VS Code's native undo stack (Ctrl+Z / Ctrl+Y).
• Camera controls: Pan (space+drag or middle-click drag) and Zoom (Ctrl + scroll or bottom-right buttons).
• Exporting: Export to PNG or SVG via command palette or controls.
• Autosave & Dirty-tracking: Integrates with VS Code's tab UI.
• GitHub Preview Integration: Automatically generates/updates a companion SVG preview ([filename].kanvas.svg) next to your .kanvas file on save. Committing both files enables native drawing previews on GitHub.

Project Layout

kanvas/
  src/
    extension.ts            entry point, registers the provider
    kanvasEditorProvider.ts  CustomEditorProvider: webview <-> document wiring
    kanvasDocument.ts        CustomDocument: scene state + undo/redo edit stack
  media/
    main.js                  the canvas app that runs inside the webview
    style.css                 toolbar/canvas styling
    rough.js                  bundled rough.js library (hand-drawn rendering)
  sample.kanvas               example file to open on first run

Running it

1. Open this folder in VS Code and press F5 (Run Extension). This launches an Extension Development Host window.
2. In that new window, open sample.kanvas (or create a new one via the command palette: Kanvas: New Kanvas File).

Exporting

With a .kanvas file open and focused, run Kanvas: Export as PNG or Kanvas: Export as SVG from the command palette (Ctrl/Cmd+Shift+P).

Packaging

npm install -g @vscode/vsce
vsce package

This produces a .vsix you can install into VS Code.