Screen Templating
TRMNL's native design system for developing beautiful, e-ink friendly screens.
Last updated
TRMNL's native design system for developing beautiful, e-ink friendly screens.
Last updated
The TRMNL device is an 800x480 pixel, black and white, 1-bit grayscale display. This means we had to abandon a lot of modern web styling techniques when developing the API. Learn more about this process .
For the latest documentation on building beautiful plugins with TRMNL, see our Framework docs:
The easiest way to start building with TRMNL is by from inside your account. This includes an inline editor, merge variable interpolation, and a live previewer.
Create an HTML file with our plugins CSS + JS embedded in the <head>.
The example below has simple markup for a "full" layout plugin. We also offer half vertical, half horizontal, and quadrant sized layouts.
The above markup should produce a screen like this:
Note: in some cases you may need to include the 'Inter' font (inside the <head>) to achieve the same look and feel as TRMNL's in-browser markup editor described above:
Use our to enhance your design and show/hide logic (example: , ).
When you're satisfied with the design, replace dynamic content with {{ variable }} references. TRMNL uses the by Shopify to interpolate values into your template markup. You can then save
Note: You may also leverage to reduce the sanitization required by the service producing data for your TRMNL plugins. For example, you can convert "10" to "$10.00" via .
