Snippets, CSS and assets

Reusable markup with snippets

Create snippets/link.html:

<a class="theme-link" href="[[ safe_url(href) ]]" gs-text="label"></a>

Call it from a block:

<template gs-component="link" gs-prop-href="block.settings.url" gs-prop-label="block.settings.label"></template>

A snippet has an isolated parameter scope. Pass the values it needs explicitly. Global site, page, settings and locale remain available. A snippet has no editor entry or independent settings schema; use a block when customers need independently configurable instances.

Scoped CSS

Put CSS in assets/theme.css. The renderer includes theme CSS under an @scope boundary identified by data-loom-theme. Use theme classes within that boundary, not body or editor UI selectors.

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.offer-card { padding: 24px; }

Use CSS for responsive structure and schema values for editable dimensions. Do not hardcode a radius in CSS and simultaneously promise a schema radius control without using its value. On narrow screens, avoid fixed content widths and test long translations.

Images and files

The current importer accepts text assets, not PNG/JPEG uploads or custom JavaScript. Reference media-library URLs or HTTPS images. asset_url resolves assets included in the installed bundle; it is not permission to read server files. Compiled text assets are copied to api/public/template-assets/<key>/.

Loom runs without filesystem or network access. The renderer drops unsupported HTML and event-handler attributes. Inline styles containing URL functions, expressions or imports are filtered by the markup adapter. Put supported CSS in the package stylesheet and verify it in both preview and public output.

Escaping and URLs

Output is escaped by default. User text containing markup should display as text. Do not introduce raw HTML bypasses for convenience. Use safe_url for destinations. It allows HTTP(S), mail, telephone, root-relative and anchor links; it rejects executable schemes, whitespace and backslashes. Snippets only load from the installed package.