Export HTML

Copy or save a layer as a single HTML file, or ask an agent to build the design into your own code project.

Copy HTML and Export HTML

Select a layer, usually a screen's frame. At the bottom of the Inspector there are two buttons, in every Inspector mode:

• Copy HTML puts the HTML on your clipboard.
• Export HTML saves it through a Save dialog as <project name>-export.html.

Both use Tailwind classes. To copy plain CSS instead, right-click the layer on the canvas and choose Copy as › HTML + CSS. Copy as › HTML + Tailwind does the same as Copy HTML, and its shortcut is ⌥⌘C.

What it produces

The result is one self-contained HTML page:

• A full document with <!DOCTYPE html>, a viewport meta tag and a small reset. The exported frame sits at the top, centered in a wider window.
• In the Tailwind version, a <script> tag that loads Tailwind from cdn.tailwindcss.com. The CSS version has no such tag.
• Images from the document embedded as data URLs, so the file needs nothing next to it.
• Links to the Google Fonts the design uses, unless you turned off Download Google Fonts in Settings › Privacy & Network.
• Each element carries a data-layer attribute with its layer name, so you can match code to layers.

Layout and text are measured the same way as on the canvas, so flexbox, gaps, sizes and text styles match what you see. Exporting does not change the document. If something could not be embedded, Potlot shows a warning.

Ask an agent to build it into code

To turn a design into real code in your project, ask the agent, for example "build this screen in the app". Potlot ships a guide for this, which the agent reads when you ask it to build, implement or export a design as code. It tells the agent to:

• Explore your project first: framework, language, styling approach, component library and installed versions, and follow its conventions.
• Update existing components instead of adding a second copy, and keep their behavior working.
• Turn the design's components into code components and their instances into uses of them, with overrides as props.
• Turn the design's variables into theme tokens with the same names.
• Use your project's icon package, copy images from the <document>-assets/ folder into your static folder, and load the same fonts.
• Run your type check, lint and build, compare the result with a screenshot of the frame, and list the files it changed.

If your project uses Tailwind, the agent also reads a Tailwind guide. It checks whether you are on v3 or v4, writes tokens in that version's format (@theme in CSS for v4, tailwind.config.* for v3), and does not mix the two.

If there is no project and you did not name a stack, the agent asks, or writes one standalone HTML file if a file is all you want.

Where the code goes

An agent run from Potlot works in the folder the .ptl file lives in, and can write only inside it. Keep the document at the root of your code project, or in a subfolder of it. If the project is in a parent folder, writing there may be refused.

For images and PDF, see Export images and PDF.

Something unclear, missing or broken? Write to feedback@anaknegeri.dev.