Get started quickly

In addition to the pure javascript writing of the engine library, a small part of the plugins we provide have more complex UI, and it is a relatively easy task to use the front-end library to render the UI.

The following three plugins are different

  • @aomao/toolbar editor toolbar. Buttons, icons, drop-down boxes, color pickers, etc. are all complex UIs

  • @aomao/plugin-codeblock The drop-down box for selecting the code language has a search function. It is a better choice to use the existing UI of the front-end library

  • @aomao/plugin-link link input, text input, using the existing UI of the front-end library is a better choice

Vue2 example

Vue3 example

React example


Use npm or yarn to install the editing engine

$ npm install @aomao/engine
# or
$ yarn add @aomao/engine


Let's start by outputting a Hello word!. Now you can edit it below.

import React, { useEffect, useRef, useState } from 'react';
import Engine, { EngineInterface } from '@aomao/engine';
const EngineDemo = () => {
//Editor container
const ref = useRef<HTMLDivElement | null>(null);
//Engine instance
const [engine, setEngine] = useState<EngineInterface>();
//Editor content
const [content, setContent] = useState<string>('Hello word!');
useEffect(() => {
if (!ref.current) return;
//Instantiate the engine
const engine = new Engine(ref.current);
//Set the editor value
//Listen to the editor value change event
engine.on('change', () => {
const value = engine.getValue();
//Set the engine instance
}, []);
return <div ref={ref} />;
export default EngineDemo;


Now, on the basis of the appeal code, we introduce the @aomao/plugin-bold bold plugin

import Bold from '@aomao/plugin-bold';

Then add the Bold plugin to the engine

//Instantiate the engine
const engine = new Engine(ref.current, {
plugins: [Bold],

The default shortcut of the Bold plugin is windows ctrl+b or mac ⌘+b, now try the bold effect


A card is a separate area in the editor. The UI of this area can be customized to render content using front-end frameworks such as React and Vue, and finally mounted on the editor.

Introduce the @aomao/plugin-codeblock code block plugin. Part of the plugin UI is rendered by the front-end framework, so there is a distinction. vue3 developers use @aomao/plugin-codeblock-vue vue2 developers use am-editor-codeblock-vue2

import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock';

Add CodeBlock plugin and CodeBlockComponent card component to the engine

//Instantiate the engine
const engine = new Engine(ref.current, {
plugins: [CodeBlock],
cards: [CodeBlockComponent],

The CodeBlock plugin supports markdown by default. Enter the code block syntax ```javascript` at the beginning of a line in the editor, and then see the effect.


Introduce the @aomao/toolbar toolbar, the toolbar UI is more complicated, all of which are rendered by using the front-end framework, vue3 developers use @aomao/toolbar-vue vue2 developers use am-editor-codeblock-vue2

import Toolbar, { ToolbarPlugin, ToolbarComponent } from '@aomao/toolbar';

Add the ToolbarPlugin plugin and the ToolbarComponent card component to the engine, it will allow us to use the shortcut key / to wake up the toolbar in the editor

//Instantiate the engine
const engine = new Engine(ref.current, {
plugins: [ToolbarPlugin],
cards: [ToolbarComponent],

Rendering toolbar, the toolbar has been configured with all plugins, here we only need to pass in the plugin name

return (
engine && (

Develop your own toolbar

@aomao/toolbar is more to provide a toolbar UI display, the essence is to call engine.command.execute to execute plugin commands

Collaborative Editing

This open-source library listens to changes in the HTML structure of the editing area (contenteditable root node), uses MutationObserver to reverse-engineer the data structure, and connects and interacts with Yjs through WebSocket to achieve multi-user collaborative editing.

Each editor, as a client, communicates and interacts with the server through the WebSocket function in the @aomao/plugin-yjs-websocket plugin.

  • @aomao/yjs implements the conversion of editor and Yjs data
  • @aomao/plugin-yjs-websocket provides the WebSocket client function of the editor and Yjs
  • @aomao/plugin-yjs-websocket/server provides the WebSocket server of Yjs, written in Node.js, and supports data storage using MongoDB and LevelDB.