DEV3 Free Social Media Image Resizer — Source Code (React + Tailwind)

Source code of the DEV3 Social Media Image Resizer, resizes one image to every current social platform size with fill or fit modes, a focus point, safe-zone overlays and zip export.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/social-media-image-resizer shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Table of about 28 platform sizes with safe-zone insets
• Fill (cover with focal point) and fit (blur or colour fill) modes
• Live canvas preview with safe-area overlay
• Batch zip with descriptive file names

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jszip.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• Platform sizes and safe areas change; review them against current platform guidance.