Importing HTML

You can import any raw HTML with CSS and the studio will automatically convert it into editable Plasmic elements.

How to import HTML

Just paste any text that starts with a < into Plasmic. That’s it. Plasmic will detect the HTML, parse it, and convert it into a tree of visual elements. It imports layout, styling, and structure, making the pasted HTML something you can immediately work with in the Studio.

This is especially useful when working with HTML generated by AI tools, code exports from design systems, or snippets from other libraries and frameworks. It gives you a fast path from code to canvas, letting you focus on refinement instead of recreation.

By default any pasted HTML will be wrapped in a vertical container. Styles for flex gaps and grid are working fine, but keep in mind that they will be imported into the style field in Plasmic

Best practices

If you want to use SVG icons, use them as img tags. Inline SVG’s are not supported yet.
Don’t hesitate to use complex styles for backgrounds such as images or gradients.
Set explicit width and height for the images to make sure they render correctly and don’t cause layout shifts, which might decrease your SEO score.
If your HTML contains images, remember that their URL should end with the file format(.jpg, .png, etc)
You can use design tokens if they follow the format var(--token-name) or var(--token-uuid)

Current limitations

This feature is still in beta, so there are some limitations:

Effects, transitions, transforms
Media queries
Animations (@keyframes)
Automatically replacing pasted content with existing custom Plasmic components. You’d have to do it manually.

Example: importing HTML with tokens

Let’s say you have a design system with the following tokens:

If you want to use them in your HTML, you can do it like this:

Copy

<html>
    <style>
        .root {
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            height:300px;
            background: linear-gradient(
                to bottom, var(--token-brand), var(--token-brand-secondary)
            );
        }
    </style>
    <div class="root">
        <h1 style="color: var(--token-text);">
            Welcome to Our Website
        </h1>
        <h2 style="color: var(--token-text); ">
            We are glad to have you here
        </h2>
    </div>
</html>

This will automatically link the values to the tokens in the studio:

Was this page helpful?

Have feedback on this page? Let us know on our forum.