Tutorial
This tutorial series will teach you how to create custom screens for your TRMNL device using Byonk. You’ll learn:
- Your First Screen - Create a simple “Hello World” screen
- Lua Scripting - Fetch data from APIs and process it
- SVG Templates - Design beautiful layouts
- Advanced Topics - HTML scraping, dynamic refresh, error handling
Prerequisites
Before starting, make sure you have:
- Byonk installed and running
- A text editor for writing Lua and SVG files
- Basic familiarity with programming concepts
Example Screens
Byonk comes with several example screens you can learn from:
Default Screen
A simple clock display showing time and date.
screens/default.lua - Script
screens/default.svg - Template
Transit Departures
Real-time public transport departures from Swiss OpenData.
screens/transit.lua - Fetches from transport.opendata.ch API
screens/transit.svg - Displays departure list with colors
Room Booking (Floerli)
Scrapes a web page to show room availability.
screens/floerli.lua - HTML scraping example
screens/floerli.svg - Shows current/upcoming bookings
Gray Level Test
Demonstrates the 4 gray levels available on e-ink.
screens/graytest.lua - Minimal script
screens/graytest.svg - Four gray rectangles
Quick Reference
File Locations
| Type | Location |
|---|---|
| Lua scripts | screens/*.lua |
| SVG templates | screens/*.svg |
| Configuration | config.yaml |
| Custom fonts | fonts/ |
Workflow
- Create a Lua script and SVG template in
screens/ - Define a screen in
config.yaml - Assign the screen to a device
- Test by refreshing your device or checking
/swagger-ui
Tip: Lua scripts and SVG templates are loaded fresh on every request. Just save your changes and refresh!
Ready to Start?
Head to Your First Screen to create your first custom display!