Editora - Webcomponent Demo

1️⃣ Basic Usage (TinyMCE-Style)

Simple drop-in replacement with zero configuration:

<!-- Core Bundle (~56KB) - Recommended -->
<script type="module" src="dist/webcomponent-core.js"></script>

<!-- Full Bundle (~60KB + lazy chunks) - All plugins -->
<!-- <script type="module" src="dist/webcomponent.js"></script> -->

<editora-editor height="400">
 <p>Start typing...</p>
</editora-editor>

Welcome to Editora!

This is a framework-agnostic rich text editor with 39 native plugins.

Try these features:

Bold, italic, underline formatting
Headings and block quotes
Lists (ordered and unordered)
Text colors and highlighting
Links, images, and tables

Click "Get Content" to see HTML...

2️⃣ Custom Configuration

Configure via attributes or JavaScript API:

<rich-text-editor
 height="300"
 theme="dark"
 placeholder="Start writing..."
 toolbar="undo redo | bold italic | link image"
 plugins="bold italic underline link image"
></rich-text-editor>

3️⃣ JavaScript API (TinyMCE-Style)

Programmatic control via the Editora global object:

// Get editor API
const editor = document.querySelector('#editor3').getAPI();

// Or use TinyMCE-style init
const editor = Editora.init('#editor3', {
 height: 400,
 plugins: 'bold italic link'
});

Content controlled via JavaScript API

API logs will appear here...

4️⃣ Multiple Editors on One Page

Run multiple independent editor instances:

Editor A

Editor A content

Editor B

Editor B content

Comparison results will appear here...

Features

Framework Agnostic

Works with React, Vue, Angular, Svelte, or vanilla JS

Lightweight

97 KB minified, 24 KB gzipped - 91% smaller than before!

39 Native Plugins

All plugins are native TypeScript with zero React deps

Customizable

Custom themes, toolbars, and plugin configurations

♿ Accessible

ARIA-compliant with keyboard navigation support

Web Component

Standard custom element with declarative API

Available Plugins (39 Total)

Loading plugins...

Editora Web Component - Production Ready!