Design in place

Design the template where you can see it

The templatedesigner tag captures a block of markup before Twig compiles it, writes it to your local templates folder, and sends it to production — on every page load, while you work.

The Template Designer solves one specific annoyance. You are building a layout in a visual tool — Stacks, for instance — and the markup you are looking at has to end up as a template file on a server somewhere. Normally that means copy, paste, upload, repeat, every time you nudge something. The Designer removes the middle three steps.

Wrap the markup in a templatedesigner tag and every page load on your development server does two things: it writes the block to your local templates folder, and it sends the same content to your production server's Designer API. A badge in the bottom-right corner reports both results, names the template it synced, and offers a Copy Template button for the raw source.

The tag is a preprocessor, not a renderer. It captures the raw block before Twig compiles it, so an expression like {{ object.title }} is stored as source code rather than being evaluated against whatever object happens to be in scope while you are designing. What lands on the server is a template, not the output of one.

Which server is rendering decides what happens. When the API URL matches the tag's on parameter — that is, when production is serving the page — the tag is a no-op: no sync, no badge, no performance overhead. Omit the token parameter and the block syncs locally only, which is how you prototype something that is not ready to go live. A single page can carry several blocks, and each syncs independently with its own line in the badge.

Authorisation is per template. Enable the Template Designer toggle on a template in the admin and it generates a read-only Designer Token. That token, and only that token, authorises writes to that one template, through a public endpoint that accepts nothing but template content — the token and the enabled flag cannot be changed through it at all. One leaked token exposes one template, and you rotate it by regenerating the template's token in the admin.

What you get

Inline, then synced

Write the template in the page you are designing. Each page load saves it to the local templates folder and PUTs it to production.

Raw source, not output

A custom loader captures the block before compilation, so expressions are stored as source instead of being evaluated while you design.

Silent on production

When the API URL matches the tag's on parameter, the tag does nothing at all — no sync, no badge, no overhead.

One token per template

Each template gets its own auto-generated Designer Token. Compromising one does not affect any other template, and the API can only change content.

Local-only mode

Leave the token out and the template is saved locally and never pushed — the way to prototype something that is not ready for production.

In practice

One snippet

{% templatedesigner for 'products/tile' on 'https://example.com/tcms/' token 'abc123def456' %}
	<article class="product-tile">
		<h3>{{ object.title }}</h3>
		<p>{{ object.summary }}</p>
		<span class="price">{{ object.price | price }}</span>
	</article>
{% endtemplatedesigner %}

On a development server this saves products/tile locally and pushes it to production; on production itself the same tag does nothing.

FAQ

Common questions

Does this slow down my production site?

No. When the page is served by the same server named in the tag's on parameter, the tag is a no-op — nothing syncs, no badge renders, and there is no performance overhead.

What authorises the update?

A per-template Designer Token, sent as an X-Designer-Token header or a token query parameter. The endpoint is public rather than session or API-key authenticated, and it accepts only the template's content.

Can I work on a template without touching production?

Yes. Omit the token parameter and the block is saved to your local templates folder only, with the badge reporting the remote sync as skipped.

Can one page sync more than one template?

Yes. A page can contain any number of templatedesigner blocks. Each syncs independently and gets its own entry in the status badge.

Related features

Want the details? Read the Template Designer documentation →

Or keep browsing: every Total CMS feature →

Start Your Free 45-Day Trial