docs /paste/html
Paste from HTML

Paper lets you import HTML right into your canvas as editable layers. Import a local file, an element from a site’s DOM tree or a code example in a few keystrokes.

Overview

Images

Images from <img> elements and background-image styles are uploaded to Paper. Make sure the URLs for these images are publicly available, otherwise Paper won’t be able to access them and they won’t come through.

Custom elements

Paper supports custom elements to enable extra features.

  • <x-paper-clone node-id="…"> clones an existing node in the file by ID. This is particularly useful for agents to duplicate elements inline instead of recreating them.

Custom attributes

Paper supports setting custom attributes on elements to affect their behavior when pasted onto the canvas.

  • layer-name="…" will set the layer’s label
  • data-paper-locked will make the layer locked
  • hidden will make the layer invisible

Translation notes

Styles

Only inline styles are supported. Class names will be dropped, and any style applied through a CSS selector will be ignored.

Text

Paper doesn’t yet support “rich text”, meaning multiple text styles within a single text node isn’t possible just yet (think for instance a bolded word within a sentence). When pasting HTML, the design intent is preserved where possible. However, until Paper supports rich text, some translation is performed:

  • Block level elements with only inline children are flattened to a single Text node
  • Inline elements are changed to inline-block
  • Frame styles are separated from text styles with the creation of a wrapping frame

Other

  • All elements have box-sizing: border-box set inside Paper
  • Inputs are transformed to frames with text children
  • Hidden elements remain hidden (display: none and hidden attribute)
  • Redundant styles are stripped, such as gap on non-flex/grid containers