Skip to content

DM Editor Documentation

Installation & Overview

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 in project

Develop 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

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#