> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.banana.tech/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# 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**](https://mustache.github.io/mustache.5.html)**.**
## 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.value.title}}
<{{text.value.tag}}>{{text.value.title}}
{{/text.value.title}}
```
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}}
{{#text.value.title}}
<{{text.value.tag}}>{{text.value.title}}
{{/text.value.title}}
{{/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.value.original}}
{{/image.value.original}}
```
A link field also contains several values, such as the URL, target, and visible label.
Example link:
```
{{#link.value.destination}}
{{link.value.title}}
{{/link.value.destination}}
```
|| 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:
```html
{{!-- link hide true --}}
{{!-- booking-id hide true --}}
{{!-- image hide true --}}
{{!-- list.image hide false --}}
```
Use `order` to define the field order:
```
{{!-- image order 1 --}}
{{!-- text order 2 --}}
{{!-- link order 3 --}}
{{!-- list.text order 1 --}}
{{!-- list.image order 2 }}
```
|| 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.