JavaScript editor via ESM

ESM integration lets you use the ViText JavaScript editor in a bundled application: import the class and styles, then export HTML from the visual document.

The @vitext-ru/editor@1.0.0-beta.6 package is published on npm with ESM, TypeScript types and CSS. Core is installed automatically. For integration without a bundler, use the browser archive.

Current availability

Install the prerelease using the beta tag:

npm install @vitext-ru/editor@beta

For a fixed version, use @vitext-ru/editor@1.0.0-beta.6. Core will be installed automatically. Import the editor and @vitext-ru/editor/style.css together. Importing ViText does not require Vue or React.

Mount and await readiness

Use an HTMLElement or selector as target. HTML and JSON without CSS apply before setContent returns its Promise. Await initial Markdown or CSS via whenReady; await later asynchronous operations before consuming their result. The browser needs the lazy source and codec resources from the same build.

Ownership

Keep the instance in your component/application. A change callback reports the applied document; it is not a server write. Dispose listeners you create outside ViText and destroy the instance before a new mount.

Framework integration

Server-rendered applications mount only in the browser. Guard asynchronous imports against unmounting and do not reuse a destroyed instance. Vue and Nuxt, lifecycle.

import ViText from '@vitext-ru/editor';
import '@vitext-ru/editor/style.css';

const editor = new ViText('#editor', {
  content: '<p>Hello!</p>', language: 'en', preset: 'pro'
});
await editor.setContent('# Heading', { format: 'markdown' });
console.log(editor.getHTML());

const host = document.querySelector<HTMLElement>('#editor')!;
const editor = new ViText(host, { content: '<p>Документ</p>' });
await editor.whenReady();
editor.destroy();