Dev
Generator für Mock-Paginierungs-Antworten
A mock pagination response generator gives frontend and backend developers a complete, realistic JSON payload without waiting for a live API. Paste the output directly into MSW handlers, Jest fixtures, or Postman collections and start building list views, data tables, and infinite scroll components immediately. Configure three inputs — items per page, current page, and total items — and every derived field is computed for you: total_pages, has_next, has_prev, next_page, prev_page, and from/to range indicators. Pagination edge cases are where bugs hide. The last page returning fewer items than the page size, a single-page result set, or a current page beyond the total range all behave differently. This tool generates accurate metadata for every scenario automatically.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set 'Items per Page' to the page size your real API will use, such as 10, 25, or 50.
- Enter the 'Current Page' number you want to simulate, starting at 1 for the first page.
- Set 'Total Items' to your expected dataset size, including odd numbers to test partial last pages.
- Click Generate to produce a complete JSON response with all pagination metadata computed.
- Copy the output and paste it into your test fixture, MSW handler, or API documentation example.
Use Cases
- •Populating a TanStack Table or AG Grid component before the backend API exists
- •Creating MSW (Mock Service Worker) handler responses for paginated REST endpoints
- •Testing last-page partial-item behavior with 97 total items and 10 per page in Vitest
- •Generating JSON Server fixture files to power local development with realistic pagination
- •Writing accurate, runnable pagination examples in OpenAPI or Postman collection documentation
Tips
- →Test page 1, a middle page, and the exact last page separately — UI bugs often appear only at boundaries.
- →Use a total like 101 with page size 10 to force an 11-page scenario and quickly spot off-by-one errors in your page count display.
- →If your framework uses 0-indexed pages internally, generate with page 1 and adjust the current_page value in your fixture before committing.
- →Pair the generated JSON with MSW's runtime handler so different page parameters return different generated responses without maintaining multiple files.
- →Set total items to 0 to generate an empty-state response and verify your UI shows the correct 'no results' message instead of broken pagination controls.
- →Match your real API's field naming conventions — if your backend uses camelCase (totalPages vs total_pages), do a quick find-and-replace on the output before using it in tests.
FAQ
how do I mock a paginated API response for Jest or Vitest tests
Generate a response with your desired page size, current page, and total items, then paste the JSON into a fixture file or inline it as your API mock's return value. Fields like total_pages and has_next are already computed, so your assertions can check pagination state without extra setup logic. This works equally well with React Query, SWR, and TanStack Query test patterns.
how do I simulate the last page returning fewer items than the page size
Set total items to a number that doesn't divide evenly by page size — for example, 97 items with 10 per page — then set current page to 10. The generator returns 7 items in the data array, sets has_next to false, and calculates the correct from/to range. This is the fastest way to catch UI bugs that only surface on the final page.
what's the difference between the from/to fields and the page/page_size fields
page and page_size describe the pagination parameters themselves. from and to are derived fields showing the absolute item index range on the current page — for example, items 21 to 30 on page 3 of a 10-per-page result set. Most table UIs display 'Showing 21–30 of 97 results' directly from these fields without any extra calculation on your end.
How do I mock a paginated API response for Jest or Vitest?
Generate a response and use it as the resolved value of your mocked fetch or client (mockResolvedValue) so your component or hook receives realistic data plus pagination metadata (page, total, links) without a live API. Generate responses for page 1, a middle page, and the last page to cover the pagination logic.
How do I simulate the last page returning fewer items?
Set the total items so it does not divide evenly by the page size (for example 97 items at 10 per page) and request the final page — the response returns the remainder (7 items) with the correct "has next page = false" metadata. That is exactly the edge case pagination bugs hide in, so test it explicitly.
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.