Typography & Styling
A guide to the styling architecture of Edra, explaining how the editor inherits, scopes, and structures typography, layout, and colors.
1. The Global Inheritance Model
Unlike other editors that sandbox their document canvas inside an iframe or isolate it under a shadow root, Edra renders standard semantic HTML directly inside Svelte's DOM.
As a result, Edra naturally **inherits** all global tag styles configured in your app's global stylesheets, such as:
- Font families, weights, and sizes.
- Line heights and letter spacing.
- Link colors, transitions, and underline details.
For example, in the documentation page layout, the styles for h1, p,
and a are configured globally:
2. Scoping Styles with Tiptap (.tiptap)
While global styles provide the baseline, TipTap wraps the entire editable document inside a
container element with the class .tiptap.
All editor-specific margins, layout rules, placeholders, and node alignments are targeted under
the .tiptap scope to ensure they only affect content inside the editor and do not leak
into the rest of the application.
3. Customizing the Shadcn UI Flavor
The Shadcn UI flavor is built with Tailwind CSS and uses standard tailwind theme variables (like hsl(var(--primary)) or var(--color-border)).
👉 File to modify: src/lib/edra/shadcn/editor.css
Since it binds to Tailwind's theme variables, it naturally matches your light/dark mode switcher and custom colors automatically. You can edit this file to customize:
- Content Width: Modify
.tiptap { max-width: ... }to set the editor margin-inline layout. - Node views: Customize elements like codeblocks, images, callouts, and table cells.
4. Customizing the Headless UI Flavor
The Headless UI flavor is designed to be completely standalone and framework-agnostic. It does
not depend on Tailwind CSS variables. Instead, it utilizes its own custom token variables
prefixed with --edra-*.
👉 File to modify: src/lib/edra/headless/editor.css
You can fully customize the look and feel of the Headless UI editor by modifying the tokens in the stylesheet.
| Token | Description | Default Light Value | Default Dark Value |
|---|---|---|---|
--edra-ink | Primary text color | #171717 | #f5f5f5 |
--edra-body | Secondary/body text color | #4d4d4d | #a1a1a1 |
--edra-mute | Subtle/muted text | #888888 | #666666 |
--edra-canvas | Editor background | #ffffff | #0a0a0a |
--edra-canvas-soft | Floating panels background | #fafafa | #121212 |
--edra-border | Border/separator color | var(--edra-hairline) | var(--edra-hairline) |
--edra-font-sans | Main font family | Geist, Inter, sans-serif | Geist, Inter, sans-serif |
--edra-font-mono | Code/mono font family | Geist Mono, monospace | Geist Mono, monospace |
To override these tokens for light and dark themes: