Uwarp
9:415G
MMichael Scott@theoffice

8 NOV 21:52

Would I rather be feared or loved? Easy. Both.

That's… not how it works 😂

Seen

You miss 100% of the shots you don't take.

Message…

Help Us Improve

—

(—)

Instagram DM generator

Make a fake Instagram DM with purple bubbles, then download a PNG. Free Instagram DM generator—local-first, no signup.

What is an Instagram DM generator?

An Instagram DM generator lets you write a Direct Message–style thread and export it as a picture. Purple sent bubbles and gray replies follow Instagram chat styling in light or dark mode. Use this free local-first mockup for posts and storyboards—it does not connect to Instagram and it is not a real chat export.

Instagram DM generator features

A local Instagram Direct mockup.

  • Purple sent bubbles

    Gradient outgoing bubbles and gray incoming replies, like Instagram DM.

  • Light and dark

    Both screen themes with a status time and contact header.

  • Avatar and username

    Set a display name, @username, and optional profile photo.

  • PNG export

    Download or copy the chat picture. No watermark.

How to make an Instagram DM mockup

From lines of text to a PNG.

  1. Set the contact

    Enter a display name, username, status time, and theme. Upload an avatar if you want.

  2. Write the thread

    Add messages, choose You or Them, and drop in a time label when you want a separator.

  3. Export the picture

    Download a PNG or copy it for a post, slide, or storyboard.

Tips for DM mockups

Cleaner fake Instagram chats.
  • 01

    Keep lines short

    Real DMs are usually one or two sentences. Long paragraphs look staged.

  • 02

    Use one time label per gap

    A separator reads best when the clock actually jumps, not on every bubble.

  • 03

    Match the theme

    Pick light or dark to match the story you are illustrating.

  • 04

    Label it as a mockup

    If you publish the image, make it clear the thread was composed, not exported from Instagram.

Great for

When an Instagram DM generator helps.

  • Social posts

    Illustrate a joke or story with a Direct Message–style frame.

  • Product mockups

    Show sample chat copy in a deck without a live account screenshot.

  • Storyboards

    Sketch a support or onboarding thread before designing the real UI.

Why use this Instagram DM generator

Fast local Direct Message–style mockups.

  • Local-first

    Message text and avatars never leave the browser for this tool.

  • Free

    Unlimited mockups with no signup and no watermark.

  • Instant preview

    Every name, photo, and message updates the phone frame immediately.

  • Sharp PNG

    Export at 2× so bubble text stays crisp.

Technical notes

How this DM mockup is drawn.
Layout
A fixed-width Instagram DM–style frame: status time, contact header, bubbles, optional Seen line and message bar.
Colors
Light/dark screens. Outgoing gradient from Instagram blue/purple/pink; incoming gray #EFEFEF / #262626.
Export
html-to-image captures the frame as a 2× PNG.
Privacy
Client-side only—no network upload of the conversation.

Sources & References

Instagram Direct and image-capture references.
  • “In December 2013, Instagram announced Instagram Direct, a feature that lets users interact through private messaging (colloquially called "DM" or "DMs", short for "Direct Message").”
    — Wikipedia — Instagram

    Wikipedia — Instagram Direct: Background on Instagram Direct Messaging, the private chat UI this mockup visually echoes. This page is not affiliated with Meta or Instagram. en.wikipedia.org/wiki/Instagram#Instagram_Direct

  • “Generates an image from a DOM node using HTML5 canvas and SVG.”
    — bubkoo/html-to-image

    html-to-image: Client-side capture used to download or copy the chat frame as PNG. github.com/bubkoo/html-to-image

Frequently Asked Questions

Quick answers about this tool—open a question to read more.