Typed rich text editing

RichTextEditor for TypeScript applications.

TSRichTextEditor wraps the shipping browser runtime with typed loader utilities, typed editor options, and a real TypeScript build pipeline, so teams can adopt the editor in modern frontend stacks without falling back to any.

Built on the proven RichTextEditor browser runtime and packaged for modern TypeScript applications.

Download Package Open Live Demos

Package: Typed .tgz build
Runtime: Synced from shipping JS editor
Developer UX: Declarations, loader, demo, source zip

TypeScript-first wrapper 0.1.0

Typed setup without runtime guesswork.

The wrapper keeps the proven editor runtime, adds typed creation helpers, and makes it easier to wire assets, config, and events in modern frontend stacks.

import { createRichTextEditor } from "ts-rich-text-editor";

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

typed options typed instance methods asset loader downloadable runtime

Homepage editor preview

Try the editor here without squeezing it into a sidebar.

Start here

Pick the fastest way to evaluate the TypeScript edition.

Some teams want to test the live editor right away, some want examples they can open locally, and some just want the package. This gives each path a clear next step from the homepage.

Open live demos

Compare multiple integration scenarios, from full toolbar editing to localization and template-driven content.

8 examples browser ready

Browse demos

Download test drive

Get a standalone local demo package with one ready-to-run page and the required editor assets included.

test locally standalone zip

Download test drive

Download examples

Grab the portable examples pack if you want a self-contained bundle with assets, scripts, and sample pages.

portable zip local evaluation

Download examples

Install package

Start from the compiled TypeScript tarball when your next step is integrating the editor into an application.

.tgz package typed api

Open downloads

What ships

A practical TypeScript conversion, not just a folder rename.

This package keeps the proven browser runtime intact and makes it usable from TypeScript with clean imports, declarations, runtime asset sync, and a demo that boots the editor through the typed API.

Typed package surface

createRichTextEditor(...), TypeScriptRichTextEditor, typed events, typed config interfaces, and typed browser-global declarations all ship from the package build.

Runtime asset sync

The published TypeScript package keeps richtexteditor runtime assets in sync from the JavaScript project so there is one trusted editor runtime, not two drifting versions.

Live demo workflow

The included demo proves the wrapper is real by loading the editor, reacting to change events, and rendering typed HTML output directly in the browser.

Compared with the market

Built for teams that want a real WYSIWYG editor with a cleaner TypeScript story.

The editor landscape spans commercial drop-in suites, headless editing frameworks, and block-first JSON editors. This TypeScript edition is positioned for teams that still want a traditional visual editor experience, but do not want to give up typed integration and local ownership of the runtime assets.

Against drop-in suites

Editors like TinyMCE, CKEditor, and Froala compete on breadth, premium workflows, and polished WYSIWYG experiences. TS RichTextEditor answers with a mature visual editor workflow plus a simpler downloadable TypeScript wrapper and bundled runtime path.

Against headless frameworks

Tools like Tiptap, Lexical, ProseMirror, and Slate are powerful when you want to build your own editor UX from the ground up. TS RichTextEditor is the better fit when you want toolbar-first editing without building every interaction yourself.

Against block editors

Block-first tools like Editor.js focus on structured JSON output and modular content blocks. TS RichTextEditor stays focused on classic document-style HTML authoring, previewing, and editing workflows.

Feature fit

What this TypeScript edition emphasizes.

Instead of trying to cover every workflow at once, the package focuses on the capabilities teams usually need first when evaluating a TypeScript-ready WYSIWYG editor.

Traditional visual editing

Full toolbar authoring, rich HTML output, read-only viewing, and classic document-style editing patterns.

wysiwyg html output

Typed integration layer

Typed creation helpers, typed config surfaces, typed event wiring, and a package shape that fits TypeScript workflows.

typescript typed api

Practical local evaluation

Standalone test drive, downloadable examples, and a source bundle so teams can move from trial to inspection quickly.

test drive source included

Where It Fits Fastest

Strongest match for teams that want to move from evaluation to integration quickly.

This TypeScript edition is especially useful when your project needs a classic visual editor, a local runtime you can inspect, and less editor-shell work before users can start writing.

Internal tools and admin apps

Great for dashboards, back offices, CMS screens, and knowledge management tools where a full WYSIWYG surface matters more than building a custom editor product.

Migration-heavy projects

Helpful when teams are replacing textarea-based forms or older JavaScript integrations and want a smoother TypeScript-friendly adoption path.

Download-first evaluations

Best for organizations that want a local package, examples zip, and standalone test drive before committing engineering time to a larger integration.

HTML-centric publishing

Strong fit when your storage, preview, and publishing flow still revolves around HTML instead of a block JSON model or a custom editor schema.

Quick comparison

A simpler way to understand where this editor fits.

This is a practical comparison for teams choosing between a visual editor, a framework-first editor stack, or a block-based content model. It is meant to speed up evaluation, not flatten every editor into the same shape.

Questions teams usually ask during evaluation.

Why not just use a headless framework?

If your team wants to design a custom editor product, a headless framework may still be the right choice. This package is for teams that want users editing quickly without building the whole editor shell first.

Why provide a test drive zip?

Because many evaluations stall before integration starts. The standalone test drive lets users download, serve, and test the editor locally with almost no setup.

What is the main TypeScript value?

The wrapper gives teams typed creation, typed configuration, typed event wiring, and a clearer runtime-loading path around the browser editor assets.

Who is this package best for?

Teams that still want classic rich HTML authoring, but want the evaluation, packaging, and integration experience to feel more natural in TypeScript projects.

Adoption path

Use it in modern frontend stacks without guessing the API.

This site is the TypeScript track beside the JavaScript editor. It gives teams a place to evaluate the package, open the live demo, and download both the packaged build and the full source bundle.

Package tarball for direct installation or registry publishing
Source zip for debugging, extension work, and repo-level builds
Live browser demo backed by the same built files

Install or unpack

Use the package download or the source zip, depending on whether you need consumption or extension.

Load the runtime

Point the loader at the bundled richtexteditor assets and create the editor through the typed wrapper.

Integrate with confidence

Keep editor setup and event wiring inside TypeScript instead of carrying raw browser globals everywhere.

Coverage

Built for evaluation, migration, and production-minded integration.

typed package api runtime asset sync standalone test drive portable examples zip localized demo textarea migration path full source bundle

Ready to explore?

Open the demos, inspect the package, or download the examples bundle.

The site gives you three practical ways to evaluate the TypeScript edition, depending on whether you want to browse, build, or integrate.

View all demos Open downloads