Textarea-backed rich-text editor · MIT

A little lighter.
A lot more expressive.

Beautiful writing. Seamless integration.

A thoughtful rich-text editor for your next project. Just a textarea, a few lines of code, and room for your ideas.

Try the editor View examples GitHub

Make yourself at home.

A real editor. Ready for your words.

Start with

Customize editor

Theme Language

Loading the generated editor build…

Your words stay in this browser. Expand to focus. Press Escape to return.

Inspect synchronized HTML

Install available on npm

npm install @misztersoul/feathertext

Published as @misztersoul/feathertext.

Zeroruntime dependencies

Nativetextarea and form flow

16built-in themes

2built-in languages

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