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. Some styles may be imported into the style field in Plasmic instead of our native controls — we’re working on improving these.

You can use design tokens if they follow the format var(--token-name) or var(--token-uuid), see example in the section below.

Best practices for generating Plasmic-ready HTML using AI

When generating websites with AI, you can use the following prompts to make sure you get production-grade results ready for smooth import into Plasmic:

Any of the images that are used should be publicly accessible. Feel free to use online image services, like picsum.photos with (Optional: you can also include the desired format for the images, like https://picsum.photos/200/300.jpg)
Don’t use CSS frameworks like tailwind or bootstrap, instead use plain CSS or inline styles.
Be as creative as possible — look up modern looking websites online and investigate the current trends.
Make sure to use nice looking fonts (**Optional: ** include the list of preferred fonts in the prompt, like Inter, Montserrat, etc.)
Default content should resonate with the topic — websites looks way different when it is filled with lorem ipsum vs. real content.
You can use inline SVG’s for crisp icons and illustrations on any screen size.

Current limitations

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

Effects, transitions, transforms
Animations (@keyframes)
Using your existing components

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.