CodeKitHubWhat Is This Tool?
The Instagram Story Generator is a browser-based mockup tool that recreates the vertical Instagram Story screen — segmented progress-bar strips at the top, a gradient-ringed circular avatar with @username and a relative timestamp, a full-bleed photo or gradient background, centered overlay text, and a rounded "Send message" reply bar with a heart icon — so you can type your own content and export it as a shareable portrait image.
For entertainment and design use only: this tool is built for jokes, memes, presentation slides, UI/UX prototypes and social media content. It must never be used to fabricate fraudulent evidence, harass or defame someone, or impersonate a real person's actual Story — doing so can be illegal depending on your jurisdiction and is strictly against the intended use of this tool.
Nothing you type ever leaves your device — the whole Story is rendered with the HTML Canvas API directly in your browser, and the PNG is generated and downloaded locally. There is no server upload, no account and no tracking of your content.
Why Use It?
- You're making a meme built around a fictional Story someone would post in a specific ridiculous moment, and the joke only lands if it's laid out exactly like a real Story screen rather than plain text on a background.
- You're pitching a Stories-format ad or takeover to a client and want to show what the overlay text and reply-bar placement would actually look like at Instagram's real 9:16 dimensions before commissioning real creative.
- You're a UX designer prototyping how overlay text of different lengths sits against the progress bar and reply bar, and need quick disposable examples rather than exporting frames from a real Instagram session.
- You're building a tutorial or course slide explaining Story anatomy (progress bar, avatar, timestamp, reply bar) and need a clean, labeled example rather than a screenshot with someone else's real content in it.
- You want to preview how a specific line of overlay text will actually center and wrap against a background before you commit to posting a real Story with it.
- 100% local rendering — your text never touches a server.
How to Use
- Set the username (@handle), timestamp, avatar color or upload a photo.
- Toggle the background image placeholder and pick its base color.
- Type the overlay text shown centered on the Story.
- Customize the reply-bar placeholder text at the bottom.
- Watch the portrait preview update live, then click "Download PNG" to save the image.
Example
Input
Username: "@alex.rivera" · Timestamp: "4h" · Overlay text: "Weekend vibes 🌅" · Reply bar: "Send message"Output
A 360×640 portrait PNG image showing an Instagram Story: three progress-bar segments at the top, a gradient-ringed avatar with "alex.rivera" and "4h", a purple-to-pink gradient background, "Weekend vibes 🌅" centered on the screen, and a rounded "Send message" reply bar with a heart icon at the bottom.The image is generated instantly in the live preview canvas and downloads with a single click — no waiting, no upload.
What you can customize
- Username (@handle), timestamp, avatar color or uploaded photo.
- A segmented progress bar at the top, matching the real multi-slide Story indicator.
- Centered overlay text with a drop shadow, just like real Story captions.
- A rounded reply bar at the bottom with editable placeholder text and a heart icon.
Responsible use
This generator exists to make it easy to create clearly fictional Instagram Story images for humor, storytelling and design work. It is not a tool for fabricating evidence, staging harassment, or misleading anyone into thinking a fake Story is real. If you plan to share an image made with this tool, consider adding context (like "fake" or "mockup") so viewers understand it is not an actual Instagram Story, especially when the subject could be mistaken for a real person or real events.
What makes a Story mockup read as authentic
Stories have a much shorter attention span than a feed post — a viewer decides whether it's real or fake in under a second, so small proportions matter more here than in a static feed mockup.
Keep overlay text short: real Story captions are rarely more than a sentence, since anything longer competes with the fast-swipe nature of how people actually watch Stories. Match the timestamp to the mood you're going for — "4h" reads as someone who posted earlier and moved on, while "just now" implies something happening in real time, which changes how a viewer interprets the content around it. And keep the progress-bar segment count proportional to what the overlay text implies — a single dramatic sentence sitting under five progress segments unintentionally suggests there's more context on the slides you didn't show, which can undercut the joke or message if that wasn't the intent.
Frequently Asked Questions
Is it legal or ethical to use this tool?
The tool itself is legal to use for entertainment, mockups, presentations and design work. What is not legal or ethical is using the generated image to deceive someone — for example presenting it as a real Story to commit fraud, harass or defame a person, or impersonate someone's actual content. Depending on where you live, that kind of misuse can constitute fraud, defamation or harassment. Please only use this for clearly fictional or illustrative purposes.
Does the tool upload my text anywhere?
No. Everything you enter stays in your browser's memory and is drawn directly onto a canvas element using JavaScript. The PNG file is generated and downloaded on your device — nothing is ever sent to any server.
Can I use my own photo as the Story background?
The background is a colored or gradient placeholder by design, to keep the tool simple and avoid any temptation to pass off someone else's real photo as your own Story. You can still upload a real photo for the circular avatar.
Why is the image portrait-shaped?
Instagram Stories use a 9:16 vertical aspect ratio, so the preview and exported PNG are generated in that same portrait format to look natural when shared or embedded in a presentation.
Should I use this or one of the other Instagram mockup generators?
If you're mocking up a temporary, full-screen vertical Story with overlay text, use this Story generator. If you need a permanent feed post with a caption and like/comment count instead, use the Instagram Post Generator; for a comment thread, use the Instagram Comment Generator; for a full profile page, use the Instagram Profile Generator.
Can I show multiple progress-bar segments to imply a multi-slide Story?
Yes — the segmented progress bar at the top is designed to mimic Instagram's real multi-slide indicator, so you can represent a Story that's several slides long even though you're only exporting one specific frame from that sequence.
Can I customize the timestamp, like showing "just now" instead of a specific number of hours?
Yes — the timestamp field accepts any text you type, matching how Instagram itself shows relative time ("4h", "23m", "just now") rather than an absolute clock time, so you can set whatever freshness the mockup calls for.
Does the reply bar actually do anything, or is it just decorative?
It's a static visual element, not a functional input — the placeholder text and heart icon are rendered exactly as they'd appear on a real Story to complete the look, but nothing happens when clicked since this is a static image export, not an interactive prototype.
Can I add more than one line of overlay text, like a caption plus a smaller sticker-style label?
The overlay text field is built for a single centered block of text, which covers the most common Story caption style. If you need multiple distinct text elements at different positions, you'd need to combine that into one block of text with line breaks, since the tool doesn't currently support separately positioned text layers.