A visual editor library

DM Editor is a block based visual editor with great editorial experience. It's on react and open source. 

Simple demo

Get started

Block based

Means that all types of page elements can be in the edit tool, positioned precisely.

WYSIWYG

Real what you see & act is what you get, even for interaction, eg. clicking a tab.

Variants of widget

Widgets like rich text, heading, image, contact form. Create your own if you need to.

Widget is component

Widget is wrapped React component, thus has nature of a component - rendering, interaction, data binding.

A widget can be
basic: text, table, image
interactive: tabs, pop up, accordion
solution related: student list
Setting can be
style: padding, background
configuration: carousel interval time, table adding row

See widgets >>

General widgets and a custom widget for bridge card game

Click a tab to change content in edit mode

View as editing

Good editorial experience when edit is view.

Input as you see, specially for interactive case like tabs, accordion, pop up.
Adjust setting in setting panel by sliding, clicking, and sees result immediately. 

Edit in online demo >>

Widgets are stylable

It is intuitive when styles are defined by project developer and selected by editor. 

With developer's configuration, editor gets needed and understandable style settings, not more, not less.
All widgets are made to be "stylable".
DM Editor supports both css-in-js and utility-based css framework like Tailwind.

Button styles, with color and icon

Customized style of tabs, with colored, underlined title

PowerPoint alike way

Think about making page like PowerPoint, with content editing, layout making, style settings and function selecting.

Try and get inspired to organize content in static or interactive way, and make creative pages.
Enjoy page making!

Blog posts

Simple form building

Since 0.2.2, DM Editor supports building simple forms. It's a small feature but can be quite flexiable in terms of form layout.

Ways of making space in DM Editor

Proper spacing makes good looking. This article explains different ways of making space in DM Editor.

Use DM Editor to make section layout

DM Editor is not only for page making, but also can be used for layout making. This article demo dynamically displaying content based on menu click, and shares some layout thinking.

More >>

For dever: it's a Javascript library

No backend bundled

DM Editor doesn't include backend system but provides API for integration. Integrate with backend systems (eg. headless CMS) or your own solution, via rest API or GraphQL. 

After integration editor can
use assets directly in DM Editor, eg. browsing images, files, links, contents. ﻿ ﻿
view page directly on admin app

Where it needs visual editing

Use DM Editor in scenarios where it needs visual html editing.

In additional to page editing, scenarios can be

In SPA(Single Page Application): configurable view (eg. hook to menu) and customization (eg. dashboard)
Edit & Generate PDF
Email editing in CRM or solution 

Check documentation >>