Preview Mode
Previewing your components to see how they will look in a live environment
Preview Mode is an easy way to view how your component will look when deployed in a live enviornment. This includes being able to see how featuers such as list or grid will behave or rollover elements to see the tooltips setup. You can also preview bindings to try out different options without editing the bindings you already have set up. In Preview Mode, see the renderedd page with all nested children and have the ability to see all the states for the main component and any nested child component inside of it.
When in the Quest Editor, you can access the Preview Mode by pressing on the Preview button at the top of the page. By pressing this button, you will launch the Preview Mode in a new tab. Depending on how many nested children are inside the component you're previewing, it can take a little longer to load than the Editor itself.
Once inside the Preview Mode, if you used variants to create states on the component or any children components, you'll have access to view them and see them all with the Component States menu. Use this to quickly see how all options will look.
Preview Value for Preview Mode
When setting up bindings in the Editor, adding a Preview Value to bindings will override any real bindings you have set up. In the image example above, the value for this text title is coming from a function, but the Preview Value is simply a text string for testing purposes only. When in Preview Mode, that value will display instead of the function which may cause it to look blank. This is a good way to quickly try out alernate data than what was in the original design from Figma.
Last modified 5mo ago