Installation
How to set up Edra in your Svelte 5 application.
Edra is distributed as source code that you install directly into your project. This means you have full control over the code, styling, and dependencies. You can choose between two flavors: Shadcn UI and Headless UI.
1. Shadcn UI Variant (Recommended)
This variant comes fully styled using Tailwind CSS and components from shadcn-svelte. It includes a beautiful toolbar, menus, dialogs, and a responsive layout.
Registry Installation
Use the shadcn-svelte CLI to pull Edra directly from the remote registry. This is the
cleanest way to install the editor and its dependencies.
Alternatively, you can initialize the editor via the Edra CLI:
2. Headless UI Variant
If you want to build your own custom UI and don't want to use Tailwind CSS or shadcn-svelte, use the Headless variant. It provides the logical core, extensions, and the raw TipTap
wrapper without any opinionated UI components.
Bring Your Own Styles
The Headless flavor utilizes custom CSS tokens (--edra-*) for basic structural
styling. You will need to build your own toolbar and menus.
Basic Setup
Once installed, you can import createEditor and the Edra component into
your Svelte pages. The `createEditor` function takes care of assembling the extensions and binding
event handlers.