Most sites repeat the same handful of things: navigation, footer, newsletter callout, contact block, pricing strip, and maybe a list of recent posts. Copying that markup between pages works exactly once. Then somebody changes a link and discovers seven stale versions.
Forma snippets turn those repeated pieces into named building blocks.
Create a reusable block
In Snippets, create a file such as site-footer and give it the shortcode site-footer. Put the complete footer markup and any block-specific styles there.
Then place it on a page with:
[[site-footer]]The page stays readable, and the shared markup has one source. Update the snippet once and every rendered page receives the new version.
Useful snippet candidates include:
[[site-header]][[site-footer]][[contact-cta]][[pricing-summary]][[search]]
A snippet can be plain HTML. It does not need to become “a component” with a build tool, package registry, and lifecycle model.
Add Twig only where it earns its keep
Twig is useful when a reusable block needs data or simple presentation logic. For example, a recent-posts section can loop over posts supplied by Forma:
<section class="recent-posts">
<h2>Latest from the blog</h2>
{% for post in posts|slice(0, 3) %}
<article>
<a href="/blog/{{ post.slug }}">{{ post.title }}</a>
<p>{{ post.description }}</p>
</article>
{% endfor %}
</section>Twig gives you escaping, loops, conditions, and filters without moving rendering into the browser. The server still returns complete HTML. That is good for accessibility, search engines, and anyone debugging the site six months later.
The practical rule is simple: HTML for structure, snippets for reuse, Twig for data.
A small design-system workflow
Start with tokens in a shared head snippet or page stylesheet:
:root {
--brand: #fcbe34;
--surface: #111113;
--text: #f5f5f7;
--muted: #a9a9b2;
--radius: 14px;
}Build a few stable classes for buttons, cards, wrappers, and type. Then assemble those primitives inside snippets. You get consistency without creating a theme abstraction before the site needs one.
This is especially effective for client sites. The header and footer can be locked into clear shared files while individual pages remain easy to edit. An agent can update a call to action through the scoped snippet endpoint instead of rewriting every page.
What happens with HTML cache
When HTML cache is enabled, saving a snippet triggers a site republish. That is intentional: Forma cannot assume which pages use the changed block, so it rebuilds the derived HTML files from SQLite.
The editor remains dynamic. The published output remains static. The reusable block stays centralized.
For a small or medium site, that is a remarkably capable system: no frontend framework, no bundler, no proprietary page-builder JSON. Just portable content, recognizable templates, and a few reusable pieces that make the site feel designed rather than duplicated.