Timeline data for social UI components
The Social Media Feed Generator produces fake timeline posts — users with avatars, post text, hashtags, engagement counts and optional images. It is built for developing social-platform feed components and demos so post cards, engagement bars and infinite scroll have realistic data before any backend exists.
How it works
You set a post count and an image ratio. For each post the generator picks a user (pairing a handle, display name and a seeded avatar URL, with a verified badge on about one in five), selects post text from a pool of natural-sounding status updates, and attaches zero to two distinct hashtags. Engagement is generated coherently: a like count is produced first, weighted so most posts get modest engagement and a few go large, then reposts and comments are computed as smaller fractions of that like count — mirroring how real posts always draw more likes than shares or replies.
The image ratio is treated as a probability per post; posts that clear it get a seeded placeholder image URL while the rest carry a null imageUrl. Timestamps land within the last three days of a fixed base date. A seeded pseudo-random source keeps a configuration stable between renders, and the output is one object with a posts array shaped the way a social card component expects.
What the JSON looks like
Each item in the posts array follows a consistent shape:
{
"id": "post_001",
"user": {
"handle": "cloudrunner",
"displayName": "Cloud Runner",
"avatarUrl": "https://i.pravatar.cc/64?u=cloudrunner",
"verified": false
},
"content": "Finally caught that bug I have been chasing for a week.",
"hashtags": ["devlife", "debugging"],
"likes": 142,
"reposts": 18,
"comments": 9,
"hasImage": false,
"imageUrl": null,
"timestamp": "2026-06-19T14:22:00Z"
}
The shape is intentionally minimal and close to what real social APIs return, so you can swap the mock array for a live endpoint later with minimal code changes.
Practical scenarios
Infinite scroll prototype. Generate 40–60 posts and render them with a virtualized list. The mixed engagement counts and image/text split mean scroll performance tests see realistic layout variance, not a grid of identical cards.
Feed sorting and filtering UI. Because likes, reposts, and comments are proportionally related, sorting by engagement surfaces the same “viral” posts consistently — so you can build and visually verify a “Top posts” tab before wiring up any ranking logic.
Design handoff and stakeholder review. A Figma frame or Storybook story built with generated data looks like a real product in review. Verified badges, images, and long-tail engagement numbers all appear naturally without manually crafting edge-case fixtures.
Testing engagement number formatting. Some posts will hit the thousands range. That means you can test whether your component correctly abbreviates 1,200 as 1.2K or wraps at unusual widths — all from a single generated batch.
Tips and notes
- Drop the image ratio to zero to test a text-only timeline, or raise it to 100% to test an image-heavy grid layout.
- Raise the post count to exercise infinite scroll, lazy avatar loading, and engagement-count formatting (for example abbreviating thousands).
- Because reposts and comments are derived from likes, the numbers stay believable and you can build and test “sort by engagement” against the data.
- Verified badges appear on roughly one user in five, so you can build and test verified-badge rendering without editing the sample data.