---
title: "Prototype a Frontend with Stable Sample Data | Mochavi Payloads"
description: "Populate tables, lists and loading states from a CORS-enabled sample JSON URL without creating an account or running a backend."
canonical: "https://payloads.mochavi.com/guides/frontend-prototype-test-data"
markdown_mirror: "https://payloads.mochavi.com/guides/frontend-prototype-test-data.md"
language: "en"
generated_from: "Payloads source content"
---

> Canonical HTML: [https://payloads.mochavi.com/guides/frontend-prototype-test-data](https://payloads.mochavi.com/guides/frontend-prototype-test-data)
>
> This machine-readable Markdown page mirrors the canonical Payloads documentation.

# Prototype a Frontend with Stable Sample Data

A minimal fixture-data pattern for prototypes that should not depend on a dynamic fake API.

## Short answer

For a read-only prototype, fetch a small versioned JSON collection directly from Payloads. The v1 files allow cross-origin requests, require no key and stay stable, so screenshots and demos do not change because a random-data service returned different records.

## Load the fixture directly

Use users for profile or people interfaces, projects for cards and status displays, and tasks for tables, filters and completion states.

**Simple frontend request**

```js
const response = await fetch("https://payloads.mochavi.com/v1/tasks.json");
const tasks = await response.json();
renderTaskTable(tasks);
```

## Why stable data helps a prototype

- Visual regression snapshots receive the same labels and lengths.
- A product demo does not acquire different random content.
- Bug reports can name the exact fixture URL.
- Designers and developers can share one input across tools.
- The same records are available as CSV, XML and other formats later.

## Do not pretend it is a backend

Payloads only serves GET-able static assets. It has no pagination contract, mutations, login, server-side filtering or persistence. When the prototype needs those behaviours, move to a fake REST API or a local mock that reflects the intended application contract.

## Start with these collections

- [Users JSON](https://payloads.mochavi.com/v1/users.json)
- [Projects JSON](https://payloads.mochavi.com/v1/projects.json)
- [Tasks JSON](https://payloads.mochavi.com/v1/tasks.json)
- [Browse all endpoints](https://payloads.mochavi.com/explorer)