English | 简体中文
InstaFrame is a web-based editor that lets you generate an Instagram-style post image. Upload your photos, customize the text fields, and download a high-quality JPEG of your creation. The entire process runs locally in your browser, ensuring your data remains private.
- Fully Customizable: Edit the avatar, username, location, post photo, likes count, caption, and more.
- Interactive Preview: See a live, interactive preview of your final image as you make changes.
- Pan & Zoom: Pan and zoom your main post photo to get the perfect fit.
- High-Resolution Export: Download your final image in HD (1080p) or 4K resolution.
- Light & Dark Mode: Switch between UI themes to match your preference.
- Internationalization: Supports multiple languages (currently English and Chinese).
- Privacy-Focused: All image processing is done on the client-side. No data is ever uploaded to a server.
To get a local copy up and running, follow these simple steps.
You need to have Node.js and npm installed on your machine.
-
Clone the repo
git clone https://github.com/ZhanZiyuan/InstaFrame.git
-
Navigate to the project directory
cd InstaFrame -
Install NPM packages
npm install
-
Run the development server
npm run dev
-
Open http://localhost:3000 with your browser to see the result.
- Framework: Next.js
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Image Generation: HTML Canvas API
- State Management: React Context
Distributed under the GPLv3 License. See LICENSE for more information.