svelte-lexical 0.6.5: Shiki code highlighting, and Qalam — a notes app built with it

Version 0.6.5 of svelte-lexical is out. Two things are worth talking about: the editor now has a Shiki-based code highlighting plugin alongside the existing Prism one, and there’s a new demo app — Qalam, a distraction-free note-taking app that runs both as a desktop app and in the browser.

Qalam: a real app, not a kitchen-sink demo

The playground that ships with svelte-lexical has always been useful for showing what the editor can do — every plugin, every toolbar button, all at once. What it doesn’t show is what it’s like to actually build something with the library and live with the decisions.

So I built Qalam. It’s a notes app: a sidebar of notes on the left, an editor on the right, and not much else in the way.

What it does

• Rich-text notes with headings, lists, checklists, links, tables, images, code blocks with syntax highlighting, embeds (YouTube, Twitter, Bluesky), and Markdown shortcuts.
• Autosave — content is written out shortly after you stop typing. No save button.
• Per-note undo/redo — each note keeps its own history stack, so switching between notes doesn’t blow away your undo history. This one took some care to get right, and it’s the kind of thing you only discover you need once you’re using the app daily.
• Images from anywhere — upload from your filesystem, or insert by URL. Either way they’re stored as base64 in the note itself, so a note is self-contained.
• Sidebar for creating, renaming, switching, and deleting notes, with focus moving sensibly into the content when you create a new note and press Enter.

One app, two storage backends

The part I find most interesting is that Qalam runs in two very different environments and adapts its storage to whichever it’s in:

• As a desktop app (via Tauri), notes are saved as JSON files in the app’s data directory. There’s a Settings dialog that tells you exactly where that is, because “where did my notes actually go” is a fair question to have about any notes app.
• In the browser, notes are saved to IndexedDB, local to that browser.

The rest of the app doesn’t know or care which one it’s talking to — the backend switch lives in a single module. If you’re curious how that’s wired up, the code is small enough to read in one sitting: src/lib/notesBackend.ts handles the storage switch, and src/lib/notesStore.svelte.ts is the reactive store that coordinates note state with it.

Trying it out

Qalam lives in demos/qalam. Since it consumes svelte-lexical from the workspace, build the library first:

cd packages/svelte-lexical
pnpm i
pnpm build

Then from demos/qalam:

pnpm i
pnpm dev          # web app at localhost:5173, notes in IndexedDB
pnpm tauri:dev    # desktop app, notes as JSON files

The desktop route needs the Tauri prerequisites for your platform.

Shiki code highlighting

The other headline feature: there’s now a Shiki-powered code highlighting plugin. Shiki uses the same TextMate grammars and themes as VS Code, so code blocks in your editor can look exactly like code blocks in your editor, so to speak.

It’s exposed under a separate import path, deliberately:

import {CodeHighlightShikiPlugin} from 'svelte-lexical/shiki';

The reason for the separate path is bundle size. Shiki brings its grammars and themes with it — roughly 1.4MB extra in the playground build. That’s a completely reasonable trade if you want VS Code-grade highlighting, and a completely unreasonable one if you don’t, so nobody pays for it unless they import it.

Prism is still there and still the default. It’s just been renamed for clarity, now that there are two of these:

import {CodeHighlightPrismPlugin} from 'svelte-lexical';

The old CodeHighlightPlugin export still works — it’s marked deprecated and points at the Prism plugin, so existing code keeps running. You’ll want to move to the new name at some point, but nothing breaks today.

Fixes and smaller changes

A handful of things that don’t need a section each:

• EditorState is now exported from the package. It’s needed for typing OnChangePlugin handlers, and its absence was an oversight.
• Fixed state_proxy_equality_mismatch warnings.
• Fixed the link editor’s behaviour when dealing with linked images.
• Accessibility improvements to the image and table cell resizers.
• Assorted Qalam fixes: focus handling when switching notes, link editor backgrounds, toolbar scrolling, and better use of the available screen area.
• Svelte upgraded to 5.45.3, and CI now tests on Node 24.
• Added a CLAUDE.md to the repo, for anyone (or anything) using AI assistants against this codebase.

Get it

npm install svelte-lexical

The full release notes are on GitHub. If you build something with it — or hit something broken — issues and stars are both welcome.