What is NABI NOTE? ​

nabi-note is an open-source WYSIWYG editor. It runs in the browser and ships under the MIT license, so it fits personal and commercial projects alike.

It works the same way in Vue, React, or plain JavaScript — you wire up two things: the html going in (html) and the callback coming out (onChange).

Values travel one path in and one path out ​

What goes into the editor and what comes out both pass through the same filter.

host → sourceHtml / setHtml() → [ filter ] → flutter
                                 ↓
host ← onChange(outputHtml) / getHtml() ← [ filter ]

So getHtml() never hands back the incidental markup a browser leaves behind while editing. The filter is idempotent, which means feeding an onChange html straight back into setHtml() does nothing at all.

Every format is a wing ​

What other editors call a "plugin", this project calls a wing. The core itself only knows paragraphs (p), line breaks (br), and plain text. Headings, lists, tables, and bold are all wings.

Markup you did not register gets unwrapped and falls through as plain text.

import { nabi, bold } from 'nabi-note'

nabi.filter('<p><b>bold</b> <em>italic</em></p>')
// '<p>bold italic</p>'          — no wings at all

nabi.filter('<p><b>bold</b> <em>italic</em></p>', { wings: [bold()] })
// '<p><b>bold</b> italic</p>'   — only bold survives

Nothing outside the allow-list survives. The list of wings you registered is the answer to "what can this editor produce?"

Constraints ​

The following is a constraint the project holds itself to, not a selling point. It exists because this editor gets used in a Vue project and a React project at the same time, on different version combinations.

• Framework-agnostic — it never imports React or Vue; only plain DOM APIs.

Next ​

• How it works — how values flow in and out
• Build your own wing — build a format that does not exist yet