README.md

DM Editor documentation

⚠️ Note: this documentation is still in making, final version should be ready before end of Nov 2024.

Useful resources:

• Follow our roadmap
• Discussions on Github

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
	DM Editor for view in client, SSR	Render page in client or SSR or both.
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)
Integration	Integration for assets, saving block	Integration with your project or CMS, eg. set project style, browse image, link, save blocks

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