Excalidraw-Publish: Make interactive visual websites with Obsidian-Publish and the Excalidraw Plugin

TL;DR

Export Excalidraw drawings as SVG for Obsidian Publish interactivity; PNG won’t support embedded interactive components like videos or embedded pages.

Briefing Cornell Notes

Briefing

Obsidian Publish can’t run plugins, but Excalidraw’s SVG export can still deliver interactive, clickable visual pages on the web—if the publishing pipeline is wired correctly. The core fix is to embed Excalidraw as SVG (not as plain Excalidraw embeds or PNG) and then load Excalidraw’s required publish-side JavaScript and CSS through Obsidian Publish’s static assets. Once that’s in place, edits to Excalidraw files can be pushed to the site with a straightforward “publish changes” flow, turning a Markdown vault into a visual, navigable website.

The workflow starts with setting up Obsidian Publish and then adding a custom domain, because Obsidian Publish won’t allow the publish JS file to be served from its default domain—yet Excalidraw’s web interactivity depends on that JS. The domain step can be inexpensive (the creator cites namecheap options around $1/year) and then requires configuring Cloudflare as described in Obsidian’s instructions. After that, the publish CSS and publish JS files are downloaded and placed into the vault’s publish asset route.

On the Excalidraw side, the key requirement is exporting to SVG. In Excalidraw/Obsidian, the embedded drawing can be set to auto-export SVG either per-note via front matter (e.g., an “excalidraw auto export SVG” property) or globally in plugin settings. Without SVG export, Obsidian Publish will treat the embed as text, not as an interactive graphic. With SVG export enabled, the SVG becomes the stable artifact that Obsidian Publish can serve, and the page can remain interactive.

A practical enhancement ties the SVG back to its source: a command palette action can locate the corresponding Excalidraw file for a selected SVG filename and open it in Excalidraw for editing. That matters because the published artifact is the SVG, but the editable source is the Excalidraw note. The process also supports front matter configuration for rendering options like transparent versus non-transparent backgrounds.

For layout control, the setup adds support for CSS classes in the publish CSS. One highlighted class (“ex page height”) adjusts the rendered drawing height so the exported visuals fill the page area consistently—useful for building a “scroll-less” image-to-image visual website where navigation feels like paging through visuals.

Finally, the pipeline includes a maintenance command to prevent stale embeds. A command palette action (“Excalidraw Obsidian Publish find SVG and SVG exports that are out of date”) scans for Excalidraw-related SVG exports that no longer match the current state of the Excalidraw notes, then republish only what’s needed. A recursive option helps when Excalidraw files reference other Excalidraw files.

The result is a publishable, interactive visual website built on SVG exports—while acknowledging a limitation: embedded interactivity such as videos or embedded pages won’t work if the drawings are exported as PNG. SVG is the reliable path for interactivity on Obsidian Publish.

Cornell Notes

Obsidian Publish can’t run plugins, but Excalidraw interactivity can still work on the web by exporting drawings as SVG and wiring Excalidraw’s publish-side CSS/JS into the vault. A custom domain plus Cloudflare configuration is needed so Obsidian Publish will serve the required publish JS file. Excalidraw notes can be set to auto-export SVG via front matter or plugin settings, and a command palette action can open the matching Excalidraw source from a selected published SVG. Additional CSS classes (like “ex page height”) help control rendering for a visual, page-by-page website layout. A separate command can detect out-of-date SVG exports so updates are republished reliably.

Why does Excalidraw interactivity require SVG (not PNG) on Obsidian Publish?

Obsidian Publish only supports the static assets it can serve, and the interactive behavior depends on the SVG export pipeline. When Excalidraw is embedded as SVG, the published page can load the necessary publish-side JavaScript and CSS and keep elements interactive. If the drawing is embedded as plain text or exported as PNG, the interactive components (like embedded videos or embedded pages) won’t function—PNG is treated as a non-interactive image.

What’s the role of a custom domain and Cloudflare in this setup?

Obsidian Publish provides a default domain, but it won’t allow publication of the publish JS file needed for Excalidraw’s web interactivity. Registering a custom domain and configuring Cloudflare (as outlined in Obsidian’s instructions) makes it possible to serve the publish JS and publish CSS files from the vault’s publish asset route, enabling Excalidraw’s interactive rendering on the site.

How does the workflow ensure Excalidraw drawings stay in sync with what’s published?

Two mechanisms help. First, Excalidraw notes can be configured to auto-export SVG on save (either per-note via front matter such as an “excalidraw auto export SVG” property, or via plugin auto-export settings). Second, a command palette action (“find SVG and SVG exports that are out of date”) scans for SVG exports that don’t match the current Excalidraw notes and republish only the selected, relevant files. A recursive option can handle nested Excalidraw references.

How can an editor jump from a published SVG back to the editable Excalidraw note?

A command palette action lets the user select the row containing the SVG filename and then opens the corresponding Excalidraw file automatically. That enables editing the source note with Excalidraw’s interface, then saving to trigger SVG export and republishing changes.

What does the “ex page height” CSS class accomplish?

The “ex page height” class adjusts the rendered drawing’s height on the web page so the SVG expands to match the page height constraints when it fits the available width. This helps create consistent, image-like “slides” where each page shows a full visual without awkward extra whitespace or inconsistent scaling.

Where do publish CSS and publish JS files need to live, and how are they detected?

They must be placed in the vault’s publish route. If they aren’t visible in Obsidian, plugin settings under Files can be used to detect all file extensions so the publish CSS and publish JS files appear. These files aren’t meant to be edited inside Obsidian’s editor; they can be edited externally (the transcript mentions using Notepad++ on Windows) and then republished.

Review Questions

What specific constraint of Obsidian Publish makes a custom domain necessary for Excalidraw’s publish-side JavaScript to work?
Describe two different ways the setup can trigger automatic SVG export for Excalidraw notes.
How does the “out of date SVG exports” command reduce the risk of publishing stale visuals when filenames or linked assets change?

Key Points

1
Export Excalidraw drawings as SVG for Obsidian Publish interactivity; PNG won’t support embedded interactive components like videos or embedded pages.
2
Use a custom domain (with Cloudflare configured) so Obsidian Publish will serve the required publish JS file.
3
Place publish CSS and publish JS files into the vault’s publish route, and enable file-extension detection in plugin settings if they don’t appear.
4
Enable auto-export to SVG either per-note via front matter (e.g., an Excalidraw auto export SVG property) or via plugin auto-export settings.
5
Use command palette actions to open the Excalidraw source from a selected published SVG and to find/republish out-of-date SVG exports.
6
Apply CSS classes in publish CSS (such as “ex page height”) to control how Excalidraw renders on the web page for a consistent visual layout.
7
Republish changes after edits so Obsidian Publish updates the served SVG artifacts and the site reflects the latest drawings.

Highlights

Obsidian Publish’s plugin limitation is bypassed by serving Excalidraw through SVG plus publish-side CSS/JS assets.

A custom domain plus Cloudflare is required because Obsidian Publish won’t publish the publish JS file from its default domain.

Auto-export SVG on save keeps published visuals synchronized without manual export steps.

A command palette workflow can open the correct Excalidraw note from a selected published SVG and can detect stale SVG exports for republishing.

Interactivity depends on SVG; PNG exports won’t support embedded interactive elements on the published site.

Topics

Obsidian Publish Setup
Excalidraw SVG Export
Cloudflare Domain Configuration
Publish CSS/JS Assets
Command Palette Automation