A desktop application for creating realistic Instagram post mockups. Easily create, customize, and export Instagram posts with multiple images, captions, and full Instagram styling.
- Multi-Image Carousel: Create Instagram posts with multiple images that behave just like the real Instagram carousel
- Drag-and-Drop: Simply drag images from your computer to add them to your post
- Image Reordering: Easily rearrange images using the thumbnail grid
- PDF Export: Export your post to a PDF with all images and post details included
- Exact Instagram UI: Realistic Instagram post interface with all UI elements
- Post Details: Edit username, location, caption, and likes count
- Real-time Preview: See changes immediately as you type
- Dark/Light Mode: Toggle between Instagram's light and dark themes
- Post Layout: Fixed-width Instagram post with proper dimensions and styling
- Intuitive Interface: Clean, two-panel layout with controls on the left and preview on the right
- Instagram-Style Navigation: Previous/next arrows and pagination dots for multi-image posts
- Simple Workflow: Drop images → Arrange order → Customize details → Export PDF
- Clone this repository:
git clone https://github.com/NUKnightLab/InstagramMock.git- Install dependencies:
cd InstagramMock
npm install- Start the application:
npm start- Add Images: Drag and drop image files onto the drop zone
- Arrange Images: Drag the thumbnails to reorder them in the carousel
- Customize Post:
- Enter username, location, and caption
- Set likes count
- Toggle Theme: Click the theme button to switch between light/dark mode
- Export: Click "Export PDF" to save your Instagram post as a PDF
- Electron: Cross-platform desktop application framework
- Swiper.js: Touch-enabled JavaScript slider library
- jsPDF & html2canvas: PDF generation from HTML content
- HTML/CSS/JavaScript: Core web technologies
The application follows a simple architecture:
main.js: Electron main processpreload.js: Preload script for secure context bridgerenderer.js: Main application logicindex.html: Application HTML structurestyle.css: Styling and theming