Github Source
Paste fails when copying images from localhost

last updated 1m ago
Astro Image component
<Image> component
img element
<img> element
public img element
<img> public

To reproduce

  1. Clone the repo: https://github.com/YottaYocta/paper-localhost-snapshot
  2. Run the dev server and open the page in a browser.
  3. Copy one of the images in the component column.
  4. Paste into editor.
Max/min-width is kept when pasting snapshots to Paper

last updated 1m ago

Card with max-width

This element has max-width and min-width set. Copy and paste it into editor.

When an element with a max-width (or min-width) constraint is copied and pasted into editor, the pasted node inherits the constraint. There is no way to overwrite it without creating a new element.

To reproduce

  1. Copy the card in the component column.
  2. Paste it into the editor.
  3. Try to increase the pasted node's width beyond its max-width.
Inline styled text

last updated 2d ago

Some plain text here followed by styled text here

Some plain text here followed by

styled text here but in a div
Snapshot splits non-span elements into their own style, but eliminates any styling within a <p> tag if done through a span
Diagonal buttons

last updated 47m ago
clip-path button
skew button
clip-path button preserved when copied to editor, but doesn't seem to be any option to edit. The other uses skew and loses its styling
Stuff with shadows

last updated 47m ago

SVG

feDropShadow
CSS drop-shadow()
colored shadow
Astro logo
img + drop-shadow()

SVG + Tailwind shadow class

shadow-md
shadow-lg

HTML

Aa

text-shadow

feDropShadow and colored shadow both work; drop-shadow filter not carried over to paper for both images without background and svg elements.

Image filters & blend modes

last updated 22m ago
multiply + hue-rotate
screen + invert
grayscale + overlay
Each example layers an absolutely positioned copy of the image over the original with a CSS mix-blend-mode and/or filter applied to the top layer. Test whether Paper captures the composited result or the raw layers separately.
Interactive element-shader

last updated never
A multipass webgl shader (GLSL ES3). Produces blank image when copied
Complex transforms

last updated 2d ago
Card A
Card B
Card C
tilt card
Rotation preserved in editor for rotation example. Skew not preserved