DM Editor documentation

Concepts & principles

See DM Editor concepts and principles to use DM Editor better.

Installation

npm install dmeditor

First example

import { registerDefaultWidgets, DMEditor } from "dmeditor";

registerDefaultWidgets();

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

Sample projects

• React project
• Nextjs sample project
• Monorepo sample project where admin and front site use shared folder for same configuration and widgets.

Tutorial

Use DM Editor

• Use DM Editor for edit and view
• Edit/view configuration
• SSR prefetch
• System integration, like image browsing, saving block
• Configure style settings

Develop a widget

• Make a basic widget
• Make a mixed widget with other widget(s) inside
• Style a widget

API Reference

Use DM Editor & style blocks

API	Comment
DMEditor	DMEditor, DMEditorView, dmeServerSideLoad
registerStyle	Register style, style options
setDMEditorConfig	Set configurations like predefined colors
Callback configs	Eg. for integrate with image library
CSS variables & classes	DM Editor defined css variables and classes
Widget style keys	Style keys on built in widgets

Develop a widget

API	Comment
registerWidget	Register a widget
WidgetRenderProps	Props to implement widget render
Hooks	useEditorStore, useDevice
Render block, block list	BlockRender, BlockListRender
Setting components	Setting component like input, checkbox, width, etc
Utility components and functions	Utility component useful for creating widget and converting data, eg. MiniRichText, iterateBlockList

Extra resources

Code as default settings/styles in project.

	Comment
Default styles	Built in widget styles using css-in-js
Default tailwind styles	Built in widget styles using tailwind

Links

• Simple Demo
• Github Repo
• Follow our roadmap
• Discussions on Github