BlueSky DMs, mockups for the new social frontier
BlueSky’s been gaining momentum since it opened up registration, and its DM feature is becoming a real communication channel. The platform’s distinctive sky blue branding and @handle.bsky.social format give it a unique visual identity. If you’re writing about BlueSky, comparing messaging platforms, or creating content about decentralized social media, you need accurate conversation screenshots.
This tool generates BlueSky DM mockups right in your browser. Type in two handles, build out a conversation, and download a PNG that captures BlueSky’s messaging aesthetic.
Crafting the conversation
The header displays the other person’s handle in BlueSky’s format, the full @username.bsky.social (or custom domain handle if they’ve set one up). BlueSky’s blue accent (#0085FF) appears in the header bar and interactive elements.
Messages follow the standard chat pattern. Sent messages appear right-aligned with BlueSky’s blue bubble. Received messages sit left-aligned with a light gray background. Each message can include a timestamp below it.
The overall layout is clean and modern, BlueSky’s interface takes clear inspiration from Twitter’s messaging but with its own subtle differences. The font rendering, spacing, and color choices all reflect BlueSky’s distinct design language.
Who needs BlueSky chat mockups
Tech writers covering the fediverse and decentralized social media need platform screenshots constantly. Every “Twitter alternative comparison” article benefits from showing each platform’s messaging interface. BlueSky’s DMs are still relatively new, so many readers haven’t seen them firsthand, a clean mockup fills that gap.
Marketers evaluating BlueSky as a channel create internal decks showing “here’s what our outreach would look like.” Researchers studying migration from Twitter to alternative platforms need conversation examples without real user data.
Content creators on BlueSky itself use mockups for tutorials and guides. “Here’s how to set up your DM preferences” reads much better with a visual example than a paragraph of instructions.
BlueSky’s aesthetic
The signature color is #0085FF, a clean, bright blue that’s slightly different from Twitter’s darker shade. The interface is predominantly white with minimal chrome. Message bubbles use generous padding and smooth corner radius. The handle format (@user.bsky.social) is longer than most platforms, which affects the header layout.
BlueSky’s design philosophy emphasizes openness and simplicity. No reactions on DMs, no read receipts (as of early 2026), no voice messages. It’s text communication in its purest form. This restraint actually makes mockups straightforward, you’re just dealing with text bubbles and timestamps.
FAQ
What’s the difference between a BlueSky handle and a Twitter/X handle?
BlueSky handles use a domain format, @username.bsky.social by default, or a custom domain like @username.com if the user has configured one. This is part of the AT Protocol’s decentralized identity system. The mockup lets you enter any handle format.
Does BlueSky actually have DMs?
Yes. BlueSky launched direct messaging in mid-2024. It’s a relatively straightforward text-based messaging system, no group chats, no media sharing in DMs (as of early 2026), just text conversations between two people.
Can I use custom domain handles?
Absolutely. Type any handle format into the username field, @alice.bsky.social, @alice.com, @alice.news, whatever matches your mockup scenario.
What resolution is the output?
The canvas renders at 400px wide with variable height depending on conversation length. The PNG exports cleanly for blog posts, articles, presentations, and social media.
Does the mockup include BlueSky’s butterfly logo?
The header uses BlueSky’s color scheme and layout styling, but doesn’t include the butterfly logo to keep things clean and avoid trademark issues. The blue color and handle format are enough to make it immediately recognizable as BlueSky.