Creating a Unified Editor Experience: Universal Visual Editor

The rise of the headless CMS has been a boon for developers. Headless technology has freed them from the restraints of legacy CMS frameworks that aren’t equipped to support modern, content-rich experiences. But that developer freedom has come at a cost; it has forced content managers and business users back to the 2000s, where the key to all progress lies in developer muscle (i.e. “let’s open a ticket”) when it came to managing anything more than just content.

Unfortunately, this is a considerable setback for digital marketing teams. dotCMS has been hearing from customers who while acknowledge the advantages of a "pure" headless or API-first CMS, have shared the limitations their marketing and content teams are facing.

Our new Universal Visual Editor aims to provide a unified editor experience for digital marketing teams regardless of the front-end technology or delivery method. Bridging the gap between developers, who thrive on advanced JavaScript frameworks like Reactjs, Next.js, Angular, and Vue.js, and content creators, who need a straightforward editing experience, is crucial.

Universal Visual Editor: A High-level Summary

The "Universal Visual Editor" feature in dotCMS is an innovative addition that complements the headless CMS architecture. It allows page editors to directly edit pages rendered with major JavaScript frameworks within the dotCMS “Editor,” providing a responsive, WYSIWYG-like experience. This feature aligns with the headless CMS's principles of flexibility and performance and simplifies the editing process, enhancing both developer and editor workflows.

In simple terms, the Universal Visual Editor equips frontend developers with a toolkit of JavaScript resources while providing a user-friendly interface for page editors and marketing teams.

Caption: Pages are rendered using the Page API that combines the content, layout, and navigation APIs.

Who’s it designed for?

Designed for both developers and page editors, dotCMS "Universal Visual Editor" caters to the needs of these groups, offering streamlined content management workflows and a true Universal CMS experiences.

Ideal for companies and partners with frontend development teams looking to provide content teams with more independence and control while still being able to develop in their framework of choice. Providing a balance between the flexibility of a headless CMS and the ease of traditional editing interfaces.

Benefits to Developers

Simplified Implementation: No need for an express server, streamlining development.
JavaScript SDK: Comprehensive SDK with React components.
Framework Agnostic: Compatible with React, Angular, Next.js, and Svelte.
Reduced Development Time: Quicker Implementation with native support.
Error Reduction: Streamline the approach without injecting HTML into frameworks.
Best Practices: Facilitates adherence to standards and simplifies version control.

Benefits to Page Editors

Enhanced Editing Experience: More responsive and intuitive WYSIWYG editing.
Seamless Integration: Edit pages rendered outside dotCMS within the dotCMS Universal Visual Editor.
Real-time Preview: Editors see changes in real-time.
User-friendly Interface: Designed for ease of use.
Faster Editing Process: Improves speed and efficiency.

See it in Action.

How does it work?

Get data from our Page API, which includes all the page properties and SEO information, the page layout information, and all the related content of the page.

Render your pages and content using any JavaScript framework (we provide an example for Next.js) or any CSS library like Tailwind.

Deploy your web app to any hosting platform, such as Amazon AWS, Vercel, or Netlify. You have the complete freedom to include this process in your CI/CD pipeline.

Connect to dotCMS using our new Universal Visual Editor Next app. Just need to provide the URL of your deployed web app.

And finally, you can start editing pages in real-time with our new editor.

Developers

For developers, if you are working in development mode, you don’t need to deploy. You can just configure the dotCMS Universal Visual Editor app to your localhost environment.

As we look to the future, dotCMS is committed to further enhancing the Universal Visual Editor and our other Universal CMS features. With improvements already in the pipeline, such as:

Improved Inline editing
Improved Layout editing and control
Full Headless support for A/B testing and analytics
In-context Headless Personalization

Conclusion

With the introduction of the New "Universal Visual Editor," dotCMS is again setting the standard for Universal content management systems, providing users with the tools they need to succeed in an ever-evolving digital landscape.

Check out our documentation to learn more, or contact us to set up a demo of the Universal Visual Editor and our many hybrid and headless CMS features!