Code & Preview Mode
Previewing & Editing your components & code 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.
Accessing Code & Preview Mode
When in the Quest Editor, you can access the Code & Preview Mode by pressing on the Code button at the top of the page. By pressing this button, you will launch the Code & Preview Mode replacing the Editor Mode. Depending on how many nested children are inside the component you're viewing the code for, it can affect the load time.
In this mode you will see 3 panels. The furtherest panel to the left is your App structure. Here you can see all the files that will be generated for the App. It will open the component file for the presentation layer to start but you can navigate and explore the other files. These files are all read-only in this mode but you can always download the code or push to GitHub to make changes to anything you'd like.
The files that you can edit are the files for the components. In the middle panel, you'll see a preview of the code or image you select. In the screenshot example above, the "HandDraw04.jsx" file is the presentation layer file generated for the layout and styling of the component. Here you can edit the styling but you cannot rearrange the structure or add or remove features. Currently, structure must come from design and features must be added and removed from the Editor mode in Quest. (Ability to fully change is coming soon).
If you've added any functionality with bindings, we'll also generate a hook file for you. This will be a "use" file and in this case the file would be called "useHandDraw04.jsx". Here you can make changes to the file as you see fit. As the initial load into Code & Preview Mode will just show a preview of the component on the right side, if you make changes to the code, you'll need to press the "Run" button at the top to see the changes.
If you have nested components inside the component you imported, you'll also be able to see those files and make edits to them as well.
Previewing with Different Text
When setting up bindings in the Editor, adding a Preview Value to bindings will override any real bindings you have set up. These preview values are what you will see the first time you load Code & Preview Mode but any time you press the "Run" button, they will be overridden to display the real values that are set. 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 Code & Preview Mode for the first time, that value will display instead of the function which may cause it to look blank. This is a good way to quickly try out alternate data than what was in the original design from Figma.
This new Code & Preview Mode replaces the older Preview mode that was represented by a play icon. That mode has merged with this new one.
Last updated
