DM Editor

DM Editor is a block-styled visual editor written in React.

The idea behind is to have an editor where it is easy to develop and style widget within React ecosystem, in the end together with developer bring good user experience for page editing.

Simple demo

• Documentation (online)
• Roadmap
• Discussions on Github

Installation

See sample project

npm install dmeditor

First example

import { registerDefaultWidgets, DMEditor } from "dmeditor";

registerDefaultWidgets();

const App = () => {
  return (
    <div>
      <DMEditor />
    </div>
  );
};

Highlights

• Block based, real WYSIWYG (What you see is what you get)
• See immediate change while slide on padding, width, color, margin, etc
• Interactive widgets like tab, accordion
• Get benefits of React ecosystem for creating widget
• Widgets can be inside widget
• Extend styles of a widget

Widgets

See here for widgets.

Sample projects

• React project
• Next.js sample project
• Monorepo sample project — admin and front site share configuration and widgets

Documentation

• Online documentation
• Local docs: doc/ — see doc/README.md
• For AI agents: AGENTS.md

Note: doc/ is a git submodule. After cloning, run: git submodule update --init --recursive