Quick start

Add the ViText JavaScript WYSIWYG editor to a page without a bundler. Import Markdown, format text and export HTML.

ViText is a content editor: you format text visually (WYSIWYG), and your application receives HTML. Community is available under MIT; basic editing requires no React, Vue or ViText server. This quick start uses the ready-to-use browser distribution.

Prepare your environment

Download the ViText Community browser build and extract the entire archive. Use the SHA256 checksum to verify the file. Browser integration requires no GitHub access, npm or bundler; ESM is available via npm install @vitext-ru/editor@beta (guide).

The archive contains vitext/ with four browser resources, example/index.html, RU/EN guides, LICENSE and THIRD_PARTY_NOTICES.md. Serve the extracted folder over HTTP/HTTPS and open example/index.html?lang=en. Opening via file:// is not supported.

If Python 3 is installed, run this from the extracted folder:

python3 -m http.server 8080 --bind 127.0.0.1

Open http://127.0.0.1:8080/example/index.html?lang=en.

Connect the editor

Copy the entire vitext/ folder into your application's static assets. The snippet below uses /vitext/. Preserve LICENSE and THIRD_PARTY_NOTICES.md when redistributing. Keep source.js and codecs.js next to the main file so HTML/CSS and Markdown work.

Apply Markdown and read HTML

Create the instance, await Markdown import, then read getHTML(). HTML/JSON without CSS are applied immediately; initial Markdown/CSS requires whenReady(). Applied changes arrive through onChange. Your application persists JSON and CSS together; the editor does not save to a server.

Clean up

Call destroy before unmounting. All Simple/Base/Pro presets are part of Community; Pro here is not a paid plan. The library has no required UI framework or server. See script integration, storage and working examples.

<link rel="stylesheet" href="/vitext/vitext.css">
<div id="editor"></div>
<script src="/vitext/vitext.iife.js"></script>
<script>
  const editor = new ViText.ViText('#editor', {
    preset: 'pro',
    language: 'en',
    content: '<p>Your first document</p>'
  });
</script>

async function importMarkdown() {
  await editor.setContent('# Hello\n\n**Text** from Markdown', {
    format: 'markdown'
  });
  console.log(editor.getHTML());
}
importMarkdown().catch(console.error);

const unsubscribe = editor.on('change', ({ html, css, json, revision }) => {
  console.log({ html, css, json, revision });
});
unsubscribe();
editor.destroy();