My 'Layout Maker'

[Roccobot]

HeliBoard RLM — a browser-based layout editor

Hi everyone,

I've been using HeliBoard for a while and at some point I decided to build a completely custom layout. The problem is that the JSON → transfer → reload cycle on device gets old very fast, especially when you're tweaking things like popup columns or key widths and need to iterate quickly.

So I built a small tool to solve exactly that: HeliBoard RLM (very unapologetically, it means Roccobot's Layout Maker).

What it is

A browser-based editor where you write your layout JSON on one side and see a live, interactive keyboard preview on the other — no device needed until you're done.

🔗 https://roccobot.github.io/HeliBoard-RLM

What it supports

• Five layout tabs — Main, FnKeys, NumPad, Symbols, Symbols2 — each independently editable, with a validity indicator per tab (✅ / ⚪ / ❌)
• Live preview — letter keys, functional rows, symbols and numpad screens, all rendered in real time
• Long-press popups — including !autoColumnOrder!N, correct row ordering (closest to finger first), and consistent sizing when emojis are mixed with regular characters
• Interactive test area — tap keys, see typed output, cycle through shift/caps states
• variation_selector support — keys can show different variants for default/email/URI contexts
• shift_state_selector and keyboard_state_selector — resolved correctly in the preview
• JSON upload — load an existing file directly into the editor
• Works on mobile too — preview-first layout with a slide-in editor drawer

Known limitations

• No one-click export yet — you copy the JSON manually from the editor
• The optional number row is not rendered
• Monaco Editor on mobile is functional but not perfectly comfortable

A note on the format

The layout format is the one originally designed by Florisboard and adopted by HeliBoard. The editor supports the HeliBoard JSON extension (// line comments) and tries to follow the spec as documented in layouts.md.

Big thanks to the creators and contributors of both HeliBoard and Florisboard: this tool is entirely built on top of their work.

License and source

Source is on GitHub: https://github.com/Roccobot/HeliBoard-RLM
I don't think this actually needs a license, it is a 100% amateur project, but anyway: CC BY-NC 4.0, free to use and adapt for non-commercial purposes.

Happy to hear feedback, bug reports, or suggestions, especially from people who know the format better than I do.

Thank you @Helium314 for maintaining this project. I've been obsessed with it right from the start. Every non-vocal interaction we have with a device happens through text, and being able to build an almost custom-tailored keyboard improves the quality of my writing, while also satisfying my inner geek.

[Helium314]

Thank you @Roccobot !
This is really great! I always had the of making an GUI editor "at some point", but it takes considerable time, and I don't have enough of that.