CyteEditor

Installation

Prerequisites

  • Node.js 18+
  • npm, yarn, or pnpm

Core Package

The core package is required for all usage:

npm install @cyte-editor/core

Quick Start (Bundle)

For Vue 3 projects that want all features in a single package:

npm install cyte-editor

The cyte-editor bundle includes the core engine, Vue 3 adapter, license SDK, and all Pro plugins. For other frameworks or fine-grained control, use the modular packages below.

Framework Adapter

Install the adapter that matches your framework:

# Vue 3 (requires Vue ^3.3.0)
npm install @cyte-editor/vue3

# Vue 2 (requires Vue ^2.7.0)
npm install @cyte-editor/vue2

# React (requires React ^18 || ^19)
npm install @cyte-editor/react

# Angular (requires Angular ^17 || ^18 || ^19)
npm install @cyte-editor/angular

# Svelte (requires Svelte ^4 || ^5)
npm install @cyte-editor/svelte

# Vanilla JS (no framework, supports IIFE/UMD)
npm install @cyte-editor/vanilla

CSS

Import both the core stylesheet and your adapter's stylesheet in your entry file:

import '@cyte-editor/core/style.css'
import '@cyte-editor/vue3/style.css'  // replace with your adapter package

Each framework adapter ships its own stylesheet that must be imported manually alongside the core stylesheet.

Pro Plugins (Optional)

npm install @cyte-editor/pro-export
npm install @cyte-editor/pro-paste
npm install @cyte-editor/pro-revision
  • pro-export — import/export for Markdown, Word (.docx) & HTML
  • pro-paste — intelligent clipboard handling for Word, Excel, WPS & HTML
  • pro-revision — version snapshots, rich-text diff & scroll-sync compare

Pro plugins require the @cyte-editor/license package and a valid license key:

npm install @cyte-editor/license

See Pricing for license details.

Self-Hosting the Structure Editor (Optional)

By default, the structure editor is hosted on CyteEditor infrastructure — zero configuration. Two assets can be hosted on your own infrastructure instead:

AssetDefault sourceConfig option
Structure editor (iframe app)https://www.cyteeditor.com/structure-editor/structureEditorUrl
Formula stylesheet & fonts (KaTeX)jsDelivr CDNformulaAssetsUrl

Typical reasons to self-host:

  • Intranet or air-gapped environments with no internet access
  • Data-compliance policies that restrict third-party requests
  • Custom domain or CDN control

Download the structure editor bundle

Download the self-hosting bundle: structure-host.zip.

The zip contains a complete static site: index.html, hashed assets/ (including the chemistry engine WebAssembly), a VERSION file (build date + commit), and THIRD-PARTY-NOTICES covering the open-source components inside.

Deploy the bundle

The bundle is fully portable — every asset URL inside is relative, so any static file server works. Unzip the archive and serve the folder as-is.

Nginx

server {
    listen 443 ssl;
    server_name structure.internal.example.com;

    root /var/www/structure-editor;
    index index.html;
}

Other static hosts — Cloudflare Pages, Netlify, S3 + CloudFront, OSS, MinIO: upload the unzipped folder and serve index.html from the URL root you plan to configure.

Requirements:

  • Serve over HTTPS (or localhost). An HTTPS page cannot embed an HTTP iframe — browsers block it as mixed content.
  • Keep the folder layout intact: index.html must sit at the root of the URL you configure.

Point CyteEditor at your copy

Pass structureEditorUrl — the base URL of your deployment, with a trailing slash — through the editor config. All framework adapters accept it the same way:

// Vue 3 / Vue 2 / React / Svelte / Angular — via the config prop
config: {
  structureEditorUrl: 'https://structure.internal.example.com/',
}

// Vanilla JS / core
const manager = CyteEditor.EditorManager.create(el, {
  structureEditorUrl: 'https://structure.internal.example.com/',
})

Self-host the formula assets

Formula rendering pulls a stylesheet and font files from KaTeX's distribution. To keep those requests on your network too, deploy a copy of the KaTeX dist folder (npm pack katex unpacks the same files) and point formulaAssetsUrl at its base URL:

config: {
  formulaAssetsUrl: 'https://assets.internal.example.com/katex/',
}

License note: the KaTeX dist folder does not include the package's LICENSE file. Keep the LICENSE file from the KaTeX package root alongside your deployed copy.

Verify and troubleshoot

Open the structure dialog in the editor. If the drawing canvas loads with its toolbar, the self-hosted copy is working.

SymptomLikely cause
Dialog stuck on "Loading editor…"Your URL is unreachable from the browser — check the network tab for the failing request
Canvas never appears; console shows mixed-content warningsHost page served over HTTP while the editor runs on HTTPS
Iframe refused to loadA CSP frame-src / child-src policy blocks your URL — add your host origin to the allowed list
Blank canvas after an editor upgradeThe canvas copy predates the editor — re-download and redeploy the bundle (see below)

Version compatibility

The structure editor communicates with CyteEditor over a versioned postMessage protocol. When you upgrade @cyte-editor/pro-structure — or a bundle package that includes it — download the bundle again and redeploy it, so both sides speak a compatible protocol version. The VERSION file inside the zip tells you which build you are running.

TypeScript Support

CyteEditor is written in TypeScript and provides full type definitions out of the box. No additional @types packages needed.

Next Steps