Edra is a modern, extensible rich text editor built on top of Tiptap specifically for Svelte 5 environments. It leverages the styling and components of shadcn-svelte to provide a beautiful, cohesive, and fully accessible writing experience right out of the box.
Whether you need a Notion-like block editor with drag-and-drop mechanics or a lightweight, headless core, Edra gives you full control over your content.
- Built for Svelte 5: Leverages the power of runes and snippets for high performance and reactive state management.
- Two Variants: Choose between the opinionated, beautiful Shadcn UI flavor, or the unstyled Headless core to bring your own design system.
- Block Mechanics: Native support for drag-and-drop block handles, just like Notion.
- Slash Commands: Type
/to instantly pull up a contextual menu to insert headings, media, tables, and more. - Rich Media & Embeds: Seamlessly upload images, videos, and audio. Paste HTML directly into the editor to embed YouTube, Spotify, and more via our Iframe handler.
- Advanced Extensions: First-class support for Mathematics (KaTeX), Mermaid diagrams, Callouts, and syntax-highlighted Code Blocks.
- Table of Contents: Automatically extract hierarchical headings to render a scroll-spy side navigation.
- AI Ready: Hooks designed specifically for streaming AI completions directly into the editor canvas.
Edra is distributed via the shadcn-svelte registry, meaning the source code is installed directly into your project. This gives you absolute control over the styling and dependencies.
npx shadcn-svelte@latest add https://edra.tsuzat.com/r/edra.jsonFor the unstyled Headless variant, or for more detailed installation options, refer to the Installation Documentation.
Once installed, instantiating the editor is incredibly simple:
<script lang="ts">
import { createEditor, Edra } from '$lib/edra/shadcn/index.js';
import { updateInDB } from '$lib/db';
/**
* [OPTIONAL] Use this function so perform something when content is updated.
* May be save the content somewhere. You can define your own logic here.
*/
const onUpdate = () => {
const content = editor?.getJSON();
updateInDB(content);
};
/**
* [OPTIONAL] Pass an call AI function which takes a prompt, onChunk and onError callbacks
* This function allows you to implement your own AI provider
*/
async function callAI(
prompt: string,
onChunk: (chunk: string) => void,
onError: (error: Error) => void
) {}
const editor = createEditor({
onUpdate,
callAI
});
</script>
<div class="rounded-lg border">
<Edra {editor}>
<Edra.UseAI />
<Edra.Toolbar class="max-w-full! scrollbar-none overflow-x-scroll border-b p-1" />
<Edra.BubbleMenu />
<Edra.Content class="h-150 cursor-auto overflow-y-scroll px-8 py-4 *:outline-none" />
<Edra.DragHandle />
</Edra>
</div>The official documentation contains exhaustive guides on configuring the editor, extracting data (JSON/HTML/Markdown), customizing the UI, and connecting to i18n libraries.
👉 Read the full documentation here
Released under the MIT License.