Join the Webstudio community

Updated 4 weeks ago

Wormholes/Anti-Slots: Unique Content within Slots?

In Webstudio, slot contents are identical between instances.

Any instance-unique contents within a slot need to come from a Resource or other variable.

This is very powerful, but for me there's at least one drawback. I'd love to have reusable page/component structures (Slots) that have portions of content (within the slot) that are:

  1. unique to the Slot instance
  2. and can be designed visually in Webstudio
  3. and may include native Webstudio components
Populating content within a slot via a Variable or Resource accomplishes #1.

Rich text, via Markdown and Content Embed, accomplishes #2. But editing is done via CMS or within the variable editor in Webstudio, not on-canvas as with ordinary components.

And unless I'm misunderstanding, #3 isn't possible within a slot.

So I'm wondering if there could be a component (an Anti-Slot? a Wormhole?) that serves as an exception to the repeatable contents of an ordinary Slot. Any contents inside this anti-slot could be composable within the Webstudio visual UI as any normal hierarcy of components, and would be unique to that particular Slot instance.

I made a little mockup of the idea in the screenshot. "Anti-slots" and content are green, within the purple slot content.

This would allow reusable structures defined by Slots, with optional unique elements inside them, but unlike doing so with Variables/CMS, everything could be visually designed with Webstudio.

I have no idea how crazy and/or difficult this idea would be to implement, but I imagine it might be really useful for:

  • people who need easily reusable layouts but don't necessarily need/want a full CMS
  • people who are using a CMS, but may not need/want every piece of content mapped to a content model in the CMS
Attachment
ws-anti-slot.png
S
p
O
12 comments
What you're hinting to is called an override. This is a principle that is widely used in UI tools like figma, where you set up a component, that has variants, which in turn, may or may not have overrides for particular fields of data.
Framer has a very good implementation of variants and a semi-usable implementation of overrides. Still far from perfect, but it does the job for paragraphs and such
I guess, to some extent this can already be done by using dynamic data. but I'm not sure how it would behave.
Thank you, I figured there would be a term for it! Good to know that it's available in other tools. It will be interesting to learn if it fits with Webstudio's vision as well.
Yes, I mentioned that in the post, but dynamic data doesn't permit using Webstudio components or editing visually (beyond composing markdown or HTML in the built-in editor)
Since I'm testing the tool this week quite extensively, I'll have a look as well, when I get to testing shopify
I'm really curious if there's no workaround for this
thank you, looking forward to hearing what you find
looking forward to that, thanks Oleg
will these be nestable? so a page layout component could contain other custom components, with or without overrides
i'm guessing this is something for late 2024/early 2025
Add a reply
Sign up and join the conversation on Discord