Skip to content
Edytor
Esc
↑↓navigate↵open⌘Jpreview
On this page

Customizing

Theme the starter editor with your shadcn-svelte tokens, edit the files the registry copied, replace a part or a chrome surface with a snippet, and change its words.

The starter’s files are in your app: everything below is a change to your own code. From the lightest:

  1. Your shadcn tokens: the page, the blocks and every menu read them.
  2. A snippet per part: the cover, icon and title, a property cell or the whole properties block, and each chrome surface through its plugin’s options (Props).
  3. The copied files: $lib/components/edytor/starter and $lib/components/edytor/chrome are plain Svelte and shadcn components; change their markup, their classes, their behaviour.

Theme: the shadcn tokens

There is no theme prop: the starter has one way to theme it, your app’s shadcn-svelte theme. shadcn-svelte init wrote its tokens in your CSS, :root for light and .dark for dark; the starter reads them all:

Token Paints
--background, --foreground the page and its text, the blocks’ text
--popover, --popover-foreground every menu, toolbar, panel and card
--muted, --muted-foreground code blocks and panels, secondary text, property names, placeholders
--accent the hovered and highlighted rows, the hover of a block’s controls
--border, --input dividers, the fields’ and the cards’ edges
--primary checked to-dos, pressed toolbar buttons, the suggestion accent
--ring focus rings, the text and block selection, the drop indicator
--destructive Delete rows, inline code, an equation’s error
--radius the shadcn components’ corners

$lib/components/edytor/chrome/tokens.css (imported by StarterEditor) maps the editor’s own variables (--notion-*, --edytor-*, the Notion theme’s) onto those tokens, and gives the block colours and the code’s syntax colours a dark palette under .dark. Put .dark on <html> (or any element around the editor), as shadcn-svelte’s dark mode does, and the page, the blocks and the menus all turn dark.

:root {
	--primary: oklch(0.55 0.2 264);
	--radius: 0.5rem;
}
.dark {
	--background: oklch(0.16 0.01 264);
}

The shadcn-svelte themes are sets of these tokens: paste one and the editor follows.

Layout variables

The page’s sizes are CSS variables on its root, [data-edytor-starter] (with the class edytor-notion):

Variable What it sets Default
--edytor-starter-max-width the column of text 708px
--edytor-starter-gutter the page’s side padding 96px
--edytor-starter-gutter-narrow the side padding under 720px 16px
--edytor-starter-cover-height the cover 30vh (120 to 280px)
--edytor-starter-title-size the title’s font size 40px (32px under 720px)
--edytor-starter-title-font the title’s font the body font
--edytor-starter-icon-size the page icon’s box 78px (64px under 720px)
--edytor-starter-radius the icon’s and the page controls’ corners 6px
--notion-font, --notion-mono the blocks’ fonts Notion’s
--edytor-color-<name>, --edytor-background-<name> the block colours, and a select option’s Notion’s palette, light and dark 
[data-edytor-starter] {
	--edytor-starter-title-size: 48px;
	--edytor-starter-max-width: 900px;
}

The page parts carry attributes to style them by: data-edytor-starter-cover, data-edytor-starter-icon, data-edytor-starter-title, data-edytor-starter-properties, data-edytor-starter-property="<id>" and data-edytor-starter-cell="<type>".

Edit the files

  • A menu’s markup: chrome/SlashMenu.svelte, chrome/Toolbar.svelte… Each takes its plugin’s controller: keep the controller’s attachments ({@attach controller.popup}, {@attach controller.keys}, {@attach controller.option(index)}), which carry its focus, keys and ARIA; the rest is shadcn markup to change at will.
  • A page part: starter/page/Cover.svelte, PropertyCell.svelte… are shadcn Popover, Select, Calendar, Command and Collapsible compositions.
  • The plugin list: starter/starterPlugins.ts is the one place that lists the plugins and their options.
  • A new shadcn component: npx shadcn-svelte@latest add tooltip, then use it in any copied file.

Words

The page’s words (Add icon, Untitled, Add a property…) and the menus’ are the chrome’s, in chrome/words.svelte.ts: change any of them with setWords, a section at a time, or edit the file. The words of the editor itself (kind names, the document’s) are labels, as on <Edytor>. See Localization.

import { setWords } from '$lib/components/edytor/chrome/index.js';

/** The page in French: call it once, before the editor mounts. */
export const useFrench = () =>
	setWords({ starter: { untitled: 'Sans titre', addIcon: 'Ajouter une icône' } });

Was this page helpful?