Loading...

The Template Shelf

Ready-made web apps to start from, in a room of their own at /templates.

Where it is

The shelf lives at /templates, and there are two doors into it, both in the Web App Studio: the Templates row in the projects sidebar, and the Start from a template entry in the ⋯ menu beside the New button.

The Web App wizard itself has no template list. You choose a template here, on the shelf, and its button carries it into the wizard for you.

What is on it

Each card is a ready-made web app: a name, a description, and short tags for what it can do — sign-in, payments, orders. The chips along the top are built from the tags the templates themselves carry, so the categories always match what is actually there.

Some templates are free and some carry a credit price, written on the card. A card with no price is free; there is no hidden cost at the end.

Watch it before you pick it

Every built-in template has a live demo: a working copy of the site at its own address (/templates/demo/…) that you can click through like a visitor.

The card shows a short recording of that demo instead of a drawing. On a computer it plays while your pointer is over the card; on a phone it plays while the card is well on screen. With reduced motion switched on in your device settings, it stays a still picture.

The picture opens the demo, and so does the Open the demo ↗ link at the foot of the card. Watching costs nothing: the recordings are ours, not generated for you.

Sites that move as you scroll

The shelf now opens with a row headed Sites that move as you scroll, marked New: five free templates — Barber, Healthy store, One-product store, Bakery and Minecraft server. Each site's opening scene moves with the scroll bar: forwards as you scroll down, backwards as you scroll up. Each one has its own demo to try.

The notes under the row say the rest. The moving scene is drawings plus code, so it costs no video credits. Parts really rotate, fill and change colour; it is not a photo being panned. Use this opens the website wizard with the template filled in, where you change the name, the prices and the colours, and the scene takes on your colours.

See inside — look before you spend

A template used to be a name, one sentence and three tags, and you picked it — or paid for it — without ever seeing what you got. See inside is the answer to that.

The way in is a plain text link under the tags reading "4 screens · See inside", with the real number in it. (A small See inside pill on the card's picture used to be a second way in. It was removed on 8 September 2026.)

Inside, the panel is in two halves:

• Left — every screen the template starts you with. Each one is a thumbnail you can click to see it larger, in a little browser frame with that screen's address in the bar. These are drawings, not photographs: block shapes standing for a list, a product page, a cart, a form, a dashboard or a page of text. Nothing here is a screenshot of somebody else's finished app.
• Right — the honest pair. What is already built, ticked off, and What you still add yourself underneath it. A shop template, for example, says the product pages, the cart and the checkout form are there, and that real payments, stock and shipping rates are not.

At the bottom sits the price and the same button the card carries — the panel spells it out as Use this template where the card says just Use this, and both read Buy & use on a premium one. It is deliberately the card's own button, so there is no second way to be charged.

A card with no "See inside" is not a broken card

The panel is built from a list of screens the template itself carries, and a template that has not listed its screens gets no See inside link — its card looks exactly as it always did. Nothing is missing from your account and there is nothing to switch on.

Two more things the panel will not do:

• The live demo box shows only where there is a demo. A blue Open the live demo box appears when that template really has a working copy to open. Since 11 September 2026 all six built-in templates and the five scroll sites have one. A template without one shows no box — a dead link is worse than no link.
• Long lists are trimmed. At most eight screens and six lines in each of the two lists, so the panel stays a panel.

What "Use this" does today — and when it says "Buy & use"

On a free card, or one you already own, the button reads Use this and opens the Web App wizard with the template's name and tags already written into your description.

On a premium card the same button reads Buy & use: it charges the credits shown on the card first, then does the same thing. A preset is bought once and stays yours.

Either way it does not yet drop the template's finished files into your project. That part is still being built, so treat a template as a very good starting brief rather than a working app you have been handed.

The five ways "Buy & use" can say no

A purchase either goes through or is refused outright — there is no half-bought preset — and the message tells you which of five things happened:

• "Sign in to buy this preset" — your credits live with your account, so the purchase needs you signed in.
• "…is no longer on the shelf" — it was taken off while your page was open. Refresh to see what is there now.
• "…cannot be bought right now" — it is on the shelf but not on sale at the moment. The free ones still work.
• "Not enough credits for this preset" — it names the price and your balance in the same message, and ends with "Nothing was charged."
• "The charge did not go through" — a fault on our side. The preset was not bought and no credits were taken; try again in a moment.

There is a sixth message, "Buying presets is not switched on yet", and it means only itself: paid presets are not live in the database yet. The free presets work throughout.

If the shelf says it is not switched on

The shelf reads its templates from the database. When that has not caught up yet the page says the templates are not switched on yet, rather than showing you an empty room. Nothing is wrong with your account and there is nothing to do but come back after the next update.

Where to next

• Next in Code Studio (IDE): A Cinematic Website Opening
• None of these fit: Web App Studio — What a web app is, and starting one from scratch.
• After you pick one: Starting a New Project — The wizard the shelf hands your choice to.
• Check the cost first: How Credits Work — What "Buy & use" takes off your balance.

6 of 37 in Code Studio (IDE) · Last checked 16 September 2026 · Previous: Web App Studio