Skip to content

Liveview Editor

The Liveview Editor is the visual editing interface for Hyvä CMS content. It lets merchants build and review content with components while developers keep rendering logic in Magento templates.

Liveview Editor

Core Concepts

Component: A reusable building block with editable fields and a rendering template. Examples include headings, images, cards, sliders, CMS blocks, and project-specific components.

Element: An instance of a component in a page, block, attribute, template, or snippet.

Field: An editable value on a component, such as text, image, link, color, products, category, widget, or variant.

Editing Workflow

Hyvä CMS separates draft content from published content:

  • Save Draft keeps work in progress without changing the storefront.
  • Preview shows draft content through the storefront preview.
  • Publish makes the current draft live.
  • Schedule Publication prepares content for a future release when scheduling is enabled.

The editor header shows whether content is up to date, has unsaved changes, has unpublished changes, or is live.

Main Editor Features

Live Preview

  • Real-time preview of changes as you edit.
  • Responsive preview modes for mobile, tablet, and desktop.
  • Split view for editing and previewing side by side.
  • Shareable preview URLs for draft review.
  • View Published Page to open the current live page in a new tab.
  • Scroll straight to a component's place in the preview from the component tree.

Editor Layout and Tabs

A tabs bar across the top of the editor keeps your work close at hand. It shows the content you are editing, your recently edited pages and blocks, and a button to open the Navigator. Hover a tab to see a preview thumbnail and recognize content at a glance.

You can tailor the workspace to suit how you work:

  • Move the component sidebar to the left or right (a saved editor preference).
  • Drag the divider to resize the sidebar.
  • Search the component tree to jump to a component in large content.

Component Management

  • Add components from categorized lists, with search and a Favourites tab.
  • Drag and drop to reorder content.
  • Add child components where a parent allows them.
  • Copy, paste, duplicate, and delete components.
  • Sort components freely within and across containers, with parent rules enforced on drop.
  • Toggle visibility for a component.
  • Edit fields directly from the preview with context editing.

Context Editing

Hover a component in the preview to reveal a quick-action dot. From there you can open a specific field's editor, highlight the component in the tree, or delete the component, all without opening the sidebar first. Context editing is on by default and can be turned off in editor preferences.

Rich Text Editing

Rich text fields use an inline TipTap editor with formatting, links, images, widgets, and dynamic Magento variables and directives. See Rich Text Editor.

Keyboard Shortcuts

Save, publish, undo, redo, and open the editor's main panels straight from the keyboard. Every shortcut is customizable per user. See Keyboard Shortcuts.

The Navigator gives a structural view of the content tree. Use it to select, move, and manage components in complex pages where clicking the preview is less convenient. Open it from the tabs bar or with its keyboard shortcut.

The Navigator can also expose quick creation flows, such as creating CMS pages or blocks directly from the editor context.

Version History

Version history is created as content is saved and published.

Merchants can:

  • Restore earlier versions.
  • Compare versions side by side.
  • Pin important versions.
  • Name versions.
  • See author and timestamp information.
  • See schedule-related metadata when a version was published by a scheduled release.

Undo and Redo

Undo and redo cover recent edits made during your current editing session. They are separate from saved version history: undo and redo are a fast, in-memory safety net while you work, and version history is the durable record of saved and published versions. The controls also let you jump to the earliest undo or the latest redo, and roll back to the last saved draft.

Templates And Snippets

Templates provide reusable starting layouts. Snippets provide reusable selected sections. The editor can preview, load, copy, star, edit, and delete templates or snippets, depending on permissions and ownership.

See Templates And Snippets.

Translations

The translations panel shows fields that component developers marked as translatable. Editors can translate fields manually per store view or import/export translations as CSV.

See Translations.

Transfer Center

The Transfer Center imports and exports content packages. It supports ZIP transfers with related media, translations, version history, and instance components, plus JSON copy/paste for the current content item.

See Editor Import & Export.

Scheduling

Scheduling lets editors publish Hyvä CMS content at a future date and time. Scheduled content is edited as a scheduled item, separate from the current draft and published version.

See Content Scheduling.

Instance Components

Instance components allow authorized admin users to create database-backed components from inside the editor. They are useful for controlled project-specific reusable sections that do not require a deployment.

See Instance Components.

First-Time Setup

When you open a brand-new page or block, or open the editor on existing content for the first time, Hyvä CMS offers a starting point instead of an empty canvas. You can build from scratch, start from a template, or migrate existing Page Builder content into Hyvä CMS.

Editor Preferences

Editor preferences are personal settings saved per admin user, such as sidebar position, whether the edit panel opens automatically when you add a component, and confirm-before-publish. Per-user keyboard shortcuts and the shared Default Component Classes setting live alongside them.

See Editor Preferences and User Settings.

Developer Notes

Hyvä CMS automatically injects the root editor integration attributes (data-liveview-element, the block id, and getEditorAttrs()) into the first element of each component's rendered output, so most templates do not need them on the root element. Keep adding getEditorAttrs('field_name') on individual fields to enable click-to-edit per field. To take manual control, set $block->setData('auto_attributes', false). See Automatic Editor Attributes.

The editor and storefront preview communicate through a structured postMessage layer. See Liveview Bridge when building custom preview interactions.

Useful CLI commands for installed components and fields:

bin/magento hyva:cms:describe-components
bin/magento hyva:cms:list-fields
bin/magento hyva:cms:list-disabled-components