↔️HTML with CSS
Paste HTML with style blocks and convert CSS classes into Webstudio styles.
Last updated
Was this helpful?
Paste HTML with style blocks and convert CSS classes into Webstudio styles.
When you paste HTML that includes <style> blocks, Webstudio extracts the CSS rules and converts class-based selectors into design tokens. Use this when you want pasted markup to become editable Webstudio components instead of remaining embedded code.
Copy HTML that includes a <style> block.
Paste it onto the canvas in Webstudio.
Webstudio creates the component structure and applies matching class styles as reusable style tokens.
If a nested selector references elements not present in the pasted HTML, Webstudio shows a notification listing the skipped selectors.
If the pasted HTML/CSS references image URLs, such as <img src="..."> or background-image: url(...), Webstudio uploads those images into Assets and rewrites the pasted components/styles to use the uploaded assets.
CSS – Paste CSS declarations into the Style Panel
HTML with Tailwind – Paste HTML containing Tailwind utility classes
Referenced images – Understand image handling during paste
Design tokens – Learn how reusable style packages work
HTML Embed – Embed custom HTML when you do not need native Webstudio components
Last updated
Was this helpful?
Was this helpful?