# Templating
HTML views go through a two-step `{{ }}` token replacement during the `gulp/html` task. Same convention as EM and UJM.
## How it works
1. Your view file (`src/views//index.html`) is templated first — `{{ brand.name }}` etc. resolve against the page-vars object.
2. The result is injected into [src/config/page-template.html](../src/config/page-template.html) (the framework's outer HTML shell).
3. The outer template is processed again with the same vars.
4. Output written to `dist/views//index.html`.
## Available variables
| Token | Source | Example |
|---|---|---|
| `{{ brand.name }}` | `config/browser-extension-manager.json` → `brand.name` | `Tabblar` |
| `{{ brand.url }}` | `config/browser-extension-manager.json` → `brand.url` | `https://tabblar.com` |
| `{{ brand.id }}` | `config/browser-extension-manager.json` → `brand.id` | `tabblar` |
| `{{ page.name }}` | Component name (e.g. `popup`, `pages/dashboard`) | `popup` |
| `{{ page.path }}` | Full view path | `views/popup/index.html` |
| `{{ page.title }}` | Page title — defaults to brand name | `Tabblar` |
| `{{ theme.appearance }}` | Theme appearance: `dark` or `light` | `dark` |
| `{{ cacheBust }}` | Cache-busting timestamp (build time) | `1715568000` |
| `{{ version }}` | `package.json#version` | `1.1.10` |
| `{{ environment }}` | `'production'` or `'development'` | `production` |
## Example usage
```html
{{ page.title }}
```
## Page template
[src/config/page-template.html](../src/config/page-template.html) is the outer shell that wraps every view. It contains:
- `` + `` boilerplate
- `` tags (viewport, charset)
- A `{{ content }}` slot where the per-component HTML is injected
- `` for the component's `.bundle.css`
- `