Broadly speaking, there's two ways to integrate Handoff's code into your codebase. You can use it by copy-pasting the markup and styling, or you can import the components as a UI library into your codebase. For most projects, the latter is the preferred way, because unlike simply copy-pasting the code, it prevents the code into your codebase from diverging from Handoff, and as such allows you to keep using Handoff as part of an iterative development workflow.
If you would like to use Handoff as a tool to quickly generate markup and styling, you may use it by copy-pasting the HTML and CSS into your codebase. You can do this by either using the shortcuts or the Code tab from the Handoff designer, or by copy-pasting the code from the exported files.
The best way of using the Handoff code is by exporting it as a UI library, and pulling it in as isolated components into your codebase. The components that Handoff exports strictly follow the single-responsibility principle, meaning that they only consider themselves with the visuals, with how things look. While this may sound as a limitation at first, this is actually a huge benefit, because it allows you to develop and improve the UI in separation from the rest of your product's code, such as the API connections and business logic.
<aside> ⚠️ The feature set needed for using Handoff's exports as a UI library is currently in progress. Keep an eye on this page because we'll update it as we work towards full feature coverage for UI libraries. Read more
</aside>
If you want to dive straight into using Handoff's UI library, read the following article: