Installation

You can add viveEditor to a page with one script from a CDN, or install it from npm and build it with your bundler. This page shows both ways, which packages to choose and which stylesheets to load.

With a CDN script

This needs no build step. Load the stylesheet and the script, then mark a textarea with data-editor:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viveeditor@x.y.z/dist/viveeditor.css" />
<script src="https://cdn.jsdelivr.net/npm/viveeditor@x.y.z/dist/viveeditor.classic.iife.js"></script>

<form method="post">
  <label for="body">Article</label>
  <textarea id="body" name="body" data-editor required></textarea>
</form>

Replace x.y.z with the exact version you use. When the page is ready, the script turns every textarea[data-editor] into an editor with the toolbar and exposes window.ViveEditor. The form posts clean HTML under the textarea’s name. Always sanitize it again on the server.

The script carries basic formatting, lists, alignment and colours, checklists, code blocks (without syntax colouring), tables, find and replace, images (by address, no uploader), video embeds and clean paste from Office. Mentions, emoji, formulas, footnotes, templates and the AI assistant are npm only, and so is the <vive-editor> element.

If your site has a Content Security Policy, read Security and CSP before you go live.

With npm

Everything in one package

The viveeditor package holds the same editor as the CDN script:

npm install viveeditor

import { upgradeAll } from 'viveeditor'
import 'viveeditor/style.css'

upgradeAll()

With a bundler there are no CDN add-ons. To get Word and Markdown in the File menu, pass the converters as loaders; see Open, save and print.

A framework component

React, Vue, Svelte and Angular each have a component package that you install next to viveeditor:

npm install @viveeditor/react viveeditor

Use @viveeditor/vue, @viveeditor/svelte or @viveeditor/angular in the same way. For any page there is also @viveeditor/element, a <vive-editor> form field. Details are on Frameworks.

Only the parts you need

Every feature is a separate package. @viveeditor/core is the engine and has no toolbar; add @viveeditor/ui for one:

npm install @viveeditor/core @viveeditor/ext-basic @viveeditor/ext-list @viveeditor/ui

The full list is on Packages.

Stylesheets

• CDN: viveeditor.css from the same version folder as the script.
• viveeditor and the framework components: import 'viveeditor/style.css' once.
• Angular: add node_modules/viveeditor/dist/viveeditor.css to styles in angular.json.
• Your own selection of packages: @viveeditor/core/style.css, @viveeditor/ui/style.css if you use the toolbar, and the style.css of each extension that has one: ext-code-block, ext-embed, ext-footnote, ext-image, ext-math, ext-mention, ext-search, ext-table and ext-task-list.

import '@viveeditor/core/style.css'
import '@viveeditor/ui/style.css'
import '@viveeditor/ext-table/style.css'

Formulas also need KaTeX’s own stylesheet, katex/dist/katex.min.css.

Requirements

• Node.js 20.19 or newer for your build tools. The npm packages declare it in engines.
• React 18 or 19, Vue 3.5, Svelte 5, or Angular 21 or 22 for the component packages.
• KaTeX 0.18.2 or newer if you use formulas. Older versions are refused.
• PHP 8.4 or newer for viveeditor/sanitizer, and Laravel 12 or newer for viveeditor/laravel.

Pin the version

All npm packages are released together with the same version number, so install every viveEditor package at the same version. For the CDN script, always write the exact version (viveeditor@x.y.z); its add-ons are checked against fingerprints built into that version. Before 1.0 a minor version can contain breaking changes; see Versioning.

Next steps

• Your first editor: textarea, mountEditor or Editor.create.
• Server sanitizing: clean the posted HTML before you store it.