Melatonin Component Inspector

A JUCE module that gives you the ability to inspect and visually edit (non-destructively) components in your UI.

It's inspired by Figma (where I prefer to design UI), browser web inspectors and Jim Credland's Component Debugger juce-toys.

A big hearty thanks to Dmytro Kiro for many of the current features.

✨
✨✨
✨✨✨
...and what are the features?...
✨✨✨
✨✨
✨

Browse and select components visually

Point n' click to inspect a component, see its size and distance to parent.

Explore the component heirarchy and see what's visible

Preview Component

See what exactly is drawing on a per-component basis, even if it's hidden.

Filter and find components by name

Names are derived from stock components, label/button text, or demangled class names.

Edit component position and spacing

There's like...4 different ways to do this, visually and numerically...

View and edit a components padding

This requires that padding is stored as component properties (e.g. paddingLeft, paddingTop, etc), see my PaddedComponent base class as an example.

Inspect component properties

See the most important component properties at a glance, including look and feels, fonts for labels, etc.

Nudge components around

Verify new values, get things pixel perfect.

View spacing relative to siblings/neighbors

Hold "alt" while component is selected. A Figma inspired feature.

Basic color picker

Displays simple RGB values.

How to install

CMake option #1: FetchContent

Example usage:

include (FetchContent)

FetchContent_Declare (melatonin_inspector
  GIT_REPOSITORY https://github.com/sudara/melatonin_inspector.git
  GIT_TAG origin/main)

FetchContent_MakeAvailable (melatonin_inspector)

target_link_libraries (yourTarget PRIVATE Melatonin::Inspector)

CMake option #2 git submodules and add_subdirectory

If you are a git submodule aficionado, add this repository as a git submodule to your project:

git submodule add -b main https://github.com/sudara/melatonin_inspector.git modules/melatonin_inspector

and then simply call add_subdirectory in your CMakeLists.txt:

add_subdirectory (modules/melatonin_inspector)

target_link_libraries (yourTarget PRIVATE Melatonin::Inspector)

To update melatonin_inspector down the road (gasp! maintained dependencies!?) you can:

git submodule update --remote --merge modules/melatonin_inspector

Tell JUCE about the module

When using CMake, inform JUCE about the module in your CMakeLists.txt. Important: Do this before your call to juce_add_module!!

juce_add_module("modules/melatonin_inspector")

In addition, you'll need to link the module to your plugin, for example:

target_link_libraries("YourProject" PRIVATE melatonin_inspector)

If you use projucer, add the module manually.

3. Add an include to your Plugin Editor

Include the module header:

#include "melatonin_inspector/melatonin_inspector.h"

4. Add the inspector as a private member to your Editor

Pass a reference to the root component of your UI (typically the Editor itself, but you could also inspect another window, etc).

melatonin::Inspector inspector { *this };

5. Set it visible

If you'd like the inspector to be disabled by default, pass false as the second argument.

melatonin::Inspector inspector { *this, false };

This is what I do. I have a GUI toggle to enable it when necessary which calls

inspector.setVisible(true); 
inspector.toggle(true);

FAQ

Can I save my resizes or edits?

Nope! For that, one would need a component system relying on data for placement and size vs. code. See Daniel's Foley GUI Magic.

How is the component hierarchy created?

It traverses components from the root, building a TreeView. In the special case of TabbedComponent, each tab is added as a child.