Tip: Working with a developer? Invite them to your team to share your work and build your UI.
Subframe generates React + Tailwind CSS code for your designs. You can sync your project theme and components, then copy & paste page designs into your codebase so you can refactor and add business logic as needed – knowing your UI remains pixel-perfect.
1. Sync your project using the CLI
Note: Make sure to re-sync after making changes to your theme or components.
Before you open the page editor, click Sync code in the top-right of the nav.
Copy & paste your unique sync command snippet and run it in your CLI.
2. Copy & paste page code
Open the page editor.
Select Code in the top-right of the nav to open the code panel.
By default, the code panel will show the code for the entire page. You can select individual elements on the page to see a code snippet for your selection.
The code panel will show the following for each page or selection:
Snippet to install/sync components.
List of imports.
Generated React + Tailwind CSS code.
Copy & paste the code to your code editor.
Tip: Expand the code panel by clicking the << icon.
3. Add your business logic
Most users from here begin to refactor the code, add custom business logic, and hooking it up to their APIs. This code is all yours to customize!
All components expose React DOM props like onClick and className. Some components like Accordion have special props related to its internal business logic.
Learn more about component docs.
What if I change the design after exporting the page?
You will need to re-export just the parts that have changed. To make this easier, if you have something selected, the Code tab will show just the code for your selection.
In practice, most Subframe users do all design iterations on Subframe and rarely re-export older pages. For small changes, some find it easier to just make the changes in code.