Editra documentation

Getting started

Add Editra to a page, choose the capabilities you need, and keep the integration surface small.

Install

npm

npm install editra-js

editra-js 1.0.0 is published on npm. Browser scripts and styles use the official Editra CDN.

CDN

<link rel="stylesheet" href="https://cdn.editra.in/v1.0.0/themes/word.css">
<script src="https://cdn.editra.in/v1.0.0/dist/editra.js"></script>
Editra CDN delivery. Use https://cdn.editra.in/v1.0.0/dist/editra.js with https://cdn.editra.in/v1.0.0/themes/word.css. The versioned path keeps production delivery deterministic.

Hello World

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

    const editor = await Editra.init({
      selector: "#editra-editor",
      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