stilo-editor

Quick start

npm install stilo-editor

<div id="toolbar"></div>
<div id="editor"></div>

import 'stilo-editor/style.css';
import { Editor, defaultExtensions } from 'stilo-editor';
import { createToolbar } from 'stilo-editor/ui';

const editor = new Editor({
  element: document.querySelector<HTMLElement>('#editor')!,
  extensions: [defaultExtensions()],
  content: '<p>Hello <strong>world</strong></p>',
});

createToolbar(editor, { container: document.querySelector<HTMLElement>('#toolbar')! });

editor.getHTML(); // '<p>Hello <strong>world</strong></p>'

✅ That is the whole setup.

Want your own UI?

Skip the toolbar: the core is headless.

import 'stilo-editor/content.css';
import { Editor, defaultExtensions } from 'stilo-editor';

const editor = new Editor({
  element: document.querySelector<HTMLElement>('#editor')!,
  extensions: [defaultExtensions()],
});

document.querySelector('#bold')!.addEventListener('click', () => editor.commands.toggleBold());
document.querySelector('#undo')!.addEventListener('click', () => editor.commands.undo());

Commands, button states and events: API reference.

React

import 'stilo-editor/style.css';
import { StiloEditor } from 'stilo-editor/react';

<StiloEditor content="<p>Hello</p>" onInput={({ editor }) => save(editor.getHTML())} />;

React 18 and 19, server-side rendering included; useStiloEditor for your own UI: React guide.

Vue

<script setup>
import 'stilo-editor/style.css';
import { StiloEditor } from 'stilo-editor/vue';
</script>

<template>
  <StiloEditor content="<p>Hello</p>" @input="({ editor }) => save(editor.getHTML())" />
</template>

Vue 3.4 and later, server-side rendering included; useStiloEditor for your own UI: Vue guide.

Svelte

<script>
  import 'stilo-editor/style.css';
  import { StiloEditor } from 'stilo-editor/svelte';
</script>

<StiloEditor content="<p>Hello</p>" oninput={({ editor }) => save(editor.getHTML())} />

A component for Svelte 5, actions for Svelte 4 and 5, server-side rendering included: Svelte guide.

What's included

• Text: bold, italic, underline, strikethrough, code, sub/superscript, fonts, sizes, colors, highlight, text case
• Blocks: headings, quotes, code blocks, alignment, line spacing, move up/down
• Lists: bulleted, numbered, checklists
• Tables: insert, merge and split, row and column handles, resizable columns
• Images: paste and resize
• Tools: links, find and replace, special characters and emoji, word count

Markdown shortcuts as you type, a keyboard shortcut for everything, a toolbar you can drive from the keyboard alone. Every feature, shortcut and option: All features.

Why Stilo

• Clean, safe HTML. HTML in, semantic HTML out, through a strict allowlist of tags, attributes and styles.
• Paste from Word and Google Docs. Real lists, kept tables, no stray fonts and colors.
• Big documents welcome. Typing stays instant at 10,000 paragraphs (numbers).
• Tested in Chromium, Firefox and WebKit, with TypeScript types included.
• Nothing behind a paywall. Tables, paste from Word, find and replace: all in the free, MIT-licensed package.

Status

0.x preview: it works, but APIs may change in minor versions until 1.0.0. Read the changelog before updating. Next: real-time collaboration (roadmap).

Contributing

Bugs, ideas and questions: issues. Code: CONTRIBUTING.md. Vulnerabilities: SECURITY.md.

Designed by Alessio Coggiola and built with Claude, from a written architecture and decision records.

License

MIT © 2026 Alessio Coggiola. Logo wordmark from IBM Plex (OFL 1.1).