CodeKitHubWhat Is This Tool?
The Instagram DM Generator is a browser-based mockup tool that recreates the Instagram Direct interface — the gray bubbles for the other person, the signature purple-pink-orange gradient bubbles for your own messages, a header with an @username handle and "Active now" status, and the phone status bar — so you can type your own conversation and export it as a shareable image.
For entertainment and design use only: this tool is built for jokes, memes, skits, 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 messages — doing so can be illegal (fraud, defamation or harassment, depending on your jurisdiction) and is strictly against the intended use of this tool.
Nothing you type ever leaves your device — the whole conversation 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 message content.
Why Use It?
- Create funny fake DM conversations for memes and social posts.
- Mock up chat-based UI concepts for an app or presentation.
- Illustrate a script, skit or story with a realistic DM screenshot.
- Prototype Instagram-style messaging or notification designs.
- 100% local rendering — your conversation text never touches a server.
How to Use
- Set the contact's username (@handle), activity status (e.g. "Active now") and avatar color.
- Add message rows: type the text, pick a side (them/me) and a timestamp.
- Toggle whether "Seen" appears under your last message, like real Instagram DMs.
- Adjust the status bar (time, battery, signal) to taste.
- Watch the phone-shaped preview update live, then click "Download PNG" to save the image.
Example
Input
Username: "@alex.rivera" · Status: "Active now" · Message 1 (them): "hey! did you see the photos from the trip? 😍" · Message 2 (me): "yes omg they're amazing, sending you the album now"Output
A 375×812 PNG image showing an Instagram DM screen: white header with "@alex.rivera" and "Active now", a gray bubble on the left with the first message, and a purple-pink-orange gradient bubble on the right with the reply, plus a small "Seen" label below it.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), activity status (e.g. "Active now", "Active 2h ago") and avatar color.
- Light mode or Instagram's near-black dark mode, matching the real app's two color schemes.
- Unlimited message rows, each with its own text, side (them/me) and timestamp.
- A "Seen" indicator toggle that appears under your last read message, just like real Instagram DMs.
- Phone status bar: time, battery percentage and signal strength.
Responsible use
This generator exists to make it easy to create clearly fictional DM images for humor, storytelling and design work. It is not a tool for fabricating evidence, staging harassment, or misleading anyone into thinking a fake conversation 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 conversation, especially when the subject could be mistaken for a real person or real events.
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 conversation to commit fraud, to harass or defame a person, or to impersonate someone's actual messages. 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 messages anywhere?
No. Every message, username and setting 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.
How does the "Seen" indicator work?
Instagram doesn't show per-message checkmarks like WhatsApp — instead it shows a small "Seen" label under the last message the other person has read. You can toggle this on or off to match the scenario you're mocking up.
Can I upload a real photo as the avatar?
Yes — click the avatar circle to upload your own image, or leave it blank to fall back to a colored circle with the contact's initials generated automatically from the username.
What image size does it export?
The preview and exported PNG use a phone-screen aspect ratio (375×812 by default), which looks natural when shared on social media or embedded in a presentation.
Does this support dark mode?
Yes — there's a theme toggle above the contact fields that switches between light mode and a near-black dark mode matching Instagram's actual dark DM screen (dark gray incoming bubbles, the same gradient outgoing bubbles, light text). If you want a screenshot that reads as a normal daytime chat, use light mode; if you're mocking up a late-night conversation or a screenshot from an OLED phone with dark mode enabled, switch to dark mode — most real Instagram screenshots people share at night are in dark mode, so it reads as more authentic for that context.
How do I make a fake Instagram DM conversation?
Set the contact's username and status, add message rows for each side of the conversation, pick light or dark mode, then click "Download PNG" — the whole conversation renders instantly in the live preview.
Can I show a typing indicator or unread messages?
You can leave the last message on the "them" side without a reply to imply an unread/unanswered state. A dedicated animated typing-dots indicator isn't available since this tool exports a static image, not a video.
Will this work for both Instagram usernames and display names?
Yes — the contact field accepts either an @handle or a full display name, matching how Instagram shows the header depending on whether the contact has a set display name.
Can I add more than one contact or a group chat?
This tool is built for one-on-one DMs. For a group-style multi-person thread, use the message list's "them" side with different display names per message as a workaround, though the header will still show a single contact.
Is this the same as the real Instagram app?
No — it's an independent mockup tool, not affiliated with or endorsed by Instagram or Meta. It's designed to visually match Instagram's DM interface closely enough for mockups, memes and presentations, not to replicate the live app.
Do I need to create an account or install anything?
No account, no installation, no browser extension — the tool runs entirely as a webpage and works on both desktop and mobile browsers.