DisplayKit is a modern web-based drag-and-drop UI designer for embedded display development.
Design screens visually → generate clean Arduino drawing code → run it on boards like ESP32 / ESP8266 / STM32 / Arduino / RP2040 (and more).
- Use it online: click the GitHub Pages link in the repository, or open:
https://cifertech.github.io/DisplayKit/
- Pick display driver: choose TFT_eSPI or U8g2 OLED from the sidebar (and set your display resolution)
- Create screens: add as many as you like and name the generated function (e.g.
drawHomeScreen) - Add elements: click an element type to add it, then drag / resize and edit properties
- Export:
- Copy the generated code from “Generated Code (TFT_eSPI / U8g2)”
- Export JSON to save a project snapshot (great for versioning)
- Import JSON to restore a saved project
DisplayKit includes tool pages under tools/ and can open them inside the app overlay:
- PixelForge (
tools/pixelforge/): image converter (generate RGB565 headers and import into DisplayKit) - BitCanvas Studio (
tools/bitcanvas-studio/): animation tool (export and copy to clipboard) - Shared tool theming:
tools/theme.csskeeps tool pages visually consistent with DisplayKit
- Undo / Redo:
Ctrl/Cmd + Z/Ctrl/Cmd + Shift + Z - Duplicate:
Ctrl/Cmd + D - Cycle selection:
Tab/Shift + Tab - Align selected:
Ctrl/Cmd + 1..6(left / center / right / top / middle / bottom) - Move selected: Arrow keys (hold Shift for bigger steps)
- Delete selected:
Delete/Backspace - Close Tools overlay:
Esc
- Create multiple screens and switch between them
- Auto-generates a draw function per screen (e.g.
drawHomeScreen()) - Per-screen element lists (clear/reset a single screen without touching others)
- TFT_eSPI mode: full-color UI preview + Arduino code generation
- U8g2 OLED mode: OLED-style preview + U8g2 code generation
- Built-in display settings:
- TFT: rotation (plus UI options for color depth / backlight / touch metadata)
- OLED: preset constructors (I2C/SPI), rotation, contrast, flip mode, font mode, power save
- Shapes: Rect, RoundRect, Circle, Line, Divider
- UI: Label, Button, Header, Card
- Controls: Progress, Slider, Toggle
- Images:
- Import PNG/JPG into the canvas (stored internally as RGB565 for TFT workflows)
- Preview images inside the editor
- Undo / Redo history
- Duplicate elements
- Resize handles (most elements) + drag to position
- Snap-to-grid + configurable grid size
- Zoom (50–200%)
- Background presets + custom background color
- JSON project Export / Import
- PixelForge (image converter) and BitCanvas Studio (animation) can open in an in-app overlay
- Theme sync between DisplayKit and embedded tools (light/dark)
- Generates:
fillRect,fillRoundRect/drawRoundRect,fillCircle,drawLine, text primitives, etc. - Optional TFT_eSprite rendering (
Use spritetoggle) - RGB565 image arrays in PROGMEM +
pushImage()
- Generates:
drawBox,drawRBox/ frames,drawDisc/ circles,drawLine, etc. - Font selection per text element + emits
u8g2.setFont(...) - Note: image elements are currently not emitted in the U8g2 sample code output
- Elements can be assigned an “On click → Go to screen…” action in the editor
- Code output keeps drawing code focused; touch/click wiring is left for you to implement in your input loop
| Display Library | Status | Notes |
|---|---|---|
| TFT_eSPI | ✅ Full | RGB565, sprites, images, colors |
| U8g2 | ✅ Full | Monochrome + full font system |
| Adafruit_GFX | ⚠ Planned | Not implemented yet |
.
├─ index.html # Main app UI
├─ style.css # Main app styling
├─ app.js # App logic (editor + code generation)
└─ tools/
├─ pixelforge/ # Image converter tool
├─ bitcanvas-studio/ # Animation tool
└─ theme.css # Shared theme tokens for tool pages
Want to help make DisplayKit better?
- Submit bug reports
- Suggest new features
- Improve documentation
- Contribute code or UI elements
- Star ⭐ and share the project
Every contribution helps. Thank you! ❤️