Tailwind Resources Logo Tailwind Resources
Edra screenshot

Edra

Author Avatar Theme by Tsuzat
Updated: 18 May 2025
369 Stars

Fully controllable and best rich text editor for Svelte Developers

Github Live Preview

Categories

Svelte Vite Shadcn ui

Overview:

ShadEditor is a rich text editor designed for Svelte with ShadCN UI, utilizing tiptap for seamless text editing. It provides a ready-to-use editor with features like rich text formatting, color pickers, tables, images, videos, code blocks, and more. The package is recommended to be installed using the CLI for easy setup and flexibility.

Features:

  • Rich Text Editing: Utilize markdown shortcuts for quick formatting.
  • Color Pickers: Choose text color or highlight with ease.
  • Tables: Create, edit, and manage tables effortlessly.
  • Images and Videos: Easily add and customize visuals into your content.
  • Code Blocks: Syntax highlighting with support for multiple languages.
  • Blockquotes and Links: Enhance your text with blockquotes and links.
  • Lists and Search: Manage lists and perform text search within the editor.
  • Drag and Drop: Rearrange content with auto joiner feature.

Installation:

To install ShadEditor, follow these steps:

  1. Ensure ShadCN is installed in your Svelte project.
  2. Add Tailwind Typography for text styling.
  3. Optionally add Lucide Icons and Mode Watcher.
  4. Use the CLI for a seamless installation process.

Summary:

ShadEditor is a feature-rich text editor for Svelte, simplifying the process of integrating a tiptap editor with ShadCN UI. With an array of formatting options, color pickers, media support, and more, ShadEditor provides a comprehensive solution for text editing needs. By following the recommended installation process using the CLI, users can quickly set up the editor for their projects while retaining flexibility for customization.