Code component styling capability

Plasmic Studio Questions
1

Hi. Any chance to see the code components editing functions in the future? Or is it possible to edit the code components now?

2

Hi @slight_mosquito, what do you mean by editing code components?

3

@tiago I mean to change the visual styling of the components

4

If your code component accepts a className prop, you can already style it in studio. For example:

function Text({ className }: { className: string }) {
  return <div className={className}>Test text</div>;
}

PLASMIC.registerComponent(Text, {
  name: "Text",
  props: {},
});

… produces a component that you can use in studio as in the attached video.

5

got it. Thank you so much

6

@tiago one more question: if we’ll make such code components in one Plasmic project, then what is the best practice to import it into another Plasmic project?

7

The thing we’d like to achieve is to build a design system, import it to a Plasmic project and edit it there.

8

Hey @slight_mosquito! You should be able to import a project with components that use code components. The important thing here is to use the same app host in both projects in order to provide the same code components.