The correct way to create reusable components in webstu...

At a glance

The community members are discussing the use of CSS variables and reusable components in Webstudio, a page builder. They explore the concept of "component with props" and the recommended approach of using design tokens and nesting elements. The community members suggest that for now, the only way to achieve "component with props" is by relying on the CMS. They also discuss the use of slots to reuse components that are exactly the same, such as a navigation menu. The community members plan to explore Craft, a tool mentioned in the comments, and are interested in understanding the naming conventions and other details that are still being ironed out.

SSwann | PRYZM

CSS variables are really a nice addition, first time I see a page builder having it as first class citizen.

I am trying to wrap my head around how some programming concepts apply to Webstudio.

What the correct way to create reusable components? Let's I want to simulate the UI of a LinkedIn post and use it in my hero as well as testimonials section.

Should I make use of Slot?

5 comments

JJohn Siciliano

Reusable components (with props) is on the backlog. Slots enable reusing components that are exactly the same...eg a nav so it stays in sync on every page.

So for your use case I'd use tokens like 'Card' or 'Testimonial' and 'Testimonial Title' so the styles are the same on both. (Think of Tokens like classes, but they ditch the issues of classes)

SSwann | PRYZM

Ok make sense, so for now the only way to achieve "component with props" is relying on the CMS basically?

The recommended way is nesting elements / styling them css variables + design tokens.

And then if I want to show 3 testimonials components (with hardcoded props) I simply duplicate the top node?

JJohn Siciliano

Ok make sense, so for now the only way to achieve "component with props" is relying on the CMS basically?

Yeah I suppose so!

The recommended way is nesting elements / styling them css variables + design tokens.

Yes

And then if I want to show 3 testimonials components (with hardcoded props) I simply duplicate the top node?

Yes/sibling instance. Attached are my testimonials

Attachment

SSwann | PRYZM

Makes sense!

just trying to build a mental model for it, I plan to invest myself into Webstudio because I have more and more projects for friends where they need to be able to tweak things, so my usual React/shadcn/whatever is out of the question.

I think I understand pretty much everything now, will explore Craft and start building :O)

JJohn Siciliano

Love to hear it! As for Craft just fyi we are using open props, thats decided, but naming conventions and stuff are still getting ironed out. You can still use it though

Add a reply

Join the Webstudio community

The correct way to create reusable components in webstudio