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

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.