How to show Element only in the Designer

theres probably multiple ways to tackle this but I'll take a stab. You could add an HTML Embed to the canvas and bind an expression to conditionally show it. It will show if the system.origin is equal to your project subdomain. This should work if you don't use the subdomain as your actual site. System.origin translates to whatever the domain you are currently viewing. So on a custom domain it would be yourcustomdomain.com but in the editor it uses the subdomain

system.origin === 'https://<yourprojectdomain>.wstd.io'

why do you neeed this in the first place?

I want to display the grid for the design phase and not set the element to display none every time before publishing. Timothy Ricks also has such an element in the lumos styleguide.

Can you point me to this video please? I am curious to better understand the use case to better understand the ideal solution

webflow has this guide fyi

ive personally never used it before though

yeah, I am curious to see what this grid is about from Timothy

@Oleg Isonen here you are: https://preview.webflow.com/preview/lumos-framework?preview=2e29e1d3721c84bd8fed760aba33f39c&pageId=6591dcd6101110d6ecc2153c (go to Style Guide to see what Mano is talking about)

I see, that's interesting, is it because wf's native guide is not flexible enough to set up the exact grid cell size?

@Mano would just turning on and off manually be an option? especially since we now have a very handy quick on/off switch directly in the navigator?

Or do you think it also needs a safeguard for automatic off when published and forgot to turn it off?

to finally answer that speicific question, here is a selector you could use to achieve that hiding in prod:



Though with caution, just like with ".wf-design-mode", that attribute is internal implementation detail and can change in the future.

I do want to think in more detail about these guide lines, so we can have them without the need for this hackery and in a way that works for everyone

created an issue, please follow for updates https://github.com/webstudio-is/webstudio/issues/3850

Yes, exactly. I never used wf's native guide but.

I've been using T.Ricks' flexible grid approach ever since I discovered it.

I think it also needs a automatic off when published... would be very smart!

Figma has also a very good implementation of grid