ZMK Display Studio

Studio notesHow to Use

From your image
to your keyboard.

Five steps from a source image to firmware-ready artwork. Try the built-in sample if you want to get a feel for the controls first.

Choose an image

Open the editor and choose a PNG, JPEG, or WebP, drag a file onto the source area, or select Or try a sample. Images are opened locally in your browser.

The file limit is 10 MB, with a maximum of 40 megapixels and 16,384 pixels on either side. SVG and animated artwork are not supported; animated raster sources use the browser-decoded frame.

A useful starting point: pick a clear subject, bold silhouette, or uncluttered composition. Tiny text and subtle details can disappear on a small monochrome display. Transparent areas are composited onto white before processing.

Compose your crop

Compose in the portrait orientation you see on your keyboard. Drag the image to pan in the source editor or the Physical, Pixels, and Source previews.

  • Fill area covers the canvas, cropping the edges when necessary. New images start this way.
  • Fit image shows the entire image. Any uncovered space starts white.
  • Center recenters the image without changing its zoom.
  • Reset returns the composition to a centered fill.
  • Zoom lets you crop more closely. The displayed 100% means “fill the artwork area.”

For precise placement, focus the artwork with Tab, then use the arrow keys to move one physical pixel. Hold Shift to move 10 pixels at a time.

Compose in the 68 × 140 portrait artwork area. The editor rotates the finished pixels 90° clockwise into 140 × 68 framebuffer artwork. The status strip is shown for context and excluded from export.

Find your monochrome style

Use the Adjustments panel to choose a processing method. On smaller screens, open Settings in the workspace toolbar.

Threshold — clean edges

Turns each pixel black or white using a single cutoff. Start here for logos, line art, and strong shapes. Adjust the Threshold slider to change that cutoff.

Floyd–Steinberg — more shading

Uses fine dot patterns to suggest gray tones. It’s the default and a useful starting point for photographs and detailed illustrations.

Atkinson — an airier texture

Produces a lighter dot pattern with stronger contrast. Try it when you want a more graphic, retro-looking result.

Tune Brightness and Contrast, then try Invert colors to swap black and white. Reset adjustments restores processing defaults without changing your crop. The Threshold slider applies only to Threshold mode.

Check the previews

  • Physical: a portrait device simulation, including the top status strip. Use it to judge the overall composition.
  • Pixels: enlarged physical artwork with crisp, integer-scaled pixels. Enable Pixel grid to inspect individual pixels; the grid appears at 3× enlargement and above.
  • Framebuffer: the rotated artwork bitmap passed to the ZMK/LVGL encoder. This is an inspection view, so you cannot pan here.
  • Source: the transformed crop before monochrome processing. Use it to separate composition changes from processing changes.

Switching previews preserves your composition. The simulated status strip is excluded from export, and a physical screen may look different from the browser simulation.

Export your artwork

  1. Select Export once your image is ready.
  2. Give the artwork a name. The dialog shows the C symbol generated from it.
  3. Choose a ZIP package. For replacing stock peripheral artwork, start with nice!view customization.
  4. Inspect or copy the C code, download art.c, or download the full ZIP.

Download ZIP includes the integration files for the selected package and its installation README. Download art.c downloads only the image asset, regardless of the selected package.

After a download starts, a congratulations screen shows installation steps for the file or package you downloaded. Select Don’t show this again to turn off automatic celebrations for all downloads in this browser. View installation steps remains available after a download; reopen it and uncheck the option to turn celebrations back on. Copying C code keeps its inline confirmation.

For the full instructions, follow the Export Guide to integrate the files, rebuild your firmware, and flash the peripheral half. The editor generates assets; it does not build or flash firmware.

Your next little project

Make a few pixels your own.

Start with an image. Or see what the sample can do.

Open editor