# Data mocking methods

## :heavy\_check\_mark:Custom Code action

The simplest way to mock data is to create an action of the JavaScript Code type, that will return the needed JSON object. For instance, if your API/DB table lists cars, you can do it in the following way:

<figure><img src="/files/epDDIhZFUrKdbO1GIzRe" alt=""><figcaption></figcaption></figure>

The action can be then referenced in different UI Bakery fields using standard `{{actions.newAction.data}}` approach.

If you would also like to emulate the latency when requesting your data source, you can use **Promises** and **setTimeout** to return your data. For instance, your JS action can have the following code:

```javascript
const fakeData = { id: 1, car: 'Mitsubishi', car_model: 'Montero', car_color: 'Yellow', car_model_year: 2002, car_vin: 'SAJWJ0FF3F8321657', price: '$2814.46', availability: false };
const delay = 2000;

return new Promise((resolve, reject) => {
  setTimeout(() => resolve(fakeData), delay);
});

```

{% hint style="info" %}
One of the major benefits of using JavaScript Code action step is that you can easily replace your action with real data by simply changing the action type when you connect a real data source.
{% endhint %}

## :heavy\_check\_mark:State variables

State variables are a great way of mocking data when you not only want to mock reading data but also writing. Find out more about state variables:

{% content-ref url="/pages/jVs6hjp33tabG7HBAXkj" %}
[State variables](/concepts/app-state-variables.md)
{% endcontent-ref %}

## :heavy\_check\_mark:Google spreadsheets instead of SQL databases

SQL databases are often the data sources that people are most reluctant to expose publicly. Fortunately, Google spreadsheets function in a manner very similar to SQL databases within UI Bakery. This allows you to conveniently create a spreadsheet, where each sheet can be considered a table, and the cells in the first row can act as SQL columns:

<figure><img src="/files/anfafZcGcan3W44qra4M" alt=""><figcaption></figcaption></figure>

After the spreadsheet is created, you can [connect it as a data source](/build-from-scratch/getting-started/connect-a-data-source.md) and [create actions](/concepts/actions/action-basics.md#creating-an-action) to retrieve and write data to it.

## :heavy\_check\_mark:Mocking HTTP API with JSON-server

JSON-Server is an **npm package** that you can run locally or on a remote server which provides a simple interface to create fake JSON API. You can create Mock API in three easy steps:

1. Install JSON-server package: \\

   ```
   npm install -g json-server
   ```
2. Create `db.json` file with similar format:\\

   ```
   {
     "posts": [
       { "id": 1, "title": "json-server", "author": "typicode" }
     ],
     "comments": [
       { "id": 1, "body": "some comment", "postId": 1 }
     ],
     "profile": { "name": "typicode" }
   }
   ```
3. Run JSON server:\\

   ```
   json-server --watch db.json
   ```

## :heavy\_check\_mark:UI Bakery's Test data sources

Don't forget that you can always use UI Bakery's Test data sources which are available right in the **Data Source** connect dialog.

<figure><img src="/files/v8cOZicf8wv82asW5t0t" alt=""><figcaption></figcaption></figure>

### Extra 1: Using UI Bakery's self-hosted version

When your data sources are only accessible from a local network, you can also install UI Bakery's self-hosted version and access it from there. UI Bakery self-hosted is easy to install and run - check it out:point\_down:

{% content-ref url="/pages/ZnFkZzq8gpiNThg62q0I" %}
[UI Bakery on-premise](/on-premise/ui-bakery-on-premise.md)
{% endcontent-ref %}

### Extra 2: Using NgRok to proxy data sources

[NgRok](https://ngrok.com/) is a product that creates a secure tunnel from your data source to the internet. Learn more:point\_down:

{% content-ref url="/pages/mhjzji95IKuysN60tyfG" %}
[Connecting local database via ngrok](/concepts/data-sources/connecting-local-database-via-ngrok.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/build-from-scratch/getting-started/build-ui/mocking-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.