View and edit the code from a component
Code extraction is a foundational capability within the Design studio, enabling enhanced code generation with AI and component visualization.
It automates the retrieval of component definitions and metadata from the app’s codebase, streamlining the developer experience and supporting advanced features like visualization values generation and Gen AI-powered suggestions.
The Design studio uses code extraction at deploy time to update its component previews. This means that updates to components are reflected in the Design studio only after a deployment occurs. If you made any changes to the code of the component in your code base, the code in the Design library will also be updated after redeployment of the environment in Portal.
To view and edit the code of a component variant:
-
In the navigation header, click Design.
-
For the component you want to experiment with, click Open in Studio. When in the Studio, you can use the drop-down menu to display another variant, or a variant from another site.
-
On the top toolbar, in Code
mode, you can see the code of the variant. -
Edit the code and switch back to the Design
mode to visualize your changes.