DHTMLX RichText — JavaScript Rich Text Editor (GPL Edition)

@dhtmlx/richtext is a JavaScript WYSIWYG rich text editor with HTML and Markdown input/output, a fully configurable toolbar, classic and document layout modes, image support, export to DOCX and PDF, DOCX import, and AI-ready content editing.

It is a standalone widget that works with plain JavaScript and integrates with React, Angular, Vue, and Svelte.

It is ideal for prototyping content editing interfaces, embedding a rich text editor in open-source applications, and evaluating DHTMLX RichText's core features under the GPL v2 license.

License

This edition of DHTMLX RichText is licensed under the GNU General Public License v2.0 (GPL v2).

You can redistribute this package and/or modify it under the terms of the GPL v2.

GPL v2 requires that any project using this package also be open source under a GPL-compatible license.

You may NOT use this package in closed-source, proprietary, or commercial applications without a separate commercial license. For commercial use, please obtain a commercial license of DHTMLX RichText.

This package is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GPL v2 for more details.

Using DHTMLX RichText in a commercial or closed-source project?

You need a commercial license. DHTMLX offers Individual, Commercial, Enterprise, and Ultimate license tiers.

• Compare licenses and pricing
• Download a free 30-day trial of DHTMLX RichText
• Download 30-day trial versions of all DHTMLX components
• Contact us regarding licensing: info@dhtmlx.com

Copyright © 2026 XB Software Ltd.

What is DHTMLX RichText

DHTMLX RichText is a JavaScript WYSIWYG rich text editor for embedding content editing into web applications. It supports parsing and serialization of content in HTML and Markdown formats, provides a fully configurable toolbar and an optional menubar, and offers two layout modes: classic (toolbar-anchored) and document (page-style with A4/A5/A6/A7 sizes). Users can insert and resize images, apply rich text formatting, and export content to DOCX or PDF directly from the editor. The component exposes a clean JavaScript API for setting and getting content, reading document statistics, and responding to editing events, making it straightforward to integrate with AI services for content suggestions and autocompletion.

DHTMLX RichText is a standalone component. It is not part of the DHTMLX Suite library, is distributed and licensed separately, and does not require Suite as a dependency.

Use this GPL edition when you want to prototype a content editing feature, integrate a rich text editor into an open-source project, or evaluate DHTMLX RichText before obtaining a commercial license.

Quick Start

Install the package, import the styles, and initialize the editor in a container element.

Install

npm install @dhtmlx/richtext

Include in your project

import { Richtext } from "@dhtmlx/richtext";
import "@dhtmlx/richtext/dist/richtext.css";

Or with script tags pointing to local codebase files:

<script type="text/javascript" src="./codebase/richtext.js"></script>
<link rel="stylesheet" href="./codebase/richtext.css" />

The CSS import is required for default RichText styling and layout.

Initialize

import { Richtext } from "@dhtmlx/richtext";
import "@dhtmlx/richtext/dist/richtext.css";

const editor = new Richtext("#richtext_container", {
    layoutMode: "classic", // "classic" or "document"
    menubar: false, // show/hide the menubar (hidden by default)
    toolbar: [
        "undo",
        "redo",
        "separator",
        "bold",
        "italic",
        "underline",
        "strike",
        "separator",
        "font-family",
        "font-size",
        "separator",
        "text-color",
        "background-color",
        "separator",
        "bulleted-list",
        "numbered-list",
        "separator",
        "link",
        "image",
        "separator",
        "fullscreen",
        "mode",
    ],
});

// Set initial HTML content
editor.setValue("<h1>Hello, DHTMLX RichText!</h1><p>Start editing here.</p>");

Add a container element to your HTML:

<div id="richtext_container" style="width: 100%; height: 600px;"></div>

See a live demo

Basic Usage — DHTMLX RichText

Getting and setting content

const editor = new richtext.Richtext("#richtext_container", {
    layoutMode: "document",
});

// Set content in HTML format
editor.setValue(
    "<h2>Weekly Report</h2><p>This week we completed the migration.</p>"
);

// Get content as HTML
const html = editor.getValue();

// Set content in Markdown format
editor.setValue(
    "## Weekly Report\n\nThis week we completed the migration.",
    "markdown"
);

// Get content as Markdown
const markdown = editor.getValue("markdown");

Reacting to content changes

editor.events.on("change", function () {
    const content = editor.getValue();
    // auto-save or sync content to your backend
    saveToServer(content);
});

The change event fires on every content modification. Use getValue() without arguments to retrieve HTML, or pass "markdown" to retrieve Markdown.

DHTMLX RichText Features

DHTMLX RichText includes the following features in the GPL edition.

This table highlights key features. For the complete and up-to-date feature list, see the DHTMLX RichText documentation.

Framework Integration

DHTMLX RichText works with popular front-end frameworks including React, Angular, Vue, and Svelte. These integration guides apply to both the GPL edition and the commercial editions of DHTMLX RichText.

• React integration guide
• Angular integration guide
• Vue.js integration guide
• Svelte integration guide

Documentation and Resources

• Product page – overview, screenshots, and key features.
• Documentation – getting started, guides, and configuration options.
• API reference – full JavaScript API.
• Live demos and samples – interactive examples of DHTMLX RichText features.
• Support forum – community Q&A and discussions for DHTMLX RichText.