symfony-ux
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
Symfony UX helps you choose between Stimulus, Turbo, TwigComponent, LiveComponent, Icons, and Map for your frontend needs.
AI-generated summary based on this skill's SKILL.md
Install
smnandre/symfony-ux-skills/symfony-ux
git clone https://github.com/smnandre/symfony-ux-skills
cp -r symfony-ux-skills/skills/symfony-ux ~/.claude/skills/symfony-uxFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Which Symfony UX package should I use for my project?
Symfony UX helps you choose the right tool based on your needs. Use Stimulus for DOM behavior and event handling, Turbo for page updates without full reloads, TwigComponent for reusable static UI blocks, LiveComponent for server-driven interactive components, UX Icons for SVG icon rendering, and UX Map for interactive maps. Your choice depends on whether you need simple interactivity, page-level updates, or full reactive components.
How do Symfony UX tools work together in an application?
Symfony UX packages compose to build complete frontend solutions. Stimulus provides low-level DOM control, Turbo handles navigation and partial page updates, TwigComponent and LiveComponent manage UI structure, and UX Icons and UX Map add specialized features. You can combine them—for example, using Turbo frames within a LiveComponent or Stimulus controllers to enhance Turbo behavior. Symfony UX guides you on which combinations work best for your architecture.
Should I use Turbo frames or LiveComponent for this feature?
Symfony UX distinguishes these approaches: Turbo frames excel at replacing page sections with server responses, ideal for navigation and simple updates. LiveComponent is better for interactive, stateful components that need real-time validation or complex user interactions. Choose Turbo frames for page-driven workflows and LiveComponent for component-driven interactivity. Symfony UX helps you evaluate your specific use case to make the right decision.
What's the difference between Stimulus and Turbo in Symfony?
Symfony UX clarifies that Stimulus is a lightweight JavaScript framework for adding behavior to DOM elements—ideal for event handling, form interactions, and DOM manipulation. Turbo handles page navigation and partial updates by intercepting links and forms. Use Stimulus for fine-grained interactivity and Turbo for seamless page transitions. They often work together: Turbo handles navigation while Stimulus enhances specific components with behavior.
How do I make Symfony pages interactive with the UX stack?
Symfony UX offers multiple paths to interactivity. For simple DOM interactions, use Stimulus controllers. For page-level updates without reloads, use Turbo. For reactive, server-rendered components with real-time feedback, use LiveComponent. For static UI reuse, use TwigComponent. Start with the simplest tool that solves your problem—Stimulus for basic behavior, then layer in Turbo or LiveComponent as complexity grows. Symfony UX guides this progression.
When should I use TwigComponent versus LiveComponent?
Symfony UX distinguishes these by interactivity needs. TwigComponent is for reusable, static UI blocks rendered once on the server—perfect for consistent design patterns. LiveComponent adds server-driven reactivity: it re-renders on user actions, handles validation, and maintains state. Use TwigComponent for presentational UI and LiveComponent when you need interactive, stateful behavior. Symfony UX helps you recognize which pattern fits your feature.
SKILL.md
rendered from the published skill — quoted content, verbatim
Symfony UX
Modern frontend stack for Symfony. Build reactive UIs with minimal JavaScript using server-rendered HTML.
Symfony UX follows a progressive enhancement philosophy: start with plain HTML, add
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/symfony-ux/SKILL.md