# Free LinkedIn Post Mockup Generator Type your post, put your own name and photo on it, set the reactions, and download a picture of it. What comes out looks like a post sitting in the feed, which is what you want when you are putting it in a proposal or a deck. The see-more cut lands where the feed puts it. The tool lays your post out at the real column width for each screen size and puts the cut where the lines actually broke, not at some fixed number of characters that cannot be right on two columns of different widths. Nothing you type or upload leaves the tab, and the PNG downloads on the first click. ## How the LinkedIn post mockup generator works Five steps, and the tool loads with all five filled in already. You are editing from the first click. 1. **Set who is posting**. Name, headline, photo. Drop an image in or keep the one that is there. Set the timestamp to whatever reads right, usually a few hours or a day, and turn the follow button on or off. 2. **Paste the post**. Line breaks come through exactly as you typed them, blank lines included. That matters more than it sounds like it should, because a blank line eats into the cut the same way a line of text does. If the post has an image, attach it. 3. **Set the reactions**. Pick which reaction icons show and set the like, comment and repost counts. There is no right number. Something plausible for the account you are mocking up reads better than something impressive. 4. **Check the card at both screen sizes**. The toggle above the card switches between the desktop column and the phone column. Same post, different width, so the cut lands somewhere else. The phone card usually surprises people. 5. **Download the PNG**. One click, at twice the on-screen size, and the file is the card you are looking at, cut or opened out. The line under the button downloads the other screen size as a separate file. No watermark and no account. ## What the editor gives you Profile: name, headline, profile photo, timestamp, and the follow button on or off. Content: the post text, with line breaks kept as typed, plus one attached image. Engagement: Like, Celebrate, Support, Love, Insightful, Funny, and the reaction, comment and repost counts. Appearance: a light or dark card, and 6 backdrop presets or none. Download: the card on screen, as a PNG at twice the on-screen size. The other screen size downloads as a second file from the line under the button. There is no combined image. PNG, JPG or WebP, up to 10MB. The file is read in this tab and never uploaded. ## What you get - Editable name, headline, profile photo and timestamp on the post card - The "see more" cut measured from the rendered lines at each screen size, not sliced at a character count - A desktop card and a mobile card, each cut at its own boundary and downloaded as its own file - A working "see more" that opens the post out in place, so you can mock up either the cut view or the whole post - Reaction icons and like, comment and repost counts - One image attached under the post - Light and dark card, plus six backdrop presets - PNG at twice the on-screen size, no watermark - Runs entirely in the browser, with no upload and no account ## Where the "see more" cut actually lands This is the part the tool spends its effort on, and it is what makes a mockup worth putting in front of a client. LinkedIn does not cut your post at a character count. It shows a few lines and hides the rest, so where the cut falls depends on how your text wraps, which depends on the column width, the font, and what you actually wrote. A line of narrow lowercase fits far more characters than a line of capitals, and a blank line costs you a whole line and no characters at all. Slice at a fixed number instead and the mockup is wrong in one of two directions. Cut too early and your client thinks their opening is buried when it is fine. Cut too late and they approve a hook the feed is going to hide. This tool renders your text at the column width the feed uses, reads back where the lines actually broke, and puts the cut there. Same method on both screen sizes, different answer on each, because that is how the feed behaves. ## How the cut is worked out The card renders at a fixed column width for each screen size, 555 CSS pixels on desktop and 347 on mobile, and the post is laid out in the system font stack LinkedIn itself uses. The boundary is then read back off the rendered line boxes rather than counted in characters. A blank line costs a whole row and no characters. A long unbreakable link costs more than its length suggests. The inline width of the "see more" affordance is reserved on the last visible row, so it can never push the final word onto a line the budget did not allow for, and the cut is snapped back to a whole grapheme cluster so it never lands inside an emoji or a combining mark. The column widths and the row budget are derived from this site's own shipped LinkedIn constants and have not been re-measured against a signed-in feed, so treat them as close rather than exact. ## Desktop and mobile are two different mockups The card is narrower on a phone, so the same post wraps differently and gets cut somewhere else. A hook that clears the fold on a laptop can lose its last few words on a phone, and most of the people reading are on a phone. That is why the toggle sits on top of the card. You get one card at a time at its real width, rather than two shrunken ones sharing a column. Click across and the tool measures the post again at the narrower width. The question a client is actually asking is what does this look like, and there are two answers to it, so look at both before you send anything. ## What people use post mockups for Pitching, mostly. You are showing a prospect what you would post for them, and a picture makes an abstract proposal concrete in a way a text document does not. Getting a draft approved is the other big one. It is faster than a document and it surfaces the formatting problems a document hides: line breaks, where the cut lands, whether the first line still works after an edit. Then there is portfolio and case study work, where a picture of a post reads better in a deck than a link that might be dead next year. Teaching material too, and design work, where you want to check that an avatar or a banner holds up in the place it is going to appear. ## Before you send a mockup to someone A few things worth checking. I have got most of these wrong at some point. - Read the first line as though you have never seen the post. That line is doing most of the work, and the mockup is the first time you see it out of your own editor. - Look at the mobile card, not the desktop one. It is the stricter of the two and it is where most people will read the post. - Keep the numbers believable. Nobody is impressed by a mockup with four thousand reactions on it, and it makes the rest of the pitch harder to trust. - Say it is a mockup. Obvious in a proposal, less obvious once the image is loose on its own. Which is worth being direct about, since the tool will put whatever name and photo you give it on a card. Use it for your own work, or for work you are proposing to a client who knows about it. Putting words in a real person's mouth and passing the image off as genuine is not what this page is written for. ## Mockup or preview: which one do you want Two similar-sounding tools, different jobs. Use the [LinkedIn post preview](/tools/linkedin-post-preview) while you are writing, to see where your own draft gets cut. It is a writing tool. There is no image at the end of it and it moves as you type. Use this one when you want a picture. Editable name, photo, reactions, a backdrop, and a PNG at the end. If you are formatting the text itself, the bold and italic characters come from the [LinkedIn text formatter](/tools/linkedin-text-post-formatter), and you can paste the result straight in here. ## Beyond the mockup A mockup is a picture of a post you still have to write. That is the part that runs people out of energy, usually somewhere around week three. Oiti learns how you actually write, from your own posts and the things you believe, then drafts LinkedIn posts that read like you typed them. The scheduling calendar and the analytics are in the same place, so the whole loop is one tool. ## Frequently asked questions ### Is this LinkedIn post mockup generator free? Yes. The PNG downloads on the first click, at full resolution, with no watermark and no account. Oiti sells a paid product for writing and scheduling LinkedIn posts, and this tool exists because people who need a mockup usually need that too. It is not a trial of anything. ### Does the mockup show where my post gets cut off? Yes, and it is the main reason to use this one. The tool renders your text at the column width the feed uses, reads back where the lines actually broke, and puts the "see more" there. A cut sliced at a fixed character count cannot be right on both screen sizes at once, because the columns are different widths. ### Do my photos and my draft leave my browser? No. Your text, your profile photo and any attached image are handled entirely in the page. There is no upload and no server, so there is nothing sitting anywhere afterwards. ### Why does the mobile version look so different? The card is narrower on a phone, so the same text wraps differently and gets cut earlier. It usually surprises people, which is exactly why the tool shows it. Download each one and you have both, as two files. ### Can I add an image to the post? One, yes. Attach it and it renders under the text the way the feed renders it. Multi-slide carousels are a different artifact and this tool does not do them. ### What size is the image I download? The card exports at twice its on-screen size, so it stays sharp in a slide deck or a PDF. Each download is one card on its own, so a desktop mockup and a phone mockup come out as two files rather than welded into one picture. ### Can I use a mockup in a client proposal or a case study? That is most of what these are for. Show it as a mockup rather than as a published post, keep the engagement numbers plausible, and it does its job. A picture of a post that was never posted, presented as though it was, is something else. ### Can I put someone else's name and photo on it? The tool will let you, and there are legitimate reasons to, like mocking up a post for a client whose profile you manage. Fabricating a post from a real person and passing the image around as genuine is not one of them, and it is not what this page is here for. ### Is this the same as the post preview tool? No. The [preview tool](/tools/linkedin-post-preview) is for checking your own draft while you write it, and there is no image at the end. This one produces a downloadable picture with editable name, photo and reactions. Both work out the cut the same way, so they agree with each other. ## While you are at it - [LinkedIn post preview](/tools/linkedin-post-preview) — Check your own draft while you write it. Same cut, no image at the end. - [LinkedIn text formatter](/tools/linkedin-text-post-formatter) — Bold and italic characters you can paste straight into the mockup body. - [LinkedIn banner maker](/tools/linkedin-banner-maker) — The other image tool. A cover photo at the exact size, with no upload. - [LinkedIn character counter](/tools/linkedin-character-counter) — How long the post is against every field LinkedIn caps.