š¼ļøPlugin 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 here.
For the latest documentation on building beautiful plugins with TRMNL, see our Framework docs:
https://usetrmnl.com/framework
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.
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:
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.
