Live TypeScript demos

Explore real editor setups, not just one generic sample.

Every page here boots the typed package, loads the synced runtime assets, and focuses on a practical integration scenario your team can actually reuse.

Package-backed

All examples use the TypeScript wrapper.

These demos are driven by the compiled package in this site, so the examples stay aligned with the download.

Scenario coverage

Compact, full, read-only, localized, and template workflows.

Instead of one editor page, you can compare multiple configurations side by side and open the ones you need.

Portable setup

The sample pages also work in the downloadable examples pack.

Asset paths are package-friendly, so the demo set can be unpacked and explored locally.

Interactive editor

TS RichTextEditor browser demo

Typed output

Current HTML

Loading editor

import { createRichTextEditor } from "/assets/ts-rich-text-editor/dist/index.js";

const editor = await createRichTextEditor("#demo-editor-host", {
  toolbar: "full",
  skin: "default",
  height: "540px",
  showTagList: true,
  showStatistics: true
}, {
  basePath: "/assets/ts-rich-text-editor/dist/richtexteditor"
});

Sample library

Open focused demos for different TypeScript integration patterns.

These pages all use the same packaged TypeScript wrapper, but each one highlights a different setup so teams can compare how the editor behaves in compact, read-only, textarea-backed, and custom-styled modes.

Filter demos

Showing all 8 demos

Full toolbar

Desktop-oriented editing with the full toolbar, statistics, and tag list enabled.

toolbar: full resize: both

Open demo

Basic toolbar

Compact authoring mode for notes, replies, and smaller admin forms.

toolbar: basic compact

Open demo

Read-only viewer

Document viewing mode with the same rendering surface but editing disabled.

readOnly review ready

Open demo

Textarea binding

Progressive enhancement path for pages that still start from a plain textarea element.

textarea host migration

Open demo

Custom styling

Inline editor body styling for branded, reader-oriented, or preview-specific authoring experiences.

custom css preview mode

Open demo

Email newsletter

Author a promotional email layout with sections, calls to action, and prebuilt structure.

template content marketing

Open demo

Knowledge base article

Long-form documentation editing with headings, steps, callouts, and code-friendly formatting.

docs workflow long form

Open demo

French localization

Load the editor with a non-English language pack to evaluate localized toolbar and UI behavior.

language: fr localized ui

Open demo

Who this is for

Use these demos when you are comparing different editor categories.

If you are evaluating against TinyMCE, CKEditor, or Froala, these demos help answer whether the visual editing workflow and download-first setup are a better fit. If you are comparing against Tiptap, Lexical, Slate, or ProseMirror, they help show what you gain from a ready-to-use WYSIWYG surface instead of a framework-first editor toolkit.

Choose this route when

You want users editing immediately.

Open the demos if your priority is evaluating the actual authoring experience instead of building an editor shell first.

Not the best fit when

You need a blank editor framework.

Headless frameworks still win when your main goal is designing a custom editor product from first principles.

Demo coverage

Compare compact, advanced, localized, and content-specific setups in one place.

full toolbar basic toolbar read-only viewer custom styling email template knowledge base french localization textarea migration

Need the files?

Download the package, source, or full examples pack after you test the live demos.

The same TypeScript wrapper shown on this page is available as a packaged build and a portable examples archive.

Go to downloads Get test drive zip