You have built the perfect before-and-after comparison in TwinLens. Now you want to share it with a colleague, drop it into a Slack thread, or embed it directly on your blog. This guide covers both: shareable links that anyone can open, and embeddable iframes that turn any webpage into an interactive comparison.
Creating a shareable link
Open twinlens.app/compare, drag your images or videos onto the panels, and set up the view exactly how you want it — view mode, zoom, pan, slider position, and labels are all preserved in the link.
Click the Share button in the toolbar. A dialog appears — click Upload & Share. After a few seconds, TwinLens generates a URL and copies it to your clipboard. Paste it into Slack, email, a GitHub PR, or anywhere else.
https://twinlens.app/compare?share=dfd14cceff42- Links expire after 2 weeks by default. No account needed to view.
- The viewer can zoom, pan, and switch view modes on the shared comparison.
- Video sharing is supported too — combined file size must be under 50 MB.
Embedding comparisons on your website
Share links are great for one-off communication. For putting an interactive comparison directly on your blog or docs, TwinLens supports embed mode — it strips the toolbar and drop zones, leaving a clean interactive comparison that fits naturally inside any page.
After generating a share link, the dialog shows an Embed code section. Copy it, or build the URL yourself by adding &embed=1 to any share link:
<iframe
src="https://twinlens.app/compare?share=dfd14cceff42&embed=1"
width="100%"
height="500"
style="border:none;border-radius:8px"
allowfullscreen
></iframe>Paste the snippet into your HTML, Markdown, or CMS editor. It works anywhere iframes are supported — WordPress, Ghost, Notion, GitHub Pages, Confluence, and more. Adjust width and height to fit your layout.
loading="lazy" to the iframe if you have multiple embeds on the same page to defer loading until the embed scrolls into view.Live demo — Embedded image comparison
Here is a four-image comparison embedded on this page. Try dragging to pan, scrolling to zoom, or clicking a different view mode. This is the exact same comparison from the share link, rendered in embed mode:
Four images compared in grid view — fully interactive inside this blog post.
The embed code for this demo:
<iframe
src="https://twinlens.app/compare?share=dfd14cceff42&embed=1"
width="100%"
height="450"
style="border:none;border-radius:8px"
allowfullscreen
></iframe>Live demo — Embedded video comparison
Embeds work with video comparisons too. Here are two video clips compared in slider view. Hit play, drag the slider, and see the difference in real time — all inside this page:
Video comparison in slider view — play, pause, and drag the slider right here.
The embed code for this video demo:
<iframe
src="https://twinlens.app/compare?share=e6acdd4db46f&embed=1"
width="100%"
height="100%"
style="border:none;border-radius:8px"
allowfullscreen
></iframe>Customization options
You can control what the viewer sees by adjusting the share state before generating the link:
- View mode: set slider, side-by-side, peek, or grid view before sharing. The embed opens in that exact mode.
- Zoom & position: zoom into a specific detail and that zoom level is preserved in the embed.
- Labels: add labels like "Before" and "After" — they appear in the embed too.
- Slider position: set the slider to reveal just the right amount of the second image.
The embed shows a subtle "Powered by TwinLens" badge in the bottom-right corner that links back to the tool. Viewers who want to create their own comparisons can discover TwinLens through the badge.
Use cases for embedded comparisons
- Blog posts: show before-and-after results for photo editing tutorials, design case studies, or product reviews.
- Documentation: embed visual regression comparisons in your QA docs or release notes.
- Portfolios: let visitors interact with your retouching or color grading work.
- Product pages: show the difference between product tiers, material finishes, or rendering quality.
- Pull requests: link to a comparison from a GitHub PR comment so reviewers can inspect visual changes.
- Video production: embed codec comparisons, color grade options, or VFX breakdown clips.
Related tutorials
- How to Compare Two Images Online — Step by Step
- How to Compare Folders of Images with TwinLens
- The Best Local Video Comparison Tool for Engineers and QA Teams
Create your first comparison
Free, private, and instant. Drop your images or videos, set the view, and share or embed in seconds.
Compare Now — No Install Needed →