Universal Visual Editor (UVE)

Description

The Universal Visual Editor (UVE) is dotCMS’s modern, unified visual editing experience designed for today’s headless and hybrid architectures. It allows content and marketing teams to visually edit live, headlessly and natively rendered pages directly in the browser—without giving up the performance, flexibility, or framework freedom developers expect.

UVE delivers a responsive, WYSIWYG-like experience where editors can add, edit, reorder, and lay out content using intuitive drag-and-drop interactions, all while seeing changes in real time. Unlike traditional preview modes, UVE works directly on the actual front end—whether that’s a classic dotCMS page or a headless single-page application built with React, Next.js, Angular, Vue.js, or any other JavaScript framework. One editor. One workflow. Any front end.

Benefits

For Content & Marketing Teams

• Edit pages visually with real-time, in-context preview—no switching between forms and preview screens.

• Drag and drop content, reorder components, and adjust layouts without writing code.

• Publish routine updates independently, reducing bottlenecks and accelerating time to market.

• Preview experiences across desktop, tablet, and mobile to validate layouts and messaging before publishing.

For Developers

• Build headless front ends using the frameworks and architectures of your choice without sacrificing editorial usability.

• Integrate applications with UVE through dotCMS SDKs to support visual editing, layout management, previews, and Future Time Machine.

• Keep a clean separation between content, presentation, and code while still empowering non-technical users.

Use Cases

Headless Marketing Sites
A marketing team manages landing pages and campaign content visually in UVE while developers deliver a high-performance front end using Next.js or React.

Multi-Site & Multi-Framework Environments
Organizations running multiple sites—some traditional, some headless—use UVE to maintain a consistent editing experience across all properties.

First-Time Headless Adoption
Teams moving to headless architecture give content creators a familiar, visual editing workflow, easing the transition without retraining or disruption.

Device-Aware Content Validation
Editors use UVE’s responsive preview capabilities to ensure content looks and behaves correctly across desktop, tablet, and mobile experiences.

Resources

• Universal Visual Editor Documentation

• Creating a Unified Editor Experience: Technical Blog Post

• Integrating UVE with Any JavaScript Framework

• How to Use UVE in Development Mode

• See It In Action: UVE Feature Intro Video

• Troubleshooting Headless UVE Integrations