How to allow designers to enhance code components visually

@valuable_herring and @yang thanks for the reply. This was a code component. I was hoping that we could make code components with some basic app logic, but then let the designers use the studio to enhance them visually. It does make sense that this may not work in the same manner.

Can you please share your usecase in detail?

  1. You can let the designers enhance that particular button component by exposing props using Code Components API and let designers tweak the component using those props instead of creating a new component out of it.
  2. If for some reason you want to create a component out of code component, then something like this should work
    a. Utilize className prop in your code component. It will let us style the button from the studio using the style properties section appearing on the right.
    b. We can create different variants of the button while keeping the business logic within the code component intact.
    I can share some specific details on the 2nd point, if I can understand your particular usecase.

@delicious_hare Like @zonal_mammal mentioned, you can simply make code components take className and then designers can style them.

For more complex/flexible cases, you can also break up your code component into multiple components so that your designers have a complete set of building blocks to arrange in whatever layout they want (and communicate using, say, React contexts). E.g. our data fetching components all work this way, this approach is described a bit in

LMK if that helps!

I think I’m having trouble explaining the issue. Let me try again. Here are the steps I followed.

  1. Created a Code Component (named UiButton) that does accept className as a prop
  2. Added that Code Component to a Page on the studio
  3. Updated the design of that Code Component using the studio
  4. Right-click and create a component on that Component.

At this point, I can go to my Components panel and select that Component that I made out of the Code Component. I can edit the design of that Component and override the children, which is the button text.

However, in my Page, where the new Component is in use, I cannot edit the look and feel of the component or edit the button text. Its like a read-only version of the component.

Here are some screenshot examples.

This is the Ui Button - which is the Code Component - on my Page. I can select the variant, which is a prop on that button, I can even override the design in the right hand panel.

On Button 5, I made some edits, then right-clicked and created a component out of it. Here is what it looks like in the Components section of the studio. I can still edit it further in the studio, as well as change the button text - which is the children slot.

However, in my Page that the component is now used, I no longer have access to edit the button text, or update attributes of the design in studio. I can edit the component in place, but what I want to do is override things. For example, I may want to set the button text to something different just on this button, not on every instance of the button.

After converting the UIButton to a new component Test123, you have used the new instance of that Test123 component inside the Page. You can only override the variants and slots that are created/exposed by the new component.

For example, if you want to update the children text. Inside the component Text123, right click on the text and convert it to slot. It will then be accessible in the instances inside the Page.

You can create different variants inside the Text123 component and then those variants will be available in the Page as well.

You can also right click the props on that component to link them on the newly created outer component