Fast, Lightweight WYSIWYG Editor
for Vanilla JavaScript
A modern WYSIWYG editor built with vanilla JavaScript (ES2022+) — no jQuery, zero runtime dependencies, full TypeScript support out of the box.
npm install autumnnote
- ✦ Zero dependencies
- ✦ ES2022 + TypeScript
- ✦ Dark / Light theme
- ✦ 8 languages (i18n)
- ✦ Bubble toolbar
- ✦ Markdown shortcuts
- ✦ @mention autocomplete
- ✦ Auto-save restore
- ✦ Find & Replace (floating)
- ✦ Image crop overlay
- ✦ Table merge / unmerge
- ✦ Cell background shading
- ✦ Auto language detection
- ✦ SCSS syntax highlight
- ✦ Draggable dialogs
- ✦ ~380 emoji picker
- ✦ FontAwesome icon picker
- ✦ Video embeds
- ✦ React wrapper
- ✦ Vue 3 wrapper
- ✦ pnpm monorepo
Live Demo
Select text to see the bubble toolbar ·
Type @ to mention someone ·
Start a line with ## for a heading ·
Try **bold** inline
HTML Output
Read-only Preview
🔒 Read OnlyGet started in seconds
Works with any bundler or directly via CDN — no build step required.
npm install autumnnoteimport AutumnNote from 'autumnnote';
import 'autumnnote/dist/autumnnote.css';
const editor = AutumnNote.create('#my-editor', {
placeholder: 'Start typing…',
height: 300,
bubbleToolbar: true,
onChange(html) { console.log(html); },
});npm install autumnnote autumnnote-react
// App.jsx
import { useRef } from 'react';
import AutumnNoteEditor from 'autumnnote-react';
import 'autumnnote/dist/autumnnote.css';
function MyEditor() {
const ref = useRef(null);
return <AutumnNoteEditor ref={ref} options={{ placeholder: 'Start typing…' }} />;
}npm install autumnnote autumnnote-vue
<!-- MyEditor.vue -->
<script setup>
import AutumnNoteEditor from 'autumnnote-vue';
import 'autumnnote/dist/autumnnote.css';
</script>
<template>
<AutumnNoteEditor :options="{ placeholder: 'Start typing…' }" />
</template><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/autumnnote/dist/autumnnote.css">
<script src="https://cdn.jsdelivr.net/npm/autumnnote"></script>
<script>
const editor = AutumnNote.create('#my-editor');
</script>Frequently asked questions
Common questions about the Autumn Note WYSIWYG editor.
What is Autumn Note?
Autumn Note is a zero-dependency WYSIWYG rich-text editor built with vanilla JavaScript (ES2022+). It has no jQuery or runtime dependencies and offers features such as bubble toolbar, @mention, markdown shortcuts, dark mode, table editing, image and video resize, and a Plugin API. It ships as ES Module and UMD builds and includes official React and Vue 3 wrappers.
Is Autumn Note free to use?
Yes. Autumn Note is open-source and published under the MIT License. It is free for personal and commercial use.
What alternatives to Summernote, Quill, and TinyMCE does Autumn Note replace?
Autumn Note is a modern alternative to Summernote, Quill, TinyMCE, Froala, CKEditor, ProseMirror, Trix, and Slate. Unlike most of these, it has zero runtime dependencies and no jQuery requirement.
How do I install Autumn Note?
Install via npm: npm install autumnnote. Then import the library and CSS: import AutumnNote from 'autumnnote'; import 'autumnnote/dist/autumnnote.css';. Create an editor with AutumnNote.create('#my-editor').