# Choose a template from Gallery

Explore templates designed and selected by Tembuilder, preview the details, and choose one for your project.

**Gallery** is a collection of templates designed, built, and carefully selected by the Tembuilder team for a variety of uses. Each brings its own layout and visual style, giving you more options when starting a new document.

Browse for inspiration, explore how a design is put together, or choose a template as the starting point for your own ideas. You can change its content, colors, and layout after adding it to your project.

## 1. Explore the collection

Open **Gallery** to browse the available templates. Each card includes a thumbnail, name, and short description to give you a sense of the design. The paper size is also shown, helping you choose a template for the document you have in mind.

Browse freely, or narrow down the collection when you know what you’re looking for:

- **Search** by name or keyword. For example, enter `invoice` to find invoice templates.
- **Categories** on the left group templates by type.
- **Popular** shows popular templates first; **Newest** helps you discover recent additions.

Combine search with a category to narrow the results further. When the list spans several pages, use the controls below it to keep browsing.

## 2. Take a closer look

Select a template card to open its preview. You’ll see a larger view of the design along with its name, description, and paper size.

Look at the details that are harder to see in a thumbnail: how the content is divided, spacing between sections, typography, and table layouts. If several preview images are available, use the arrows or thumbnails to move between them.

A template does not need to match your idea in every detail. A layout that is close to what you want can be a useful starting point, since you can edit it after adding it to your project.

Close the preview to keep exploring, or select **Use template** when you find one you’d like to use.

## 3. Add it to your project

Open **Gallery** from the project where you want to keep the template. Selecting **Use template** opens the **Import** dialog, where you can give it a name.

- **Name** is the label shown in Templates. Choose something you’ll recognize, such as **Service invoice**.
- **Slug** is a short name used to reference the template, such as `service-invoice`. It must be different from the slugs already used in the same project.

Select **Import** and wait for completion. The app opens the template in the editor, ready for you to work on. It also appears in **Templates**, so you can find it again later.

Return to Gallery whenever you want to explore another design, whether you’re looking for fresh ideas or starting another template in your project.

## Try choosing a template

The illustration below walks through these steps. Search for `invoice`, open the preview, select **Use template**, and give the template a name.

<figure class="doc-sim gallery-walkthrough" data-gallery-demo data-locale="en" aria-label="Try choosing and adding a Gallery template">
<div class="sim-kicker">TRY THE STEPS BELOW</div>
<div class="sim-stage">
<div data-gg-screen="browse"><div class="sim-toolbar"><strong>Gallery</strong><span class="sim-badge">1 template</span></div><label class="gg-search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg><input data-gg-search placeholder="Search templates…" aria-label="Search illustration templates" /></label><div class="gg-categories"><button type="button" data-gg-category="all" aria-pressed="true">All</button><button type="button" data-gg-category="invoice" aria-pressed="false">Invoice</button></div><button type="button" class="gg-template" data-gg-preview aria-label="Preview Monochrome Service Invoice"><div class="gg-thumb"><div class="gg-mini-paper"><b>Tembuilder</b><strong>INVOICE</strong><i></i><i></i><i></i><span>$597.20</span></div></div><div class="gg-template-copy"><strong>Monochrome Service Invoice</strong><small>Invoice · A4</small><span>Preview ↗</span></div></button><p class="gg-empty" data-gg-empty hidden>No matching templates. Try “invoice”.</p></div>
<div data-gg-screen="preview" hidden><div class="sim-gallery-dialog"><div class="sim-gallery-heading"><div><strong>Monochrome Service Invoice</strong><small>Invoice · A4</small></div><button type="button" class="sim-close" data-gg-back aria-label="Back to templates">×</button></div><div class="sim-gallery-preview"><div class="gg-mini-paper gg-preview-paper"><b>Tembuilder</b><strong>INVOICE</strong><small>TB-2026-0042</small><i></i><small>BILL TO</small><b>Tembuilder</b><i></i><i></i><span>$597.20</span></div></div><div class="sim-gallery-footer"><small>Schema v1 · A4</small><button type="button" class="sim-control sim-dark sim-focus" data-gg-use>Use template</button></div></div></div>
<div data-gg-screen="import" hidden><form class="sim-form" data-gg-form><div class="sim-toolbar"><strong>Import template</strong><button type="button" class="sim-close" data-gg-back aria-label="Back to Gallery">×</button></div><label>Name<input name="name" data-gg-name value="My invoice" required maxlength="64" /></label><label>Slug<input name="slug" data-gg-slug value="my-invoice" required maxlength="64" pattern="[a-z0-9]+(-[a-z0-9]+)*" /></label><small>Choose a name you can find easily, such as Service invoice.</small><div class="sim-form-footer"><button type="submit" class="sim-control sim-dark sim-focus">Import</button></div></form></div>
<div data-gg-screen="done" hidden><div class="sim-completion"><span aria-hidden="true">✓</span><strong data-gg-result></strong><p>You’ve completed the selection steps. In the app, the added template will appear in Templates.</p><button type="button" class="sim-reset" data-gg-back>Start again ↺</button></div></div>
</div><figcaption data-gg-caption aria-live="polite">Select the template to preview · Interactive illustration</figcaption>
</figure>

Once you have chosen a template, see the [editor guide](/docs/editor/tour/) to start editing it.
