` shell and injects `plugins.css` + `plugins.js` automatically. Every layout's markup starts at the `view`: ```html

My Plugin {{ trmnl.plugin_settings.instance_name }}

``` Match the view modifier to the layout tab: `view--full`, `view--half_horizontal`, `view--half_vertical`, `view--quadrant`. ## Liquid syntax note TRMNL uses standard **Liquid** (Shopify): data with `{{ variable }}`, logic with `{% ... %}`. Some TRMNL docs render the braces as `##{{ ... }}` — that `##` is **documentation escaping only**; in the editor use plain `{{ ... }}`. Custom form fields interpolate the same way: `{{ api_key }}`. ## Reference files Read the one matching the task — don't load all of them up front. - **`references/data-strategies.md`** — Webhook (URL, `merge_variables`, limits, curl) and Polling (`polling_url`, multiple URLs → `IDX_0`/`IDX_1`, headers/body, verbs), Plugin Merge / data-only mode, form fields, and the `trmnl` global object. - **`references/liquid-filters.md`** — All TRMNL custom Liquid filters (`number_to_currency`, `l_date`, `group_by`, `find_by`, `where_exp`, `qr_code`, `append_random`, `parse_json`, …) plus common Shopify filters, with examples. - **`references/framework.md`** — Design Framework 3.1 markup: views & mashups, layout/columns/grid/flex, item, table, value/format_value, typography & responsive prefixes, color tokens, image/dithering, progress, rich text, clamp/overflow modulations. - **`references/charts-and-recipes.md`** — Embedding Highcharts/Chartkick charts (e-ink-safe config), worked dashboard examples (single metric, multi-column, list/schedule), and a troubleshooting checklist. ## Scaffolds `assets/scaffolds/` holds copy-paste starter markup. Copy the relevant file into the matching layout tab and replace the placeholders: - `full.liquid`, `half_horizontal.liquid`, `half_vertical.liquid`, `quadrant.liquid` — empty-but-correct shells for each layout. - `schedule-full.liquid` — a worked list/schedule dashboard (loops over events with date/time formatting and overflow handling). ## Hard-won rules - **Keep merge data flat.** Send `{ "events": [...] }`, not `{ "data": { "events": [...] } }`. Webhook payloads go under `merge_variables`; polling JSON is read from the root (single URL) or `IDX_n` (multiple URLs). - **Disable all animation** in charts (`animation: false`) — TRMNL screenshots the page once; animated charts capture half-rendered. - **Always handle overflow.** Lists/tables clip silently. Use `data-clamp="N"`, `data-list-limit="true"`, `data-table-limit="true"`, or cap items in Liquid (`limit:`). - **Identical merge data skips re-render.** If a screen doesn't update, the data was unchanged — use Force Refresh. - **Wrap all client JS** in `document.addEventListener("DOMContentLoaded", function(e){ ... })`. - **Respect limits.** Webhook: free 2 KB & 12×/hr, TRMNL+ 5 KB & 30×/hr. Polling refresh intervals: 15 / 60 / 360 / 720 / 1440 min.