Edra

screenshot of Edra
svelte
vite
tailwind
shadcn-ui

Fully controllable and best rich text editor for Svelte Developers

Overview

Edra is a highly functional rich text editor designed specifically for Svelte developers, built on the flexible Tiptap framework. It combines ease of use with advanced features, allowing developers to easily incorporate a beautiful UI component into their projects. Whether you're working on a simple note-taking app or a more complex content management system, Edra provides a robust solution for rich text editing.

What sets Edra apart is its extensibility and powerful data output capabilities, catering to a wide variety of formatting needs. From markdown shortcuts to comprehensive media embedding options, this editor aims to simplify the content creation process while enhancing the user's creative experience.

Features

  • Rich Text Editing with Markdown Shortcuts: Easily format your text using markdown for quick, efficient editing.
  • Comprehensive Formatting Options: Includes bold, italic, underline, strikethrough, and various text colors, ensuring robust text presentation.
  • Table Creation: Create, edit, and manage tables effortlessly, with options to add, delete, merge, and split rows and columns.
  • Media Integration: Add images, videos, and audio from URLs or directly from your device, complete with resizing and alignment features.
  • Code Block Support: Syntax highlight with lowlight for multiple programming languages, and includes options for dark and light modes.
  • Drag and Drop Functionality: Easily manage nodes in the editor with a user-friendly drag and drop feature.
  • Math and LaTeX Support: Seamlessly integrate mathematical equations and LaTeX with minimal effort.
  • UI Options: Choose between a headless UI or a shadcn-based UI to meet your project's specific requirements.

Overall, Edra offers a powerful, intuitive solution that simplifies rich text editing for Svelte developers.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

shadcn-ui
Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.