Skip to main content
Version: 1.0.0

Vanilla HTML Examples

Use the web component for framework-free integration.

When to choose this path​

  • You want no framework dependency
  • You need embeddable editor widgets
  • You want simple CDN-based adoption
  • You need quick QA harness pages

Core bundle vs full bundle​

Core bundle​

  • Smaller payload
  • Good for basic formatting and editing

Full bundle​

  • Broader plugin and toolbar coverage
  • Better for advanced authoring workflows

Quick start (CDN)​

<script type="module" src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.css" />

<editora-editor
  plugins="bold italic underline history"
  toolbar-items="bold italic underline | undo redo"
  height="320"
></editora-editor>

Runtime config example​

<editora-editor id="editor" theme="dark"></editora-editor>
<script>
  const editor = document.getElementById("editor");
  editor.setConfig({
    autosave: { enabled: true, intervalMs: 5000, storageKey: "doc-1" },
    security: { sanitizeOnPaste: true, sanitizeOnInput: true },
    performance: { debounceInputMs: 100, viewportOnlyScan: true },
    accessibility: { enableARIA: true, keyboardNavigation: true, checker: false },
  });
</script>

Validation checklist​

  • Toolbar commands operate on focused editor
  • Theme styles apply to dialogs and sidebars
  • Placeholder/content behavior is correct on empty/non-empty states
  • Readonly mode blocks mutations

API Surface​

  • Custom element API (<editora-editor>)
  • Attribute-driven configuration
  • Runtime config updates via setConfig

Config Matrix​

Config PathPurpose
AttributesInitial setup (plugins, toolbar, theme)
setConfig(...)Runtime updates (autosave/security/performance/accessibility)
CSS importsTheme and visual behavior

Validation Checklist​

  • Initial attribute config renders expected UI/features
  • Runtime updates apply without remount issues
  • Multi-instance pages keep config/state isolated
  • Browser support matches target deployment matrix