Preview Color and CSS changes screen in SAB

Can we have a preview screen to view the changes we make to the colors and CSS with in SAB? Currently we need to build the app and test it inorder to check those corrections/changes.

Currently there is no user guide or easy way to identify the color/css handles/modifiers.

We found the below topic useful, but it’s incomplete. It would be appreciated if there’s some additional guidance made available in SAB documentation.

:calling: Site to help you find css handle/modifier quickly (it’s not allowing us to include the link here, please search with the topic subject, or anyone who have access to share link, please post it as a comment @apaul)

This would be highly beneficial and a massive time saver.
I would also like to mention a toggle for sepia and dark mode if they are enabled for the app.

To avoid actual builds of the app, the previewer only shows ‘example or dummy’ screens to view the changes being made. I think this would be more than enough for this idea.

1 Like

I would also highly recommend this feature, as many app builders have questions about css handles, and how to preview changes after making these color changes. Having a preview screen will be much helpful for such customisations.

1 Like

Having to build an app over and over just to try to find the correct UI style is my single biggest frustration with SAB. I fully support this idea.

As a possible quicker solution, since a preview screen might take a bit of programming work, a simple PDF that shows up in the help menu would also be nice. It could simply list ever single Style, with a description and a picture showing where it occurs.

1 Like

OMG! This is going to be awesome. I pray that this idea becomes a reality. It’ll help me a lot

1 Like

I also really like this idea!

1 Like