Introduction

Edra is a thoughtfully designed, premium rich text editor built for Svelte 5 and styled with shadcn-svelte.

Why Edra?

Building rich text editors is notoriously difficult. Edra bridges the gap by wrapping TipTap (a headless, highly-extensible editor framework) with a polished, developer-friendly interface that aligns perfectly with the Svelte ecosystem.

Flavors & UI Types

Edra provides two variants to match your workflow requirements:

• Shadcn UI Type: Pre-styled using standard shadcn-svelte components and Tailwind v4. Fully customizable and fits right into your design system.
• Headless UI Type: Provides the core rich text editor logic and extensions without UI templates or predefined styling layout structures.

Key Features

• Extensible by Default: Easily add, customize, or swap TipTap extensions to meet your editor requirements.
• Svelte 5 Runes: Built on Svelte 5 with reactivity driven by runes, providing incredible performance and simple reactivity patterns.
• Shadcn UI & Tailwind CSS v4: Fully integrated with modern styling constructs, variables, and dark-mode watchers.
• AI-Assisted (Optional): Native hooks to integrate custom AI providers for inline streaming autocompletion and prompts.
• Pre-configured Powerhouses: Out-of-the-box support for LaTeX formulas (KaTeX), task lists, drag handles, tables, and typography controls.

How to read the docs

If you are new to Edra, we recommend starting with the Installation guide. If you are looking to customize your editor, check out the various Extensions & Plugins documented in the sidebar.