📥 Installations Guide

Set up the Editora content authoring ecosystem in your project

Installation

Editora is a modular ecosystem, not just a single editor package. Start with @editora/core, then add @editora/plugins, @editora/themes, and framework-specific wrappers as needed.

This guide shows minimal and full-featured setups for web components and React so you can scale from quick integration to production-ready authoring workflows.

📦 Using npm

Install packages based on your integration type:

# Web component (minimal)
npm install @editora/core

# Web component with theme package (recommended for dark/acme/custom theme overrides)
npm install @editora/core @editora/themes

For React Projects

Install the React wrapper with peer dependencies:

# Minimal runtime
npm install @editora/react @editora/core react react-dom

# Full-featured setup (recommended)
npm install @editora/react @editora/core @editora/plugins @editora/themes react react-dom

Plugin Entry Paths (React)

Choose the plugin import surface based on bundle and feature needs:

  • @editora/plugins → full plugin catalog
  • @editora/plugins/lite → common/core subset
  • @editora/plugins/enterprise → advanced/specialized subset
  • @editora/plugins/<plugin-name> → per-plugin imports

Licensing: Full, lite, and enterprise entry paths are all completely free and customizable.

Enterprise preset includes: Mention, Track Changes, Version Diff, Conditional Content, Data Binding, Content Rules, Citations, Approval Workflow, PII Redaction, Smart Paste, Blocks Library, Document Schema, Translation Workflow, Slash Commands, Spell Check, A11y Checker, Comments, Merge Tag, Template, Media Manager, and Document Manager plugins.

Quick Start

import { createEditor } from '@editora/core';

const editor = createEditor({
  content: '<p>Hello, World!</p>'
});

editor.mount(document.getElementById('editor'));

With React


import { useState } from "react";
import { EditoraEditor } from '@editora/react';

import "@editora/plugins/styles.css";
import "@editora/themes/themes/default.css";
import "@editora/themes/themes/dark.css";
import "@editora/themes/themes/acme.css";
import {
  BoldPlugin,
  ItalicPlugin,
  HeadingPlugin,
  HistoryPlugin
} from '@editora/plugins';

function App() {
  const [content, setContent] = useState('<p>Hello from React!</p>');

  return (
    <div data-theme="acme">
      <EditoraEditor
        value={content}
        onChange={setContent}
        plugins={[
          BoldPlugin(),
          ItalicPlugin(),
          HeadingPlugin(),
          HistoryPlugin()
        ]}
      />
    </div>
  );
}

CRA compatibility note: when using @editora/plugins, import @editora/plugins/styles.css. Keep default.css as the base layer and load dark.css/acme.css as overrides.

Theme Scoping

<div data-theme="light">...</div>
<div data-theme="dark">...</div>
<div data-theme="acme">...</div>

🧶 Using Yarn

Install Editora using Yarn package manager:

# Web component (minimal)
yarn add @editora/core

# Web component with themes
yarn add @editora/core @editora/themes

For React Projects

# Minimal runtime
yarn add @editora/react @editora/core react react-dom

# Full-featured setup
yarn add @editora/react @editora/core @editora/plugins @editora/themes react react-dom

💡 Yarn usage is identical to npm. All other examples in this guide use npm but work the same with Yarn.

🌐 Using CDN

For HTML websites without build tools, use the browser-ready build via CDN:

unpkg CDN


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

jsDelivr 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">

Basic HTML Setup

<!DOCTYPE html>
<html>
<head>
  <title>Editora Web Component</title>
  <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">
  <!-- Optional theme packs -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/themes/themes/dark.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/themes/themes/acme.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline history"
    toolbar-items="bold italic underline | undo redo"
    height="300"
    theme="dark"
    autosave='{"enabled":true,"intervalMs":3000,"storageKey":"doc-1"}'
    security='{"sanitizeOnPaste":true,"sanitizeOnInput":true}'
    accessibility='{"enableARIA":true,"keyboardNavigation":true}'
    performance='{"debounceInputMs":120,"viewportOnlyScan":true}'
  >
    <p>Start typing...</p>
  </editora-editor>
</body>
</html>
✅ Ready to use! No build process needed. Works in all modern browsers.
ℹ️ Web component dependencies: @editora/core is required. Use @editora/themes when you need dark/acme/custom theme CSS packs from npm/CDN.

🔨 Building from Source

Clone the repository and build it locally:

1. Clone Repository

git clone https://github.com/ajaykr089/Editora.git
cd Editora

2. Install Dependencies

npm install

3. Build All Packages

npm run build

4. Link for Local Development

cd packages/core
npm link

# In your project
npm link @editora/core

5. Development Mode

cd packages/core
npm run dev  # Watch mode build

🖥️ System Requirements

Node.js: 16.x or higher
npm: 7.x or higher
Browser: Any modern browser (Chrome, Firefox, Safari, Edge)

📋 Version Requirements by Framework

Framework Min Version Package
React 16.8.0 @editora/react
Vue 3.0.0 @editora/core
Angular 13.0.0 @editora/core
Vanilla JS ES2015+ @editora/core

✅ Verify Installation

Test if the installation was successful:

import { createEditor } from '@editora/core';
console.log(typeof createEditor); // Should print "function"

❓ Troubleshooting

Q: Module not found error?
A: Make sure you've run npm install and the package is listed in your node_modules folder.
Q: Version conflicts with React?
A: Editora supports React 16.8+. If you're using an older version, upgrade React first.
Q: CDN script not loading?
A: Check your internet connection and make sure the CDN URL is correct. Try using a different CDN provider.

📚 Next Steps

Now that you have Editora installed:

  1. Explore Features - Learn about all available features
  2. Read API Documentation - Understand the API
  3. Learn Keyboard Shortcuts - Boost productivity
  4. Check Examples - See working examples
  5. Install Plugins - Add more functionality

Have questions? Join our discussions or report an issue.