Customizing Extensions

Learn how to modify, add, or configure TipTap extensions and custom Svelte node view components.

1. Modifying Default Extensions

Edra pre-configures standard editing tools globally. To add your own custom TipTap extensions, configure settings, or remove default plugins, edit the following file:

👉 File to modify: src/lib/edra/extensions.ts

2. Custom Svelte Component Views (Node Views)

For complex elements (like Callout, Codeblock, Iframe, or Mermaid), Edra uses Svelte to render and interact with the node view. You can customize the styling and layout of these components:

Shadcn UI Flavor

👉 File mapping: src/lib/edra/shadcn/editor.ts

👉 Components folder: src/lib/edra/shadcn/components/*

Headless UI Flavor

👉 File mapping: src/lib/edra/headless/editor.ts

👉 Components folder: src/lib/edra/headless/components/*

3. Customizing the Toolbar

If you are using the Shadcn UI flavor and want to change, rearrange, or remove buttons on the main toolbar, modify:

👉 File to modify: src/lib/edra/shadcn/components/Toolbar.svelte

4. Typography & Styling

Edra inherits typography styles from your global Svelte application but also supports granular, flavor-specific design customizations (CSS classes, custom CSS variables, and stylesheets).

👉 Learn more here: Typography & Styling Docs