Odoo version 19 comes with a new and improved Website Builder, built on a modern Owl-based system. Although the internal JavaScript system has changed substantially, the concept of having the right options for customizing at the right time for snippet options remains similar for developers who are familiar with Odoo version 18 and earlier versions.
In this blog, let’s dive deeper and explore the concept of snippet options in Odoo version 19 and how it works internally, and also see how you can create snippets that work seamlessly with the Website Editor, similar to the way Odoo snippets work.
What Are Snippet Options in Odoo?
Snippet options are the options that are displayed in the editor panel on the right-hand side when a snippet is selected in the Website Builder. These options are available for the user to visually change the snippet without writing any code.
The options that are available for a snippet are as follows:
- Layout options (Grid, Columns, etc.)
- Background options (color, image, video, etc.)
- Content Width
- Height
- Visibility
- Spacing
- Add Elements (this option is available for complex snippets such as banners)
What's New in Odoo 19 Snippet Options?
In the earlier versions of Odoo, such as version 18 and earlier, snippet options were managed by options.registry and data-options elements. The snippet options management has been changed in the latest version of Odoo, i.e., version 19. The management of snippet options in the latest version is based on a component-oriented and Owl-based architecture.
It is clear that the management of snippet options in the latest version of Odoo has changed internally; however, the external interface is almost the same.
In the latest version of Odoo, snippet options are managed by the data-option-name attribute. The JavaScript architecture of the latest version of Odoo is based on the Owl architecture, and snippet options are implemented by the Owl-based option components. The snippet options are identified by scanning the DOM elements for the presence of the specified attribute and CSS class. The snippet options management is based on dynamic components, which makes it more flexible and efficient.
The snippet options management in the latest version of Odoo is more efficient and cleaner.
How Odoo 19 Decides Which Options to Show
It is not arbitrary how the options are shown in the snippet. Odoo checks the HTML structure and looks for specific classes and attributes.
Important Classes and Attributes
The s_nb_column_fixed class is used to set the column fixed. It also hides the custom layout tools in the editor. The s_allow_rows class is used to enable nested drop zones, allowing the user to insert child snippets inside the section. The o_colored_level class is used to indicate that the section is color editable, enabling the background-related options in the editor. The data-original-id attribute is used to indicate that it is an image managed by Odoo, enabling the editing of the image. The data-option-name attribute is used to associate the snippet with the corresponding option component, enabling advanced customization options.
This is the language that the website editor understands.
Static vs Dynamic Snippets
Static Snippet Example
<section class="s_text_block">
<div class="container">
<h2>About Our Company</h2>
</div>
</section>
Available options:
- Background
- Height
- Visibility
Because the structure is simple, only basic styling options are shown.
Dynamic Snippet Example
<section class="s_dynamic_block" data-option-name="DynamicCard">
<t t-foreach="records" t-as="record">
<div class="card">
<img t-att-src="record.image_url"/>
<h4 t-esc="record.title"/>
</div>
</t>
</section>
Available options:
- Layout
- Background
- Content Width
- Height
- Visibility
The data-option-name attribute activates layout-related option components.
Understanding Fixed Layout Behavior
Some built-in snippets intentionally restrict layout changes. For example:
<section class="s_faq s_nb_column_fixed">
...
</section>
The s_nb_column_fixed class locks the layout and hides custom layout controls.
Removing this class immediately restores layout customisation—exactly like in Odoo 18, but now handled by the LayoutOption component.
Image Snippet Options and Media Handling
Images managed by Odoo include special metadata:
<img class="o_we_custom_image"
data-original-id="45"
data-original-src="/web/image/45"/>
These attributes enable:
- Image filters
- Shapes and masks
- Quality and format options
If these attributes are missing, Odoo treats the image as static HTML and limits available tools.
Making Custom Snippets Behave Like Native Ones
To make your custom snippets behave like native ones, you should:
- Use known classes for layouts and colors
- Add data-option-name to option components
- Include s_allow_rows when nesting is needed
- Avoid using restrictive classes when not necessary
- Use QWeb to bind to t-esc, t-att-* for editable content
- Use Odoo media attributes for images
By doing this, your custom snippets will be completely compatible with the new Odoo 19 editor.
Keywords: Improving Snippet Discoverability
Adding <keywords> helps users quickly find your snippet in the editor:
<t t-snippet="website.s_banner" string="Banner" group="intro">
<keywords>hero, header, branding, showcase, intro</keywords>
</t>
This improves searchability inside the Website Builder.
Dynamic Snippet Auto-Loading in Odoo 19
In Odoo 19, you no longer need to manually register dynamic snippets.
import { DynamicSnippet } from "@website/snippets/s_dynamic_snippet/dynamic_snippet";
export class PartnerSnippet extends DynamicSnippet {
static selector = ".s_partner_dynamic_snippet";
}As long as the JS file is included in website.assets_frontend, Odoo automatically mounts the snippet based on the selector.
When Spacing Options Appear
Spacing (X, Y) options are enabled when the grid mode is active:
<div class="o_grid_mode">
...
</div>
This allows fine-grained spacing control in supported layouts.
The snippet option system has been improved but not replaced in Odoo 19. While the JavaScript layer has been updated to a modern component-based approach, the underlying logic remains familiar.
Understanding how Odoo works with DOM attributes and CSS classes enables developers to:
- Create custom snippets that feel native
- Manage option display intelligently
- Create a user-friendly design experience
Odoo 19 continues to build on its philosophy of powerful customization with simplicity.
To read more about How to Create a Dynamic Snippet in Odoo 19, refer to our blog How to Create a Dynamic Snippet in Odoo 19.