Telegram Chat Generator

How the mockup is built

The input format is one message per line, in order, with blank lines ignored. Starting a line with a greater-than sign marks it as your own message, so it renders on the right in the outgoing colour; every other line renders on the left as the other person. There is nothing else to learn.

The image is drawn on an HTML canvas rather than screenshotted from the page. Text is measured and wrapped to about seventy percent of the frame width, bubbles get rounded corners, and the canvas grows to fit however many messages you wrote. It renders at twice the display resolution, so the PNG holds up when it lands in a slide or a store listing.

Everything happens in the browser tab. The conversation text is never sent anywhere, the rendering is local, and the download comes out of memory. Nothing about the tool needs an account, and nothing you type is stored.

What people actually use a Telegram mockup for

The common cases are product and marketing work: showing a bot conversation in documentation, illustrating a support flow in a help article, filling an app-store screenshot with plausible content, or drawing a scenario in a slide instead of describing it in prose. In all of those the reader knows they are looking at an illustration.

Telegram mockups also show up in tutorials about bots and channels, where a picture of the exchange explains the flow faster than a paragraph. If you are documenting your own bot, a mockup avoids the awkwardness of screenshotting a real chat with a real person in it.