Mastering the New Universal Visual Editor in dotCMS: A Technical Deep Dive for Developers

The debut of the Universal Visual Editor feature in dotCMS, formerly known as Edit Mode Anywhere (EMA), signifies a notable achievement for dotCMS as an enterprise CMS.

The new version, crafted with developers in mind, demonstrates the ongoing improvement and advancement in the varied ways engineering teams can interact richly with dotCMS.

As a front-end developer and product manager, I'm excited to share insights into how we improved our Universal Visual Editor to be an even better and more powerful tool. This tool provides an incredible experience for both developers and content creators. 

Let's dive into the technical journey that led to the creation of the Universal Visual Editor, offering a glimpse into the future of how front-end developers interact with content management systems.

Learning from the Past: A Step Towards Unintrusive HTML

Our commitment to learning led to the development of the new Universal Visual Editor. Our focus was simple: “make it easier and faster to implement content-driven JavaScript applications,” so our goal was:

• Remove the intrusiveness in the HTML of our clients' pages, ensuring that developers retain complete control over their markup, CSS, and JavaScript.

• No more tunnels or SSL local settings; developers can use their localhost directly

• Faster loading and responsiveness in editing and implementation.

In short, we’re offering you a faster and easier experience.

Embracing Browser-Native APIs for Universal Compatibility

In our quest to support a wide array of users, we leaned heavily on native browser APIs, an approach that not only ensured broad compatibility but also optimized performance.

That means utilizing window.postMessage for seamless and secure communication between the editor and the client's web pages.

ES modules for our SDK to support the most modern browsers and JavaScript runtimes.

The URL API further enabled us to manage dynamic content URLs efficiently.

For the API connection, we used the native fetch API with Request and Response objects, which can be used in the browser or in any other JavaScript runtime, such as Node.js or Bun.

Enhancing Developer Experience with our JavaScript SDK

Because we deeply understand the importance of developer experience, we dedicated efforts to provide comprehensive support through various tools and examples.

Our SDK currently has 3 pieces: a dotCMS API client, ReactJS, and Next.js.

@dotcms/client

Provides an easy interaction with the two most important dotCMS APIs you need to implement any frontend: the Page API (Layout as a Service)  and the Nav API.

You can install it with npm, pnpm, or yarn:

npm install @dotcms/client
// or
yarn add @dotcms/client
// or
pnpm add @dotcms/client

And inside your chosen framework:

import { dotcmsClient } from '@dotcms/client';

const client = dotcmsClient.init({
    dotcmsUrl: https://yourdotcms.host
    authToken: YOUR_DOTCMS_AUTH_TOKWN,
});
// and then call the APIs
const page = await client.page.get({
  path: '/about-me'
})
// or
const nav = await client.nav.get({
  path: '/',
  depth: 2
})

And that’s it! The client library allows you to fetch data from the dotCMS APIs in no time.

@dotcms/react

No CSS or HTML work is required to render a dotCMS page efficiently. Just concentrate on writing the right components to effortlessly showcase your content on the page. Simply utilize the <DotcmsLayout /> component to select the components for displaying your content seamlessly within the page like this:

import { DotcmsLayout } from '@dotcms/react;

export function MyPage({ pageData }) {
    return (
        <>
            <Header>
            <main>
                <DotcmsLayout
                    entity={{
                        options: {
                            // Extra options
                        }, 
                        components: {
                            contentTypeVariable: CustomComponent,
                            // More components here
                        },
                        ...pageData
                    }}
                />
            </main>
            <Footer />
        </>
    );
}

Next.js Example

Finally, we provide a Next.js example that includes everything you need to run a modern web app and render all the pages in a dotCMS instance. To run this example, clone the repo and:

1. Rename the file .env.local.example to .env.local

2. Edit the env.local file and replace the DOTCMS_AUTH_TOKEN and the NEXT_PUBLIC_DOTCMS_HOST with your value

3. Go to your terminal and run npm install and then npm run dev

In this example, we use Next.js's catch-all strategy to match the routing system from dotCMS, so you don’t have to worry about creating a new React component every time a page is created.

This initiative was designed to cater to developers working with different frameworks, including React, Angular, and Vue.js, ensuring that they have the necessary resources to leverage the Universal Visual Editor's capabilities fully.

A Closer Look at the Technical Implementation

The technical blueprint of the Universal Visual Editor feature was meticulously designed to cater to modern development practices. Here's how we built this feature from a technical standpoint:

Simplified Edit Mode Integration

By shifting away from runtime HTML, CSS, and JavaScript injection, we minimized potential conflicts with JavaScript frameworks, ensuring a smoother integration process for developers.

Direct Iframe Loading

The Universal Visual Editor's iframe now directly loads the developer's local host, eliminating the need for a tunnel or external Node.js server. This enhancement accelerates the feedback loop during development mode.

Utilizing postMessage for Communication

Relying on window.postMessage for iframe communication enhances the editor's security and reliability, facilitating a more structured and secure interaction between the editor and the client's application.

Streamlined Developer Tools

The introduction of the JavaScript SDK provides developers with the necessary tools to implement the Universal Visual Editor effortlessly. These resources are designed to integrate seamlessly with the dotCMS API, offering a rich set of functionalities for content management.

The Road Ahead: Supporting a Diverse Technological Ecosystem

Our journey doesn't stop here. Developing the Universal Visual Editor is an ongoing process, with plans to extend support beyond React to other popular frameworks such as Angular and Vue.js. This inclusive approach aims to cater to a broader developer community, ensuring that the Universal Visual Editor remains a versatile tool for web development projects.

Conclusion: Embracing the Future of Web Development

The Universal Visual Editor in dotCMS represents a leap forward in the realm of content management systems and page visual editing. By focusing on unintrusive HTML integration, leveraging native browser APIs, and enhancing the developer experience, we've laid the foundation for a tool that not only meets the current demands of web developers but also anticipates future trends.

The Universal Visual Editor is poised to revolutionize the way you interact with your web projects. Stay ahead of the curve and explore the possibilities that the Universal Visual Editor brings to your development workflow.