Farid Gareev21 downloadsExport Canvas files to HTML, PNG, JPEG, WebP, SVG, PDF, Excalidraw, Mermaid, and D2.
Take any Obsidian Canvas anywhere. CanvasPort is a local-first desktop plugin that turns Canvas files into self-contained HTML, PNG, JPEG, WebP, SVG, PDF, Excalidraw, Mermaid, or D2 without sending vault data to an external service.
Canvas in. Portable formats out. Export once for documentation, publishing, printing, presentations, or diagram-as-code workflows.
These regression tests compare the original Obsidian Canvas with the PDF produced by CanvasPort. Click any image to inspect the full-resolution result.
| Obsidian Canvas | Exported PDF |
|---|---|
![]() |
![]() |
| Obsidian Canvas | Exported PDF |
|---|---|
![]() |
![]() |
| Obsidian Canvas | Exported PDF |
|---|---|
![]() |
![]() |
| Format | Best for |
|---|---|
| HTML | Publishing or sharing a self-contained visual canvas page |
| PNG, JPEG, WebP | Images for notes, docs, social posts, and presentations |
| SVG | Sharp scalable graphics and documentation |
| Printable or archival exports | |
| Excalidraw | Continuing visual work in Excalidraw |
| Mermaid | Version-controlled text diagrams |
| D2 | Diagram-as-code workflows |
The repository includes a self-contained Obsidian test dataset in tests/dataset/. It provides eight focused Canvas files, reusable image and document fixtures, and expected-result documentation for repeatable visual regression testing.
00 - Test Suite Dashboard.canvas.reference/Expected Results.md for format-by-format acceptance checks.reference/Test Run Template.md.CanvasPort requires the desktop version of Obsidian because image and PDF rendering use Electron APIs.
main.js, manifest.json, and styles.css from the latest release.<your-vault>/.obsidian/plugins/canvasport/.Download or clone this repository.
In the project folder, install Node.js dependencies and build the plugin:
npm install
npm run build
Create <your-vault>/.obsidian/plugins/canvasport/.
Copy the three files from build/ into that folder: main.js, manifest.json, and styles.css.
Restart Obsidian, open Settings → Community plugins, and enable CanvasPort.
Open a .canvas file, then use one of these commands from Obsidian’s Command Palette:
You can also right-click a Canvas file in the file explorer and choose Export canvas….
CanvasPort requires Node.js 20 or later and npm.
npm install
npm run verify
npm run verify validates publication metadata and test fixtures, runs Obsidian's official ESLint rules, checks TypeScript, executes exporter tests, and creates a production build. Use npm run dev to rebuild while developing. npm run build always writes a ready-to-copy plugin package to build/.
src/application — plugin lifecycle and Obsidian commandssrc/exporters — HTML, SVG, diagram, and Excalidraw exporterssrc/lib and src/models — Canvas parsing, text formatting, and domain typessrc/services — vault I/O and Electron renderingsrc/ui — settings and export dialogstests — automated exporter teststests/dataset — complete Obsidian Canvas QA dataset and visual regression fixturesimgs — full-resolution README comparison screenshotsIssues, feature ideas, documentation fixes, and pull requests are welcome. Please read CONTRIBUTING.md before opening a pull request.
See CHANGELOG.md for release notes.
CanvasPort runs locally inside Obsidian. It has no accounts, analytics, telemetry, advertising, or external API calls. Canvas content and embedded files remain on your device unless you choose to share an exported file.
CanvasPort is a substantially modified derivative of Canvas Export by Robin Moffatt. The new name and plugin ID distinguish this derivative from the original community plugin. See NOTICE for attribution and modification details.
CanvasPort is distributed under the Apache License 2.0. You may use, modify, and distribute it subject to that license and the notices in NOTICE.