AutumnNote v1.8.0
Open Source · MIT License · v1.8.0

Fast. Lightweight.
Reliable. Efficient.

A modern WYSIWYG editor built with vanilla JavaScript (ES2022+) — no jQuery, zero runtime dependencies, full TypeScript support out of the box.

npm install autumnnote
View on GitHub ↗ npm package ↗

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 Only

Get started in seconds

Works with any bundler or directly via CDN — no build step required.

Install via npm / pnpm / yarn
npm install autumnnote
ES Module
import 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); },
});
React — autumnnote-react
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…' }} />;
}
Vue 3 — autumnnote-vue
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>
CDN — jsDelivr (no install needed)
<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>