Symfony UX devtools

UX Inspector

Find every Stimulus controller, Live Component and Turbo frame. Inspect its state, follow its relationships and trace the events moving through the page. 

composer require --dev symfony/ux-inspector
UX INSPECTOR

What UX Inspector reveals

  • Pick from the page

    Select a rendered element and jump straight to the component behind it.

  • Live state

    Watch values, props and attributes update while the application runs.

  • See relations

    Follow parents, children, outlets and nested components in context.

  • Trace events

    Read dispatched and received events in the order they happen.

  • No build step

    Install the bundle and open the Inspector in your application.

Built for Symfony UX

Every controller, component and frame.

Stimulus values, Live Component props and Turbo frame state, side by side in one panel while the application runs.

Stimulus

  • Values and defaults
  • Targets and CSS classes
  • Actions and parameters
  • Outlets and nesting
  • Connection status
  • Controller events

Live Components

  • Props and parent props
  • Models and modifiers
  • Actions and arguments
  • Event listeners
  • Loading and polling
  • Parents and children

Turbo

  • Frame attributes
  • Loading and state
  • Links and forms
  • Nested frames
  • Fetch and render events
  • Stream actions

Install Inspector.

$ composer require --dev symfony/ux-inspector

Type u x on any page to open the panel.

Keep Inspector at hand.

Documentation, the people behind it, and where to ask when something does not behave.

Documentation

Symfony UX Inspector Docs
Community

Feedback · support · contributions.
Support

Get help with Symfony UX Inspector