Lopaka Docs

Lopaka is a browser-based graphics editor for designing embedded UIs and generating code for display libraries like U8g2, TFT_eSPI, AdafruitGFX, LVGL, ESPHome, and more. Use the guides below to get started or go deeper on a specific topic.

Getting started

Getting Started — Sign in, create your first project, and get to the editor in a few steps.

Editor Overview — A tour of the editor layout: the canvas, layers panel, inspector, code panel, and top bar.

Platforms — How to pick the right platform for your display hardware, and what changes when you switch.

Working in the editor

Importing Images — Bring in PNG or BMP files, use the built-in icon packs, and control how bitmaps are converted for your target platform.

Fonts — Font formats by platform, how to pick built-in fonts, and how to import custom fonts.

Keyboard Shortcuts — Full reference of keyboard shortcuts for selection, editing, zoom, and tools.

Code

Code Generation — How Lopaka turns your design into source code: wrapper functions, layer names, variables, code settings, export options, and code import.

Plans & pricing

Subscription Plans — Compare free and paid plans, features and limits.

Platform guides

ESPHome — Step-by-step guide for designing a UI in Lopaka and wiring it into an ESPHome YAML configuration.