DM Editor documentation

⚠️ this documentation is for 0.2.x

Installation

npm install dmeditor

First example

import { registerDefaultWidgets, DMEditor } from "dmeditor";

registerDefaultWidgets();

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

Sample projects

See sample project

Documentation overview

Tutorial

Category	Link	Comment
Concepts	DM Editor concepts	Basic concepts of DM Editor
Use DM Editor	DM Editor for editing	For editing
	Integrate with project	Integration with your project or CMS, eg. set project style, browse image, link, save data, save blocks
	DM Editor for viewing	View page/section in client or SSR
Develop widget	Make a widget
	Make a mixed widget	Mixed widget is a widget containing other widgets
	Style a widget	You can use css-in-js or utility way to style widget (eg. tailwind)

API Reference

Use DM Editor in project

Category	API	Comment
Use DM Editor	DMEditor, DMEditorView & dmeServerSideLoad
Configuration	setDMEditorConfig
Configuration callbacks	Callbacks	Eg. for integrate with image library
DM Editor css variables	CSS variables

Develop widget

Category	API	Comment
Widget implementation	registerWidget
State management	Hook useEditorStore
Setting components	setting components
Widget style	Widget style keys
Utility	Utility components
util	util functions

Data

Category	API	Comment
Data format	Data format

Resources

Category	API	Comment
Default styles	Styles	Built in widget styles using css-in-js
Default tailwind styles	Styles	Built in widget styles using tailwind