How to author using Universal Editor on DA
This demo showcases how you can use the Universal Editor (UE) for a full WYSIWYG and forms-based authoring experience on Document Authoring (DA) powered sites.
Universal Editor provides an in-context visual editing experience where authors can edit content directly on the rendered page. It combines visual editing with forms-based property panels, giving authors full control over both content and block configuration without leaving the page context.
With UE, authors can visually add, remove, and rearrange blocks and sections, edit text and images inline, and configure block properties through structured forms — all while seeing a live preview of how the page will look to end users.
UE is enabled for DA sites using component models and instrumentation. Learn more at https://www.aem.live/developer/ue
Key Capabilities
- In-context editing — Edit text, images, and links directly on the rendered page
- Forms-based property editing — Configure block options through structured property panels
- Visual block management — Add, remove, and reorder blocks and sections using the visual toolbar
- Component models — Define editable properties per block (text fields, dropdowns, media, references)
- Live preview — See changes reflected in real-time as you edit
- DA as content source — Content is stored in DA and served through Edge Delivery Services
This demo takes you through a journey from the author's view to :
- Open a DA page in Universal Editor
- Edit text and images inline using WYSIWYG editing
- Use the property panel to configure block options via forms
- Add new blocks and sections from the component toolbar
- Rearrange content by dragging and dropping blocks
- Preview and publish the page
How UE is set up for this site
The demo site has Universal Editor integration configured with:
- Component definitions — Define available blocks (Hero, Cards, Tabs, Search, etc.) and default content types (text, image)
- Component models — Specify editable properties for each block with field types like text, select, reference, and media
- Component filters — Control which blocks can be added to specific sections
- UE instrumentation — JavaScript that handles DOM mutations and selection events when editing blocks in UE
These models live in the ue/models/ folder and follow the AEM UE documentation.