WoneShot
Get started
Next.js • Tailwind • daisyUI

WoneShot turns every page into a shareable screenshot.

Render every project in a real browser, add consistent framing, and reuse the PNG anywhere you document features or ship updates.

Try itSee how it works
Desktop + Mobile
Light + Dark
Cache-friendly
Example outputPNG

Styled screenshots that stay consistent across docs, changelogs, and internal notes.

Live demo

Enter a URL and generate a styled screenshot.

Generate

Settings apply to preview and embed snippet

Screen size

Desktop captures 1440x900. Mobile captures 390x844.

Theme

Uses prefers-color-scheme for light/dark rendering.

Output styling

Frame style

Spin (Z)
°
Rotate X
°
Rotate Y
°
Shadow
px
Size
%
Corner radius
px
Frame margin
px
Perspective
px

Frame margin updates automatically.

Embed snippet

Copy and paste where needed

<Image
  style="transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1); border-radius: 16px; transform-origin: center; "
  src="/api/shot?url=http%3A%2F%2Fgoogle.com&preset=desktop&theme=light&pad=48&style=studio"
  alt="Preview"
/>

This is the snippet copied by the button above.

Preview

Ready to generate
Drag to spin (Z), Shift+drag to rotate X/Y. Served from /api/shot with cache headers.

Features

Built for internal docs: consistent viewports, clean framing, and fast repeat loads.

Presets

Desktop and mobile sizes with predictable results for docs and project pages.

Theme-aware

Render light/dark mode screenshots via prefers-color-scheme.

Embed anywhere

Use a single image URL. Add caching headers and serve via CDN.

How it works

  • Render in headless Chromium
  • Capture screenshot
  • Composite frame + shadow
  • Cache and serve

Embed in 10 seconds

<Image
  style="transform: perspective(1400px) rotateX(2deg) rotateY(-3deg) rotate(0deg) scale(1); border-radius: 20px; transform-origin: center;"
  src="/api/shot?url=https%3A%2F%2Fyourdomain.com&preset=desktop&theme=light&pad=48&style=studio"
  alt="WoneShot preview"/>

Use a static URL for hero images, docs, tweets, or changelog posts.

FAQ

Can I store images instead of rendering every time?
Yes—cache headers help, and you can also persist to S3/R2 and serve from a CDN.
How do I get a “device mockup” look?
You can swap the SVG frame template (browser chrome) for a phone/laptop frame and composite the same way.
Does it work with animations?
Best results come from waiting for stable UI (network idle + a short delay). For complex pages, wait for a selector.

Ship better screenshots today

Plug in the API route and embed the image URL where you need it.

Try the demoImplementation details