I built a free safe zone preview tool for Instagram Reels and YouTube Shorts

Every time I posted an Instagram Reel or YouTube Short, I'd find out after publishing that a button or caption bar was sitting right on top of my text. There was no quick way to check before posting — you either memorized the safe zone margins for each platform, or you posted, spotted the problem, and redid it.

After doing that one too many times, I built a fix: Safe Zone Preview — a free, browser-based tool that lets you upload your design and instantly see exactly which areas Instagram and YouTube will cover with their native UI overlays.

What it does

You upload your image, select your platform, and the tool renders a pixel-accurate simulation of that platform's native UI directly on top of your design — action buttons, caption bars, subscribe prompts, and all. You can see in under a second whether anything critical is hidden.

It currently supports:

• Instagram Reels — reaction icons, profile bar, caption overlay
• Instagram Stories — progress bar, reply box, bottom navigation
• YouTube Shorts — like/dislike bar, subscribe button, audio attribution
• YouTube Thumbnails — auto-generated timestamp pill (bottom-right corner)
• TikTok support is also included for creators outside India

There is also a Safe-Zone Grid Only mode that strips away the simulated UI and shows just clean dashed boundary lines — useful for exporting as a transparent overlay layer into Canva or Figma.

👉 safezonepreview.com

The stack

• Next.js 15 (App Router) — page routing, metadata, SSR
• Tailwind CSS — styling, dark-only theme
• HTML Canvas API — all image processing and overlay rendering
• Vercel — deployment

No backend. No database. No third-party image processing library. Everything runs in the browser.

The interesting technical part — Canvas API overlay rendering

The core of the tool is a single useEffect that fires whenever the user uploads an image or switches platforms. It draws the image onto an HTML element and then calls a drawOverlays function on top of it.

Here's a simplified version of the image rendering logic:

img.onload = () => {
  // Set canvas to platform dimensions
  canvas.width = activePlatform === "youtube" ? 1280 : 1080;
  canvas.height = activePlatform === "youtube" ? 720 : 1920;

  // Letterbox the image to preserve aspect ratio
  const imgRatio = img.width / img.height;
  const canvasRatio = canvas.width / canvas.height;

  let renderWidth, renderHeight, offsetX, offsetY;

  if (imgRatio > canvasRatio) {
    renderWidth = canvas.width;
    renderHeight = canvas.width / imgRatio;
    offsetX = 0;
    offsetY = (canvas.height - renderHeight) / 2;
  } else {
    renderWidth = canvas.height * imgRatio;
    renderHeight = canvas.height;
    offsetX = (canvas.width - renderWidth) / 2;
    offsetY = 0;
  }

  ctx.fillStyle = "#1e293b"; // dark letterbox background
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, offsetX, offsetY, renderWidth, renderHeight);

  drawOverlays(ctx, canvas.width, canvas.height, activePlatform);
};

The letterboxing logic was trickier than I expected. The user might upload a square image, a portrait photo, or a landscape design. The canvas needs to handle all of them correctly without stretching or cropping — so it calculates whether the image is wider or taller than the target canvas ratio and adjusts accordingly.

The drawOverlays function then draws semi-transparent gradients, circles for icon placeholders, rounded rectangle pills, and text labels — all using the Canvas 2D API directly, no SVG or DOM manipulation involved.

The privacy decision

Everything runs client-side. Your uploaded image is never sent to a server — it is read locally by the browser using URL.createObjectURL() and rendered directly onto the canvas. When you clear the image or close the tab, the object URL is revoked and the data is gone.

const processFile = (file: File | undefined) => {
  if (file && file.type.startsWith("image/")) {
    const url = URL.createObjectURL(file);
    setImageSrc(url);
  }
};

const handleClearImage = () => {
  if (imageSrc) URL.revokeObjectURL(imageSrc); // free memory
  setImageSrc(null);
};

For a tool that processes unpublished creative work — designs, thumbnails, branded content — this felt like the right call. No login, no storage, no analytics on your files.

The download feature

Once you've previewed your design, you can download the result as a full-resolution PNG — your image with the platform overlay baked in. The implementation is surprisingly simple:

const handleDownload = () => {
  const canvas = canvasRef.current;
  if (!canvas) return;

  const dataURL = canvas.toDataURL("image/png");

  const link = document.createElement("a");
  link.href = dataURL;
  link.download = `safezonepreview-${activePlatform}.png`;
  link.click();
};

canvas.toDataURL("image/png") converts the entire canvas contents — image plus overlays — into a base64-encoded PNG. The downloaded file is full resolution: 1080×1920px for vertical formats and 1280×720px for YouTube Thumbnails. No watermark, no compression.

Challenges

Getting the safe zone margins right was the most time-consuming part. There is no official documentation from Instagram or YouTube that says "the action bar starts at pixel 140 from the right." I had to take screenshots on multiple devices, measure in Figma, and cross-reference with what other creators had documented. The margins are best-effort approximations based on real device measurements — they are accurate for standard mobile viewports but may shift slightly on larger or smaller screens.

Handling the aspect ratio letterboxing took more iterations than expected. Early versions would stretch portrait images on the YouTube canvas or crop landscape images on the Reels canvas. The fix was the two-branch ratio comparison above — simple once I saw it, frustrating to get to.

What's next
Pinterest safe zone — Pinterest is heavily used by designers and there are almost no tools targeting this
Mobile phone frame mockup — show the canvas inside a realistic device frame for client presentations
Figma / Canva template downloads — exportable safe zone guide files for each platform
Facebook Reels — same 9:16 dimensions, worth adding
Try it

👉 safezonepreview.com

If the safe zone margins look off on your device, or you want a platform added, drop a comment below — I'd genuinely like to know. The margins are measured from real devices but every data point helps make them more accurate.

Built solo with Next.js, Tailwind, and the Canvas API. Deployed on Vercel.