Project 70, Forms and input

Mini Rich Text Editor

A small writing box with the formatting people actually use. It cleans up pasted text, saves as you type and exports tidy HTML or Markdown.

Main API: contenteditable
Paste: Sanitised HTML
Dependencies: None
Your browser: Checking

Write something

Use the toolbar or shortcuts like Ctrl+B and Ctrl+I. Paste from a web page: the styling is cleaned. Reload to see autosave.

0 wordsSaved in this browser

Pick a format to see the export.

How it works

A div you can type incontenteditable turns a normal div into an editor. The toolbar runs editing commands like bold and formatBlock on the current selection.
Clean every pastePasted HTML is parsed with DOMParser, and only safe tags like p, b, a and lists are kept. Styles, classes and scripts are removed.
Export two waysThe cleaned HTML is shown as is, and a small walker turns the same tree into Markdown.

editor.addEventListener("paste", (e) => {
  e.preventDefault();
  const html = e.clipboardData.getData("text/html");
  const doc = new DOMParser().parseFromString(html, "text/html");
  doc.querySelectorAll("*").forEach((el) => {
    if (!ALLOWED.has(el.tagName)) el.replaceWith(...el.childNodes);
    else [...el.attributes].forEach((a) => a.name !== "href" && el.removeAttribute(a.name));
  });
  document.execCommand("insertHTML", false, doc.body.innerHTML);
});