View
A View holds content (e.g. a plugin instance). Single views use view--full inside the Screen; multiple views go inside a Mashup. The view modifier sets each view's share of space; the Mashup modifier controls the arrangement. View and Layout receive calculated dimensions from the device and orientation.
You don't specify the view. The markup you write for any plugin layout is automatically wrapped in the appropriate view container by the platform.
You provide the view yourself. Include the appropriate wrapper in your markup: view view--full, view view--half_vertical, view view--half_horizontal, or view view--quadrant.
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view --><div class="view view--full">
<div class="layout">...</div>
<div class="title_bar">...</div>
</div>Base Structure
The Layout element
Layout
Layout
Primary container for organizing plugin content
The Layout is the content container inside a View. There should be exactly one layout per view. Its height is calculated automatically based on the device type, orientation, and whether a title bar is present. It can arrange content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers. For organizing content inside it, use flex, columns, or grid.
is the core component of every View
View
View
Show your plugin in different sizes with Mashup view containers
A View holds content (e.g. a plugin instance). Single views use view--full inside the Screen; multiple views go inside a Mashup. The view modifier sets each view's share of space; the Mashup modifier controls the arrangement. View and Layout receive calculated dimensions from the device and orientation.
, providing a consistent container for your content.
Views can optionally include a Title Bar
Title Bar
Title Bar
Standardized title bar with plugin information and instance details
The Title Bar component provides a consistent header for terminal-like interfaces, displaying application information such as icons, titles, and instance details.
for additional context.
There are four view types: view--full, view--half_horizontal, view--half_vertical, and view--quadrant.
The default full view (view view--full) lives directly inside the screen div.
Other view types must be nested inside a
Mashup
Mashup
Assemble multiple plugin views into a single interface
A Mashup arranges multiple plugin views within a single screen. The mashup modifier (e.g. mashup--1Lx1R, mashup--2x2) controls how the views are positioned, while each view's own modifier determines how much space it occupies.
component.
With Layout and Title Bar
When combined with a title bar, it provides context and navigation options.
Title
Instance
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
<div class="title_bar">
<img class="image" src="/images/plugins/trmnl--render.svg" alt="TRMNL Logo">
<span class="title">Title</span>
<span class="instance">Instance</span>
</div>
</div>With only Layout
For simpler interfaces, you can create a view without a title bar using just the base view classes.
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
</div>Views in Mashups
When multiple plugins share a single screen, each one gets its own view, and those views must be wrapped in a
Mashup
Mashup
Assemble multiple plugin views into a single interface
A Mashup arranges multiple plugin views within a single screen. The mashup modifier (e.g. mashup--1Lx1R, mashup--2x2) controls how the views are positioned, while each view's own modifier determines how much space it occupies.
container.
The view modifier (view--half_vertical, view--quadrant, etc.) determines how much space each plugin gets.
The mashup modifier (mashup--1Lx1R, mashup--2x2, etc.) determines how those views are arranged on screen.