DotCMS Edit Mode

Plan, design, and develop a no-code experience to create and edit Web Pages inside DotCMS.

Tech Stack

Angular

RxJS

CE

Custom Events

Dragula

CP

CSS Properties

DotCMS helps you manage and deliver content across all channels, devices, and platforms.

One of the key features of the platforms is "Edit Mode", is the place where users can manage their page:

1. Add or edit content
2. Edit properties: title, description, permissions, etc.…
3. Publish or published a page.

Demo

• https://demo.dotcms.com/c
• User: admin@dotcms.com
• Password: admin
• Go to Site > Browser and double click any page

Challenge

Edit mode is a great feature but it was developed 10 years ago and never update or maintained.

DotCMS customers deserve and need a most modern experience a better way to manage their pages. So we want:

1. Less code more work
2. Drag and drop content
3. A way to change the layout of a page
4. Preview the page in different devices and languages
5. Scale faster.

Solution

Api

Working with the backend developers, we develop an API that will give us all the information about a page:

1. Layout
2. Containers
3. Contentlets
4. "Special" HTML in which we add data attributes.

Page

By rendering the HTML with special data attributes, we could tap inside containers and contentlet and inject tools (buttons and handlers) to allow users to edit the content, move content inside the page, and other edit page actions.

Edit

By listening to the events on the page we render, we can save all the changes a user make on real-time with no extra actions is a WYSIWYG for the whole page.

Layout

We represent any page layout as an object, and by doing that, we were able to create a "Layout Designer" where our user can create rows, columns, sidebar, header, and footer to a page with zero code.

Benefits

1. Easy to scale
2. Allow us to use edit mode with any server-side technology.
3. Fastest and modern UI

Results

We deliver the first version of the new edit mode feature within months, and with the release to the public, we start gathering a lot of good feedback and ideas for a future version.

Edit mode becomes the feature that differentiates DotCMS from any other competitor in the market and the product's primary selling point.