Clean UI: Inspector on Click, Lucide, JetBrains Mono

A creative coding tool should look like the thing you’re making, not like an IDE. For a long time, the Lux editor had a browser panel on the left and an inspector panel on the right, both permanently visible, both eating roughly 400 pixels of horizontal space on any screen. Your canvas was whatever was left.

That’s fine while you’re building the editor. It’s not fine when you’re actually working.

No permanent panels

Both side panels are gone by default.

  • Browser panel: hidden. Press Ctrl+B to toggle it if you want it back.
  • Inspector panel: only appears when you have a node selected. Press Ctrl+I to toggle its visibility independently.

When nothing is selected, the canvas takes the full window. Zero chrome. Just your patch.

When you click a node, the inspector slides in from the right with that node’s pins. Click somewhere empty and it slides back out. The inspector goes from “always there, usually empty” to “there exactly when you need it.”

You can still open the Create dialog with Spacebar, search everywhere with double-tap Shift, or use the Tab key for cursor-position fuzzy search. Three ways to get at the node catalog without a permanent browser panel, which means the browser panel was never really necessary.

Project Settings as a floating dialog

The old inspector had a special mode when nothing was selected: it would show “Project Settings” instead, with the resolution preset, the clear colour, and the output mode. This worked but it was confusing, the inspector was simultaneously “node properties” and “global config,” and which one it was depended on whether something was selected.

Now Project Settings is its own floating dialog. Ctrl+, opens it. (The same shortcut as every Mac app’s preferences window, which is where I’m stealing it from.) It floats centred, has the resolution presets and custom W/H, the clear colour picker, and the output mode selector. Close it with Escape or click outside.

Cleaner conceptually, the inspector is for the selected node, settings are for the project, they’re different dialogs. Cleaner visually, the right side of the canvas no longer carries a panel that’s half the time showing the wrong thing.

I did briefly try making settings collapsible inline instead, with expand/collapse sections in the inspector. Built it, shipped it, used it for an hour, hated it, reverted it. Collapsibles are fine for long forms but Project Settings is short enough that a dedicated dialog is just better. One of those “the thing that looked elegant was wrong” moments.

New keyboard shortcuts

The shortcut picture after this session:

  • Space. Create dialog
  • Tab: fuzzy search at cursor
  • Shift Shift: search everywhere
  • Ctrl+S / Ctrl+O. save / load
  • Ctrl+E / Ctrl+Shift+E. screenshot / sequence
  • Ctrl+C / Ctrl+V / Ctrl+X / Ctrl+D: copy, paste, cut, duplicate
  • Ctrl+Z / Ctrl+Y: undo, redo
  • Ctrl+,. Project Settings dialog
  • Ctrl+B: toggle browser panel
  • Ctrl+I: toggle inspector panel
  • F5: toggle output window
  • F9: toggle log level

The goal is that you can do any common operation without touching a menu. Menus are for discovery; shortcuts are for flow. Right now I’m at about 85% shortcut coverage for the operations I do every day, and that’s starting to feel like the right number.

Typography: JetBrains Mono everywhere

The egui default font is fine. It’s readable, it’s compact, it works. But it’s also generic, and it doesn’t match the visual language I want Lux to have. This is a tool built for people who care about type.

So: JetBrains Mono is now the primary font for every piece of egui text in the editor. Panels, inspector labels, tooltips, search results, dialog text, all of it. JetBrains Mono is a monospace designed for developer tooling, with clear distinction between l, 1, I, and |, readable at small sizes, and with a visual weight that feels deliberate instead of default.

The font is embedded in the binary via include_bytes!. No runtime font loading, no network fetch, no platform differences. One font file, 274KB, always present.

Lucide icons

Text buttons are readable but busy. Icons are compact but unclear unless they’re good. The best path forward is a proper icon font with a consistent visual language, and for that I’m using Lucide, an open-source fork of Feather icons with hundreds of glyphs, all designed to the same stroke weight and style.

Lucide ships as an OTF with each icon at a private-use Unicode codepoint, I embedded the TTF as a fallback font alongside JetBrains Mono, and built a constants module with 100+ named icon constants verified against the actual font’s cmap table. You reference icons by name in code:

ui.button(format!("{} Save", icons::SAVE));

The same Merge reorder UI that ships alongside this typography work uses Lucide icons for the grab handle and the up/down chevrons instead of hand-painted shapes. Small change, much cleaner result.

There was one iteration where the icons weren’t rendering: egui was loading the font but the cmap lookup was finding empty glyphs for the codepoints I was using. Turned out I was referencing icon names that Lucide had renamed in a recent release. Verified every constant against the actual TTF cmap table, fixed the six names that had drifted, and it worked. Now there’s a test that opens the font and checks every icon constant resolves to a non-empty glyph.

What the editor looks like now

A canvas. Nothing else until you click something. Click a node and an inspector slides in with JetBrains Mono text and Lucide icons. Press Ctrl+, and a floating settings dialog appears with the same visual language. Everything else (browser, search, create dialog) is modal and goes away when you’re done with it.

The canvas is the tool. Everything else is a guest.

← Back to devlog