Textarea-backed rich-text editor · MIT

Turn a textarea into a
complete rich-text editor.

FeatherText enhances a normal HTML textarea with a full editing UI while keeping the original field synchronized for forms and application code.

Add formatting, links, media, tables, source editing, themes, localization, autosave, history, find and replace, and a direct JavaScript API without adding runtime dependencies.

Try the editor View examples GitHub

Install available on npm

npm install @misztersoul/feathertext

Published as @misztersoul/feathertext.

Live textarea editor

Form-backed · visual and HTML source modes

Theme Language

Loading the generated editor build…

The demo runs entirely in this page. Your content is not sent to a service.

Inspect synchronized HTML

0runtime dependencies

74Node and JSDOM tests

90browser test executions

12axe accessibility checks

Automated repository evidence for the current Pages build; exact scope is documented separately.

Editor capabilities

Everything needed around the textarea.

FeatherText keeps the simplicity of a normal form field while adding the controls expected from a practical browser editor.

Editing

Rich content controls

Formatting toolbarHeadings, fonts, sizes, bold, italic, underline, strike, colors, alignment, lists, and indentation.
Content elementsLinks, images, videos, tables, blockquotes, code, and horizontal rules.
Visual and source modesEdit rendered content or work directly with synchronized HTML.
History and searchUndo, redo, find, replace, and replace all.

Application integration

Designed for real forms and pages

Textarea synchronizationThe original field remains ready for standard form submission and application reads.
Runtime configurationChange content, themes, toolbar, language, dimensions, and interaction state from JavaScript.
Localization and themesEnglish and Hungarian interfaces, sixteen themes, automatic selection, and custom theme tokens.
Drafts and multiple instancesOptional local autosave and independent editors on the same page.

Textarea-first workflow

Keep the HTML field your app already uses.

Start with semantic form markup, initialize FeatherText, and read or submit the same textarea value. The editor UI is an enhancement—not a replacement for your data flow.

Open the form example →

01
Add a labelled textarea
Keep its `id`, `name`, initial HTML, and form behavior.
02
Initialize FeatherText
Select the toolbar, theme, language, and editor dimensions.
03
Use the normal value
Submit the form or call `getHTML()` when the application needs it.
04
Control it at runtime
Update content and configuration without replacing the field.

Minimal setup

Install, add a textarea, initialize.

Use the npm package with ESM, or load the browser bundle from a CDN. The generated CSS and JavaScript are the only required assets.

app.jsnpm package

import FeatherText from "@misztersoul/feathertext";
import "@misztersoul/feathertext/css";

const editor = new FeatherText("#article-body", {
  theme: "auto",
  language: "en",
  toolbar: [
    "format", "bold", "italic", "underline", "|",
    "link", "blockquote", "|", "ul", "ol", "|",
    "undo", "redo", "source"
  ]
});

Working examples