Skip to content

Hyvä CMS 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: Components, Elements, and Fields

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.

Editor Interface

For a full list of what Hyvä CMS can do, see Key Features on the Overview page. This section covers the editor's own interface: the parts that are specific to how you work inside the Liveview Editor, rather than a content feature with its own page.

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.

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.

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.