Screen Templating
TRMNL's native design system for developing beautiful, e-ink friendly screens.
Overview
The TRMNL OG device is an 800x480 pixel, black and white, 2-bit grayscale display. This means we had to abandon a lot of modern web styling techniques. Learn more about this process here.
For the latest documentation on building beautiful plugins with TRMNL, see our Framework docs: https://usetrmnl.com/framework
Quickstart (TRMNL account)
The easiest way to start building with TRMNL is by making a Private Plugin from inside your account. This includes an inline editor, merge variable interpolation, and a live previewer.
Quickstart (no TRMNL account)
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:
Customize and make it dynamic
Use our Framework Docs to enhance your design and show/hide logic (example: overflow management, number formatting).
When you're satisfied with the design, replace dynamic content with {{ variable }} references. TRMNL uses the Liquid templating library by Shopify to interpolate values into your template markup. You can then save
Note: You may also leverage Liquid Filters to reduce the sanitization required by the service producing data for your TRMNL plugins. For example, you can convert "10" to "$10.00" via money_with_currency.
Last updated