Skip to main content

Widget Designer

tip

Make sure to have a basic understanding of React and NPM packages.

The Widget Designer is the main tool in the Widget Builder. Using client-sided React, to create a functional React component we are able to create Widgets.

The Widget Designer has access to Environment Variables, Images and Fonts described in earlier sections. These are accessible as simple props in our React Widget function.

warning

Widgets are client-side React components, not server components. This means NPM packages which are for NodeJS will not work. More is explained in the Dependencies section.

Features​

NPM Packages​

Use any NPM package by specifying an import statement at the top of the file, like so:

import { format } from "luxon@1";
info

View our library of components and hooks you can use to build your Widget here

More information in the Dependencies section.

TailwindCSS​

Full support for TailwindCSS.

It is encouraged that Widgets are styled this way because:

  • Hand crafted TailwindCSS config made specifically for E-ink displays
  • Setting fonts is via tailwind classes
  • Auto-complete support for Tailwind Classes
  • A standard across Widget to Widget
  • Automatic Widget Dark Mode support

Prettier formatting​

Formatting can be done in two ways:

  • Edit -> Format
  • Keyboard shortcut
    • Mac: Command + Shift + F
    • Windows: CTRL + Shift + F

Preview Pane​

The Preview Pane shows a render of what the Widget would look like, so you can develop and see changes in real-time. Changes to the Widget are reflected immediately for fast feedback and iteration.

The Widget in the Preview Pane can be resized by dragging to illustrate what it would look like in different sizes on a Page.

tip

Be sure to design responsive Widgets so that it looks great in all sizes!

Fonts​

After installing Fonts, you can use a font by specifying the Tailwind class for it. More information here

Props​

All ingredients for the Widget are all available in the props of the function. This includes Environment Variables, Images, Fonts and the user's Frame's details such as the dimensions of the Frame and their time-zone.

Since it is all TypeScript, it is all strongly typed with auto-complete.

Output​

Widget​

You can use the Output section at the bottom of the Widget Designer to debug your Widget. You can also use the Output to console.log variables for further debugging. Errors will also be logged here.

By default, the Output has auto-scrolling, so the latest log can be visible, but this can be turned off.

Type definitions​

You can see what type definitions the Widget Designer's Code Editor trying to load in this section of the Output. Once Type Definitions are loaded, auto-complete will be available.