Create reusable visual components

Problem

Users can build the same pattern in several places, but they have to edit each copy separately. There is no clear way in the Builder to turn a group of elements into a reusable visual component and keep its instances in sync.

This makes repeated layouts harder to maintain and makes large projects slower to update.

Desired result

Let users create reusable visual components in the Builder and place instances of them on pages.

When the source component changes, its instances should update automatically. Users should also be able to change the values that are meant to be different for each instance.

Product scope

• Select a group of elements and create a reusable component.
• Show reusable components in a clear place in the Builder.
• Add component instances to pages.
• Edit the source component without losing its instances.
• Define which values can be changed on each instance.
• Support content slots for page-specific content.
• Make it clear when a user is editing the source component versus an instance.
• Keep existing code components and slots working.

Acceptance criteria

• A user can create a reusable component from existing Builder elements.
• A user can add multiple instances of that component.
• A source edit is reflected in every instance.
• Instance-level values can be changed without changing the source.
• The Builder clearly shows component boundaries and editing mode.
• Existing pages continue to render correctly.

Related feedback

https://github.com/webstudio-is/webstudio/issues/6328