Dev
Mock Pagination Metadata Generator
Pagination edge cases are common sources of UI bugs: the first page where has_prev must be false, a last page where item count is less than perPage, or a single-page result where navigation should disappear. This generator produces realistic pagination blocks in three formats. JSON gives a plain object with total_items, per_page, total_pages, current_page, has_next, has_prev, and page numbers. Link header follows RFC 5988 with rel values for first, prev, next, and last, matching GitHub's API. Envelope format wraps a data array alongside meta and links objects, matching JSON:API and Laravel Paginator conventions. Set count to generate multiple blocks at once — one per page state. For Storybook, create one story per pagination state rather than a toggle — it makes visual regression testing far more reliable.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Select the format that matches your API: JSON, Link Header, or Envelope.
- Set the count field to the number of pagination blocks you need, typically four to eight for full page-state coverage.
- Click Generate to produce the metadata blocks.
- Copy individual blocks and paste them into your fixture files, Postman examples, or OpenAPI spec.
- For sequential page simulation, assign blocks in order from first to last page in your test setup.
Use Cases
- •Seeding a Postman mock server with first, middle, and last-page states to test UI boundary conditions
- •Populating Storybook stories for a pagination component with realistic total, perPage, and page values
- •Pasting RFC 5988 Link header output into a queryFn to test React Query's next-page fetching logic
- •Adding concrete JSON examples under paginated list endpoints in an OpenAPI or Redoc spec
- •Building Pact contract fixtures that cover empty-last-page and single-result edge cases
Tips
- →Generate exactly four blocks and label them first-page, mid-page, last-page, and single-page to cover every pagination boundary condition in one pass.
- →When using Link header format, run the output through the npm package parse-link-header locally to verify your parsing code handles it before wiring up tests.
- →For Storybook, create one story per pagination state rather than one story with a toggle — it makes visual regression testing far more reliable.
- →Envelope format works best for mobile API contracts because the client parses one JSON body instead of splitting logic between headers and body.
- →If your API uses a different field name like offset or pageIndex instead of page, generate JSON format and do a find-replace before committing to fixtures.
- →Pair this generator with a mock data generator for the data array inside envelope blocks so Storybook stories render fully populated list components.
FAQ
how do I mock pagination data for multiple page states in frontend tests
Set the count input to four or more so you get blocks representing the first page, middle pages, last page, and a single-page result in one batch. Each block has different page numbers, totals, and link values, so you can assign one block per test case or Storybook story without manually editing numbers.
what's the difference between JSON, Link header, and envelope pagination formats
JSON format gives you a plain object with page, perPage, total, and totalPages fields — common for custom REST APIs. Link header output follows RFC 5988 with rel values for first, prev, next, and last, matching GitHub's API. Envelope format wraps a data array alongside meta and links objects, matching JSON:API and Laravel Paginator conventions.
are the generated totals consistent across blocks if I need to simulate the same dataset
Each block is generated with independently randomized values, so totals can differ between blocks. If you need all blocks to represent pages from the same collection, generate a batch, pick one total value, and align the total field across them before committing to your fixtures.
does the output include edge-case states like an empty last page
The generator randomizes current_page and total_items independently, naturally producing a range of states. has_next and has_prev are computed correctly from page numbers. If you need a guaranteed empty-last-page fixture, generate a batch and look for the block where current_page equals total_pages.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.