What this tool produces
This is a canvas drawing tool, not a screenshot tool and not a connection to any social network. You type a display name, a username, some body text, a like count and a repost count, optionally point at a profile picture URL, and the page draws a post-styled card onto an HTML canvas and exports it as a PNG.
Nothing is fetched from any account, nothing is posted anywhere, and no real post is looked up. Everything in the image comes from the form fields in front of you, which is exactly why the output should be treated as an illustration rather than as evidence of anything.
The canvas is 1200 pixels wide. Height is calculated from the content: padding, a 96 pixel avatar row, the wrapped body text at 48 pixels per line, and a stats row. A one line post produces a short image and a six line post produces a taller one, so the layout never leaves a large empty gap under short text.
The fields and how they are drawn
The display name is drawn in bold at 32 pixels, and when the verified checkbox is ticked a blue circle with a white check is drawn immediately after it. The username is rendered below in grey at 26 pixels with an @ prefix, and a leading @ that you type yourself is stripped so you do not end up with two.
Body text is wrapped by measuring words against the available width, so it breaks on word boundaries rather than mid word, and manual line breaks in the textarea are preserved. There is no character limit enforced by the tool, so a long body simply produces a taller image than a real post would allow.
Like and repost counts are formatted compactly and drawn in a stats row under a divider line. If you leave the avatar URL empty, a blue circle with initials derived from the display name is drawn instead, which is a reasonable placeholder for a generic mock.
Avatar URLs and why a remote image may not load
The avatar field takes a URL, not a file upload. The image is loaded with a cross origin request, so the server hosting that image has to permit cross origin use. Many image hosts and most social network CDNs do not, and in that case the load fails silently and the tool falls back to the initials circle rather than showing an error.
If you want a specific avatar and the URL does not work, host the image somewhere that sends permissive cross origin headers, or accept the initials placeholder. There is no option to upload a local image file for the avatar.
This restriction comes from the browser rather than from the tool. Drawing a cross origin image onto a canvas without permission would taint the canvas and make exporting the PNG impossible, so the request is made in a mode that either works cleanly or does not work at all.
A worked example and the layout maths
Enter a display name of Jane Doe, a username of janedoe, and two lines of body text. The width is fixed at 1200 with 56 pixel padding on each side, so text wraps inside 1088 pixels at 36 pixel type. Two lines of body text give a 96 pixel text block. Add the header row of 120 pixels, the gaps, the 80 pixel stats row and the top and bottom padding, and the exported PNG comes out a little over 450 pixels tall.
Doubling the body to four lines adds 96 pixels of height and nothing else moves. This predictability is useful when you are producing a set of mock cards for a slide deck and want them to sit consistently in a layout.
The preview above the form is the same canvas render, exported to a PNG blob, so what you see is exactly what downloads. The file is named after the username you entered.
Fixed styling and the limits of the mock
The card style is not configurable. The background is white, the name color and the body color are fixed, the divider is fixed, and there is no dark mode option, no theme picker, no font size control and no width control. There is also no timestamp, no reply or bookmark counts, no quoted post, no attached image or link preview, and no thread rendering.
The styling approximates a familiar post layout rather than matching any current production design pixel for pixel, and social platforms change their layouts regularly. Anyone comparing the output side by side with a live page will see differences.
Everything is drawn locally in your browser and the PNG is produced from the local canvas, so no text you type is sent anywhere. The one network request the tool can make is fetching an avatar image from a URL you provide.
Use it for illustration, not for impersonation
Fabricated screenshots of posts attributed to real people circulate widely and cause real harm, and a tool that makes them easy deserves a plain statement about scope. Reasonable uses include mocking up a design, illustrating a product feature, building a meme with an obviously fictional account, or preparing a training example. The tool shows its own disclaimer for this reason.
Putting a real person name, real username and verified badge onto words they never wrote is impersonation, and passing that image off as genuine can be defamatory and is against the rules of most platforms where it would be shared. The absence of a timestamp and the fixed styling do not make an image harmless if it is presented as authentic.
If you are mocking up a design, use a clearly fictional name and handle. It keeps the work unambiguous and avoids the problem entirely.