Home | Development | API | Data format | github project

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

Online demo | An introduction article

Highlights

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

Screenshots

Installation

npm install dmeditor

Note: to develop widgets, suggest to install @mui/material and @emotion/css so you get all benefits of mui and emotion css. See sample project for detail.

Usage

Easy way is to clone Sample project

For edit

import {DMEditor} from 'dmeditor';

//...
<DMEditor data={[]} />

For view

import {DMEditorView} from 'dmeditor';

//...
<DMEditorView data={data} />

Templates

Put below in your html to use our open source templates:

<script src="https://cdn.jsdelivr.net/gh/dmeditor/templates@main/templates.js"></script>

Widgets

dmeditor-digimaker: - Content widgets(eg. content grid, Gallary) for digimaker CMF

Leave a messge here if you want to promote your widgets.

Templates CDN

See https://github.com/dmeditor/templates to use template CDN. Welcome to send pull request to add your templates.

SSR (Server side rendering)

NodeJS

DM Editor can be used directly in server side rendering via eg. NextJs.

PHP/.NET/Java etc

You can use server side include to embed output of dmeditor-server, which outputs html&css&js from DM Editor's json data.