Using Timber
The Playground
The Playground is Timber's signature feature: your site's design is a version, and you can have as many versions as you like. One is live. The rest are drafts you can edit, compare, share and publish.
Themes and versions#
- A theme is code: a folder of templates and CSS (Birch, Ebony, Ghost, or your own).
- A version is data: a theme + your content for its fields + section order and visibility + a status.
Several versions can use the same theme, and pages, posts, forms and menus are shared by all versions — each version just renders them in its own theme.
Statuses#
| Status | Who can see it |
|---|---|
| Live | Everyone, at /. Exactly one version is live |
| Preview | Anyone with the link /v/{slug}/ |
| Private | You, or anyone with the secret share key /v/{slug}/?key=… |
| Archived | Nobody (until restored) |
Version previews are always noindex so search engines never see your drafts.
What you can do#
- Edit. A generated editor (text, images, lists, toggles) next to a live preview at desktop, tablet and phone sizes. Drag sections to reorder, hide or show them, click a section to jump the preview to it.
- New version. Start from any installed theme.
- Duplicate. Try an idea on a copy; the original is untouched.
- Compare. Two versions side by side with synced scrolling, on any page path.
- Share link. Send a secret URL to a teammate or client who isn't logged in.
- Make live. Switch
/instantly. The previous live version becomes Preview, so you can switch back. - Fork theme. Copy the theme's code into a new theme used only by this version, then edit its templates and CSS without touching others.
- **Export
index.html.** A static snapshot of a version's homepage. - Floating admin bar. While logged in, a small bar on the public site shows which version you're viewing and lets you jump between them or press Make live.
The three starter designs#
| Theme | Look |
|---|---|
| Birch | Light and calm, serif headlines. Hero, features, about, latest posts, call to action |
| Ebony | Dark and bold. Glowing hero with an app mock-up, trusted-by strip, features, steps, stats, pricing, testimonials, FAQ |
| Ghost | Black and white, centred, editorial — in the spirit of Twenty Twenty-Four. Wide hero image, services grid, quote, latest posts |
All three use system fonts and make no third-party requests.
Branding applies to every theme#
Design → Branding sets your site name, logo, favicon, social links and brand colours. Once you pick brand colours, all themes follow them; until then each theme keeps its own palette.
Why it's useful#
- Redesign without a staging server: build the new look privately, compare, then switch.
- A/B different homepages (switch, measure, switch back).
- Keep a "coming soon" or campaign version ready to go live at a moment's notice.
See Building themes to make your own.