HTML/CSS Export
Export clean HTML and CSS code directly from your designs. Copy and paste into any project.
What is HTML/CSS Export?
Every design you create in Stitch is backed by real HTML and CSS code. The HTML/CSS export feature lets you access this code directly, copy it, and paste it into any web project. The generated code is clean, semantic, and well-structured — not the messy auto-generated output you might expect from a design tool.
How to Export
Select any screen on your canvas and click the "Code" or "Export" button. You will see the HTML and CSS displayed in a code panel. You can copy the entire code block or select specific sections. The HTML uses semantic elements (header, nav, main, section, footer) and the CSS uses modern features like flexbox and grid for layout.
Using the Exported Code
The exported HTML/CSS is standalone — it works in any browser without dependencies. You can paste it directly into a static HTML file, integrate it into a templating system, or use it as a reference for building components in React, Vue, or other frameworks. The code is well-commented and organized, making it easy to understand and modify.
Customizing the Output
While the exported code is production-ready for simple pages, you will likely want to adapt it for your specific tech stack. Use the HTML structure as a blueprint for your components. The CSS can be converted to Tailwind classes, CSS modules, or styled-components. The key value is the accurate layout and spacing information that would take hours to code manually.
Tips & Best Practices
- 1Export the HTML/CSS early to validate that the design translates well to code.
- 2Use the exported CSS variables as a starting point for your design tokens.
- 3The generated code uses responsive units — test it at different viewport sizes.
- 4Combine HTML/CSS export with DESIGN.md for a complete design-to-code handoff.
- 5For framework-specific code, use the MCP server integration instead.