Install

npm

npm install editra-js

editra-js 1.0.1 is published on npm with the complete runtime, security layer, UI, plugins, themes, icons, and fonts.

Verified npm CDN files

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editra-js@1.0.1/themes/word.css">
<script src="https://cdn.jsdelivr.net/npm/editra-js@1.0.1/dist/editra.js"></script>

Important: these version-pinned jsDelivr URLs are live package entry files, but the two tags alone are not a complete v1.0.1 installation. Editra securely lazy-loads files from core/, plugins/, ui/, vendor/, and assets/. For the full editor, copy the npm package to your own origin and use the complete setup below.

Hello World

<div id="editra-editor"></div>
<link rel="stylesheet"
  href="/vendor/editra/themes/word.css">
<script src="/vendor/editra/dist/editra.js"></script>
<script>
  (async function () {
    "use strict";

    const editor = await Editra.init({
      selector: "#editra-editor",
      baseUrl: "/vendor/editra/",
      theme: "Word",
      plugins: ["formatting", "table", "image"],
      toolbar: "foreColor highlighter | table image | undo redo"
    });
    globalThis.editraEditor = editor;
  })();
</script>

Initialization patterns

Recommended

Await and retain the instance

Wait for the core, security layer, UI, styles, and eager plugins before using the editor API. Keep the returned instance for commands, content access, lifecycle cleanup, and error handling.

(async function () {
  "use strict";

  const editor = await Editra.init({
    selector: "#editor",
    plugins: ["formatting", "table", "image"]
  });

  globalThis.editraEditor = editor;
})();

Limited use

Fire-and-forget initialization

This starts the same asynchronous work but does not wait for readiness or retain the instance. Use it only for tiny static demos that never call the editor API afterward.

Editra.init({
  selector: "#editor",
  plugins: ["formatting", "table", "image"]
});

Best default: use await Editra.init(...) for production applications, SPAs, dashboards, forms, CMS products, enterprise systems, tests, and any integration that reads content, executes commands, handles errors, or destroys the editor. In a <script type="module">, top-level await can replace the async wrapper.

Live setup

Edit below, then inspect the configuration used to initialize it.

Run locally

Use an HTTP server instead of opening files with file://; browser module and resource policies can block local cross-file loading.

npx serve site

Getting started

Hello, Editra!