Edra

Created by Tsuzat

Last updated October 8, 2025

About This Template

Edra is a fully controllable rich text editor specifically designed for Svelte developers, built with Tiptap and offering extensive customization through flexible UI options and comprehensive formatting tools. The MIT-licensed editor provides rich text editing with markdown shortcuts, comprehensive formatting (bold, italic, underline), color picking and highlighting, table creation and manipulation, media embedding (images, videos, audio), code blocks with syntax highlighting, slash commands, math and LaTeX support, drag-and-drop functionality, and search and replace capabilities. Built with Svelte, TypeScript, and Tiptap with optional headless or Shadcn-based UI, Edra offers extensive configuration capabilities and seamless integration as a Svelte component. The editor emphasizes developer experience with the ability to add or remove features as needed while maintaining full control over functionality and appearance. Perfect for content management systems built with Svelte, blogging platforms, documentation sites, note-taking applications, or any Svelte project requiring sophisticated rich text editing with complete control over features and customization, Edra demonstrates Tiptap's power within the Svelte ecosystem.

Related Templates

Tremor

Tremor is a React component library featuring 35+ customizable, accessible components designed for building data-rich dashboards and analytics interfaces. Built with React, TypeScript, Tailwind CSS, and Radix UI, it provides pre-built chart components (line, bar, area, donut charts, sparklines), KPI cards, data tables, and layout components that follow accessibility best practices. Like shadcn/ui, Tremor uses a copy-paste approach, letting developers integrate component source code directly into projects for complete customization control. The library handles common dashboard requirements including loading states, error boundaries, empty states, and responsive breakpoints, with each component fully typed and integrating seamlessly with Tailwind CSS utilities. Actively maintained by Tremor Labs with comprehensive documentation at tremor.so and community support via Slack and Twitter, it's perfect for building internal tools, SaaS analytics dashboards, and business intelligence applications by providing battle-tested components for data visualization.

Franken UI

Franken UI is an HTML-first, open-source component library built on UIkit 3 and extended with LitElement, featuring a design aesthetic inspired by shadcn/ui. Written primarily in TypeScript with Tailwind CSS styling, it provides a feature-complete collection of UI components optimized for Svelte and built with Vite. The library emphasizes an HTML-first approach, allowing developers to use components with minimal JavaScript while maintaining modern functionality through web components. Franken UI is currently in Version 2 and actively maintained with a focus on stability and gradual improvements. The MIT-licensed project offers a unique blend of UIkit's robust component foundation with modern web component architecture and shadcn/ui's clean design principles. Perfect for developers seeking HTML-centric components with the flexibility of web components, Franken UI provides a stable, well-maintained alternative for building modern web applications with Svelte, Tailwind CSS, and TypeScript.

Edra

Edra is a fully controllable rich text editor specifically engineered for Svelte developers, built on the powerful Tiptap editor framework with TypeScript. This comprehensive editing solution offers two flexible UI options: a headless mode for complete customization and a shadcn-based interface for rapid implementation. The editor features markdown shortcuts, comprehensive text formatting (bold, italic, underline, strikethrough), color picking and highlighting, table creation and manipulation, media embedding (images, videos, audio), code blocks with syntax highlighting, drag-and-drop functionality, slash commands, and math/LaTeX support. With its bubble menu for quick editing and extensive extensibility, Edra addresses the lack of powerful, Svelte-native rich text editors in the ecosystem. Perfect for building content management systems, note-taking applications, documentation platforms, and any Svelte application requiring sophisticated text editing capabilities, Edra provides developers with a production-ready component that can be easily integrated and customized to match specific application requirements while maintaining full control over functionality and appearance.