WYSIWYG editor screen examples

Dock

Design editor where the user builds a sales template by configuring layout, typography, and sections for a product overview.

• Design Editor
• AI Agent

Assembly AI App Builder

Content editor where the user drafts the portal home page, configures dynamic variables, and selects a banner image from a side panel.

• Edit
• AI Editing

Aboard

Content editor where the user drafts an employee contract template, featuring a title input and a floating rich text formatting toolbar.

• Edit
• Templates

Navattic

Design editor where the user is anchoring a tooltip to a specific element within a product demo step.

• Add & Create
• Media Editor

Mailchimp

Form builder where the user customizes the layout, text, and input fields of their email preferences center.

• Form
• Edit

Cushion

Detail page where the user edits a post's content in a modal, selects a publishing channel, and can request feedback before saving.

• Edit
• Post Detail

Bird

Design editor where the user builds an email template by dragging content and layout blocks from a right sidebar onto a central canvas.

• Design Editor
• Drag & Drop

Documentation.AI

Content editor where the user writes and manages documentation pages alongside an AI assistant sidebar.

• Dashboard
• AI Assistant

Universe

Design editor canvas where the user is building a crypto wallet landing page and has selected an image element to edit, duplicate, or delete via a floating toolbar.

• Design Editor
• Edit

Durable

Design editor canvas where the user is previewing a website hero section and has opened an inline context menu to edit, duplicate, or delete the selected block.

• Design Editor
• Edit

Typeform

Design editor where the user configures the welcome screen of a quiz, adjusting content, button labels, and settings.

• Form
• Edit

Loops

Content editor where the user drafts and styles a transactional email template, adjusting fonts, padding, and colors via a right-hand inspector panel.

• Design Editor
• Media Editor