# Find your way around the editor
Get to know Structure, editing tabs, previews, and input data so you know where to start in the editor.
Opening a template brings its structure, editing tools, and preview together. Select a part to edit, then look at the preview to see the result without leaving the editor.
Start in **Structure** to select what to edit, use the tabs beside it to make changes, then open **Run** to generate a PDF. The illustrations below show each area in context.
## 1. Structure: choose what to edit
**Structure** is on the left. It shows the pages and sections that make up the template. Selecting an item opens its editing options in the panel beside it.
- **Global** holds settings shared across the template.
- **Page** represents a page in the layout, with its sections inside.
- **Section** is a content block, such as customer details or a service table.
- **Header / Footer** contains page header or footer content when the template uses it.
For example, select **Billing Parties** to edit labels in the customer details section. Select **Global** for shared settings such as fonts or the background.
STRUCTURE＋
⌄ Global 1/2
▤ Footer
⌄ 01 Page 3
▤ Heading
▤ Content 4p
▤ Summary
Structure → select a section to open its editing tools
## 2. HTML, CSS, Props, and Config
After selecting an item in Structure, the next panel shows its available tabs:
- **HTML**: the content and structure of the section.
- **CSS**: presentation, such as colors, font sizes, and spacing.
- **Props**: values saved with the template, often labels, colors, or reusable text.
- **Config**: settings for the selected item, such as margins, backgrounds, or page breaks.
With an existing template, open **Props** to change a label without editing HTML/CSS. The illustration below shows a `heading` prop on the selected section; its HTML reads the value through `{{ props.heading }}`.
The available tabs depend on your selection. **Global** has Props and Config, while a section can have HTML, CSS, Props, and Config. A variant that inherits from the base may offer fewer editing options.
HTMLCSSPropsConfig
SECTION · Content
headingText
VALUEDocument title{{ props.heading }}
Section → Props → value used in HTML
## 3. Layout and PDF: see the result
The preview beside the editing panel has two modes: **Layout** and **PDF**.
**Layout** helps you see how sections fit together as you work. **PDF** shows the document as pages, which is useful for checking margins, headers, footers, and content flowing onto the next page.
In **Layout**, you work with the template’s pages and sections. **PDF** shows the paginated result, including extra sheets created when content extends beyond one page.
LayoutPDF
Page 1
Tembuilder1 / 2
Page 2
Tembuilder2 / 2
Layout shows the structure · PDF shows paginated sheets
**Layout** reflects your current edits. **PDF** renders saved template content, so save the design and regenerate PDF preview after changes. Preview parameters come from the editor’s values, initially Defaults; values entered in Run apply only to Run jobs. A previous PDF preview does not refresh automatically.
## 4. Parameters: data for each document
**Parameters** is on the right. It shows the data the template accepts, such as a customer name, invoice number, or list of services.
Choose **Schema** to inspect fields, types, and default values. Choose **Payload** to see the data as JSON. Field names need to match the expressions used in the template’s HTML.
For example, a field named `recipient` provides the expression `{{ params.recipient }}` for your HTML. Its default value lives in Schema; data for each PDF is entered in Run.
See [Parameters and Props](/docs/data/parameters-props/) for help deciding which one to use.
Parameters＋ Add
SchemaPayload
recipientText
DEFAULTTembuilder{{ params.recipient }}
Parameters → Schema / Payload
## 5. Run and history
After saving and publishing the template, open **Run** to choose a key, version, and variant, and enter data to generate a PDF. Follow [Create your first PDF](/docs/getting-started/first-pdf/) when you want to try that workflow.
When looking back at your work, use the template’s history for saved design changes and **Renders** for PDF jobs and their results. This helps you find either the design version or the generated file you need.