Facebook Post Mockup - Feed, Story and Reel
See your post in a real Facebook card before you publish it, with the See more fold exactly where Facebook puts it. Check dark mode, then export a PNG.
How to use this tool
Choose Feed, Story or Reel
The feed card, the full-screen Story and the Reel each draw different furniture and apply a different text budget. Pick the one you are actually publishing to.
Drop in the creative
Add a PNG, JPG, WebP, GIF or AVIF image, or an MP4, MOV or WebM video. Facebook's feed accepts square, portrait, landscape and 1.91:1 creative, and the ratio buttons switch the card between them.
Write the post
Enter the page name and body text. The counter flags the point where Facebook folds the rest behind "See more", and the preview folds it there so you can see which sentence survives the fold.
Check dark mode
A large share of Facebook is read in dark mode, where a white-background creative becomes a bright rectangle. Toggle it and look at the result before you commit.
Download the mockup
Export a 2x PNG or copy it to the clipboard for a deck, an email or a client approval thread.
Frequently Asked Questions
How much of a Facebook post is shown before See more?
Facebook folds a feed post after roughly 250 characters on desktop and less on a narrow phone, replacing the remainder with "See more". The first line is what most people read, so this tool shows the fold in place and counts your characters against it as you type.
What image size works best for a Facebook post?
Square at 1080 by 1080 is the safest default in the feed. Portrait 4:5 takes more vertical space, and 1.91:1 matches a link preview. Stories and Reels are 1080 by 1920. Switch ratio in the mockup to see the same creative cropped each way.
Does the mockup show dark mode?
Yes, and it is worth checking. Facebook's dark surface is a near-black card, so a creative with a white background reads as a bright block and light grey text on white can vanish. The dark mode toggle is independent of your own site theme.
Can I use this for a client approval?
That is what the PNG export is for. Download a 2x image of the mockup, drop it into a deck or an email, and the client sees the post in context rather than as a bare image with a caption in a separate paragraph.
Do you store the images I preview?
No. Your file never leaves the browser tab. It is held as a local object URL, drawn into the page, and discarded when you close the tab. The PNG is rendered in your browser too, so nothing is transmitted and nothing is stored on our side.
You might also need
Something not working? Report a bug