Advanced design editing with HTML, CSS, JavaScript, and Mustache

The frontend editor gives technical users direct control over how a block design is built. Use it when the visual editor or AI editor is not enough, or when you need precise control over layout, responsive behavior, or frontend interactions.

Open the frontend editor

Open the block panel and go to Edit design. From there, go to Edit HTML, CSS & JS to open the frontend editor to access the design code.

The editor is divided into three main areas:

HTML, for the structure of the block.
CSS, for the visual styles.
JS, for custom frontend behavior.

You can use Render to preview the result after making changes.

HTML and Mustache

The HTML panel defines the structure of the block. It combines regular HTML with Mustache, a template syntax used to print CMS content inside the design.

Mustache is used to connect the design with the fields available in the block. Instead of writing fixed text or fixed image URLs directly in the HTML, you use Mustache tags to display the content entered in the CMS.

You can learn more in the official Mustache documentation: Mustache manual.

What Mustache is used for

In block designs, Mustache is mainly used to:

Print the value of a field.
Show a piece of HTML only when a field has content.
Repeat HTML for list-based blocks.
Access structured field values, such as images, links, videos, or headings.

Basic syntax

Use double curly brackets to print a value:

{{field_name}}

Most CMS fields have a structured value, so you usually access a specific part of the field:

{{text.value.title}}

Use a section to show HTML only when a field has content:

{{#text}}
  <h2>{{text.value.title}}</h2>
{{/text}}

If text has no content, the HTML inside the section will not be rendered.

Repeated content

Some blocks include repeated items. In those cases, the design can repeat the same HTML structure for each item in the list:

{{#list}}
  <article class="block__item">
    {{#text}}
      <h3>{{text.value.title}}</h3>
    {{/text}}
  </article>
{{/list}}

This is commonly used in blocks such as sliders, grids, galleries, accordions, and module list blocks.

Structured fields

Some fields contain more than one value. For example, an image field includes the image URL, alt text, title, and different image sizes.

Example image:

{{#image}}
  <img src="{{image.value.src.xl}}" alt="{{image.value.alt}}">
{{/image}}

A link field also contains several values, such as the URL, target, and visible label.

Example link:

{{#link}}
  <a href="{{link.value.url}}" target="{{link.value.target}}">
    {{link.value.title}}
  </a>
{{/link}}

Mustache does not create new fields. It only displays the fields that already exist in the block.

CSS

The CSS panel controls the visual style of the design.

Use it to define layout, spacing, typography, colors, image behavior, animations, and responsive rules.

.block-content-image {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .block-content-image {
    grid-template-columns: 1fr 1fr;
  }
}

Use the desktop and mobile preview controls to check how the design behaves on different screen sizes.

JavaScript

The JS panel is used for custom frontend behavior.

Use JavaScript only when the design needs interaction that cannot be handled with HTML and CSS, such as custom sliders, toggles, animations, or third-party scripts.

document.addEventListener("DOMContentLoaded", function () {
  // Add custom interaction here.
});

Global data, block data, and variables

The editor includes helper tabs to understand what data is available:

Global data shows site-level information that can be used by the design.
Block data shows the content fields available for the current block.
Variables shows design variables that can be used in CSS.

These panels are useful when you need to confirm the exact field names or understand what content the design can access.

Configure fields in the CMS panel

You can use Mustache comments in the HTML panel to decide which fields appear in the CMS editing panel and in which order they are shown.

Use hide true to hide a field:

{{!-- link hide true --}}
{{!-- booking-id hide true --}}

Use order to define the field order:

{{!-- image order 1 --}}
{{!-- text order 2 --}}
{{!-- link order 3 --}}

These comments only affect the CMS panel for that design. They do not create new fields or remove fields from the block data.

Save the design

Use Save when you want to update the current design.

Use Save as new design when you want to create a separate version without changing the original design.

If the design is synced or reused in other blocks, saving changes may affect every block that uses that design. Use Save as new design when you need a one-off variation.

Updated on: 11/09/2026

Was this article helpful?

Thank you!