Image server for TRMNL built with Node.js, JSX and CSS

You can build a custom screen for Redirect or Alias plugins with your data and design.

As it bult on popular Javascript and Node.js platform, you can easily connect to database, fetch requests or get data from any source, and design it with HTML, JSX, CSS.

Quick Start

1. Press button Use this template on Github or clone this repository
2. Example of JSX code already in repo and you can change it
3. Create file .env.local based on .env.example
4. You can preview result locally npm run watch
5. After changes you should deploy your version of this repo to your server

Technologies used:

• Satori for rendering JSX to SVG
• resvg-js for rendering SVG to PNG
• Express.js as API server
• TSX for supporting JSX/TSX files

Endpoints of server

Image http://localhost:3000/image?secret_key=...
-- can be used for preview and Alias plugin

API http://localhost:3000/api?secret_key=...
-- can be used for Redirect plugin

JSX components

You can use regular JSX components (similar to React), but without hooks, as screen is rendering only once.
Starting point is App.tsx
It's easier to collect all variables and data in one place, before components. But you can change to any structure that you prefer.

Layout design limitations

• Satori supports CSS Flexbox layout engine only
• it’s not a complete CSS standards implementation
• Each element (like
  ) with a few child nodes should have explicit "display: flex"

Using fonts

To render screen you have to provide a font file. By default is attached Inter.

Including images

You can include local images by using LocalImage component or specify public url to somewhere.

Your Server (Production)

To run your TRMNL server you need any form of server (VM, droplet, pod, instance) somewhere, for example AWS, Google Cloud, Digital Ocean.

• it can be run via Dockerfile or command npm run start
• Better to pass ENV parameters from secure storage that your cloud provider has

Troubleshooting

Check log of errors on device:

https://usetrmnl.com/dashboard > top right dropdown > gear icon > scroll down to "Logs"

Fetch Screen Content as your device (Developer edition):

curl https://usetrmnl.com/api/display --header "access-token:xxxxxx"

---

Goal of this repo: simple and easy to customize.