I built a free VS Code extension that lets you design openHASP screens visually instead of hand-writing pages.jsonl

[prasen12]

I've been running openHASP plates for a while and the part that always killed my
motivation was the layout loop: hand-write a line of pages.jsonl, guess at x/y/w/h,
upload, squint at the screen, discover the button is 12px off, repeat. Then do the
whole thing again in configuration.yaml to actually wire it to Home Assistant — and
keep every p1b3 id in sync between the two files by hand.

So I built openHASP Page Editor, a VS Code extension. It's free and MIT licensed.

What it does:

• Drag-and-drop canvas sized to your actual display. Move/resize/nest widgets, snap
  to grid, x/y/w/h update as you drag.
• The preview is honest. Point it at the icon font your firmware was built with and
  at a local copy of your device's LittleFS folder, and it renders your \uXXXX icons
  and your L:/logo.bin images the way LVGL will draw them — including LVGL .bin
  files.
• Home Assistant bindings per widget. Pick an entity, pick what it does on press or
  drag, and it writes the objects: YAML for the openHASP custom component for you.
  Sliders correctly derive brightness instead of on/off, multi-select action targets,
  page-navigation actions that need no entity at all.
• Live values on the canvas. Toggle ⚡ Live HA and bound widgets show real entity
  states, refreshed every 10s. You see the actual layout with the actual text lengths
  before it ever reaches the plate.
• Jinja editor with autocomplete for entity ids, states/is_state/state_attr,
  and filters — plus one-click render against your live HA so you catch template
  mistakes in the editor. Any property can be templated, not just val/text.
• Import your existing pages.jsonl — it keeps properties the editor has no field for
  and leaves them editable, so nothing gets dropped.
• Upload straight over MQTT while iterating, or export the .jsonl when you're done.

Multi-page with the page 0 overlay is supported, and there's a tree view of every
design → page → widget so you can click your way to a widget instead of hunting for it.

Fair warning: it's early (v0.1.x). I use it for my own panels, so the paths I walk are
solid, but you will find rough edges — please open an issue if you do, that's the whole
point of posting.

Marketplace: https://marketplace.visualstudio.com/items?itemName=PrasenPalvankar.openhasp-editor
Source: https://github.com/prasen12/openhasp-editor

Happy to answer anything about it.

[prasen12]

I also built a Claude skill that will generate most of the design and page definition for you by querying your Homeassistant. The image in my earlier post shows the pages generated using this skill.
You can install the Claude skill using the /plugin command in Claude:

/plugin marketplace add prasen12/openhasp-page-skill
/plugin install openhasp-page