Join the Webstudio community

Updated last year

Turn peaces of the developed UI into reusable components

At a glance

The community members discussed the need for a feature in Webstudio that allows turning parts of the canvas into reusable components, and the ability to individually edit these components within the canvas. The comments indicate that an "isolation mode for components" is on the roadmap, and that the team plans to first ship a CLI with whole pages. The community members also discussed the need to be able to "mark" instances as components so they can be generated as importable, as well as the ability to configure a component from the UI, including isolation mode, variants creation, bindings creation, and an infinite canvas for experimentation and A/B testing.

I think a feature to turn peaces of the canvas into reusable components is essential for a tool like Webstudio. And, be able to individually edit theses components in the canvas would be very helpful.
O
m
B
9 comments
When you say pieces of the canvas, what do you mean specifically?
pieces of the de UI that are being developed by the user
Do you mean pieces of the page?
Isolation mode for components is on our roadmap
First we will ship cli with whole pages
exactly. Given a page I want to be able to select a component (and it's children) and turn it into a reusable component
We discussed it with Oleg a couple days ago
Yeah, main thing that is missing is "marking" instances as components, so we can even generate those components as importable.
A larger story to this is ability to configure a component from the UI, that would include:
  1. isolation mode
  2. variants creation
  3. bindings creation
  4. potentially an infinite canvas that allows creating many variants for experementation and AB testing
Add a reply
Sign up and join the conversation on Discord