UVE Real-Time Canvas

Description

The UVE Real-Time Canvas is an update to the Universal Visual Editor that gives content teams direct control over page layout, faster inline editing, and canvas zoom — all without leaving the editor environment they already use.

Accessible from the Universal Visual Editor (UVE) in dotCMS, the Real-Time Canvas brings three capabilities together in one surface.

1. The Content Palette's Layers panel displays the full hierarchical structure of a page — rows and columns — and lets editors drag to reorder sections visually in real time.

2. The Quick Edit panel is a lightweight sidebar that surfaces the most frequently edited fields (title, image, caption, links), with changes appearing immediately in the canvas on headless pages via live preview and debounced auto-save.

3. Canvas Zoom allows scaling the editor view from 10% to 300%, with collapsible panels to maximize working space, giving editors precise control over how much of the page they see at once.

Benefits

For Content & Marketing Teams

• Manage page layouts — reordering rows, reorganizing columns, adding content to containers — directly inside UVE without switching to a separate tool or filing a developer ticket.

• Edit common fields like titles, images, and links through a lightweight sidebar and see changes reflected in the canvas immediately, rather than waiting through a full-page reload.

• Zoom into dense layouts for detail work or pull back for full-page composition review without losing your editing context.

• Spend less time waiting and more time publishing — common content edits that previously took up to 45 seconds are now under 8 seconds with the Quick Edit panel.

For Developers & Platform Teams

• Real-time canvas updates on headless pages are delivered via PostMessage to the iframe, updating only affected components through the virtual DOM — no full page reload required.

• The incremental rendering architecture means layout and content changes are handled by specialized services, reducing the performance overhead of the previous monolithic editor component.

• Canvas height is reported by the SDK to properly size the iframe for both headless and traditional pages, eliminating display issues on complex layouts.

For Digital Leaders & Content Strategists

• Reduce the volume of developer tickets generated by content teams who previously needed help with layout changes or couldn't find a fast enough path to publish.

• Improve CMS adoption and editorial velocity across teams that found the previous editing experience too slow for high-frequency publishing workflows.

• A faster, more visual editor is a measurable factor in content throughput — the Real-Time Canvas creates the conditions for more content to ship with the same team size.

Use Cases

Layout Reorganization Without Developer Involvement A content editor needs to restructure a campaign landing page — moving a testimonial section above a feature block and adding a new row for a promotional banner. Using the Layers panel in the Content Palette, they drag the rows into the correct order and add the new section directly in UVE. The change is live in the preview instantly, and they publish without opening a ticket.

Rapid Inline Editing During a Campaign A marketing manager is iterating on a product page headline and hero image ahead of a launch. They click the component in the canvas, the Quick Edit panel opens with the relevant fields, and they update the title and swap the image. On their headless site, the change appears in the canvas as they type. The whole update takes under 10 seconds.

Precision Layout Work at Scale A web designer is reviewing a content-dense homepage with multiple nested sections. They zoom the canvas to 150% to inspect spacing and component alignment in a specific section, make their notes, then zoom to 60% to evaluate the full-page composition. Collapsing the navigation panel gives them a full-width canvas view for final review before handing off.

Content Team Onboarding and Adoption A digital team onboarding new content contributors uses the Quick Edit panel and Layers view as the primary teaching interface. New editors start with the lightweight panel for everyday updates and the visual layer tree for layout work — a lower-friction entry point that reduces the learning curve compared to the full content form workflow.

Resources

• Documentation