Melatonin Inspector, a "web inspector-ish" module for JUCE components

Here’s a JUCE module I’m working on, based off of Figma’s UI and @jimc’s Component Debugger from his juce-toys:

Pop the module into your project to visually inspect the UI you are building “in place” as well as visualize the component hierarchy. You can resize components in place, which lets you nudge things around while designing to get accurate numbers without needing to add JUCE_LIVE_CONSTANT everywhere. I plan to expose property display/editing for things like font size, colors…

16 Likes

Great work!

1 Like

Really nice helper when doing UI work… I was just wishing for something like this the other day! And so easy (one line) to add to a project. Looking forward to seeing it develop.

1 Like

I have budget for this project and a list of features I’d like to add. So if working on open source JUCEy things and getting paid sounds fun, please DM me!

Example things I’d like to add:

I currently show “padding” when my custom PaddedComponent is in use. I want to show that in the UI overlay, make it editable, perhaps include the component or some generalized mechanism in the module.

Other things:

  • A search bar for the component tree
  • A “properties” view for things like showing assigned lookandfeels, font sizes (requires some conventions), and some core component things like opaque/cached images, alpha, focus, etc
  • Mayyyyyybe component paint timing and paint log to gain better debugging clarity. Ideally we’d have hooks in JUCE proper for tooling like this, but there’s enough to get started with…
1 Like

V1.2 of Melatonin Inspector is out.

It has a new design, better CMake support and a ton of new features (check out the gifs in the README) like component previews, searching through components, inspecting the distance between components, a property inspector to view look and feels and common component properties, support for component padding, a rudimentary color picker, etc.

Thanks to @dikadk13 for doing a lot of the heavy lifting on the new features.

If others use it and want to participate in development you are always welcome to chip in over on GitHub.

5 Likes