DotCMS Edit Mode

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

Tech Stack

Custom Events
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.


  • User:
  • Password: admin
  • Go to Site > Browser and double click any page
DotCMS Edit Mode


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.



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.


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.


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.


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.


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


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.

Copyright © 2023. Design and code by myself with Next.js. Fork it and create yours