> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reelevant.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Reelevant as API (JSON)

> Use Reelevant as a headless personalisation API — get structured JSON data and render it however you want

## Why use JSON output?

The Client-Side Script and Server-Side SDK both deliver **rendered HTML** (or images) that you inject into your page. This is ideal when Reelevant controls both the logic *and* the visual output.

But sometimes you want Reelevant to handle the **personalisation decisions** while your own frontend handles the **rendering**. That's what the JSON API approach gives you.

<CardGroup cols={2}>
  <Card title="Full rendering control" icon="paintbrush">
    You receive structured data — product names, prices, scores, URLs — and render them with your own components, design system, or native UI.
  </Card>

  <Card title="Framework-agnostic" icon="plug">
    Works with React, Vue, Svelte, Flutter, iOS, Android, or any client that can make an HTTP request and parse JSON.
  </Card>

  <Card title="Typed & predictable" icon="shield-check">
    JSON Templates define a schema upfront. Your frontend knows exactly what fields to expect — no guessing, no parsing HTML.
  </Card>

  <Card title="Same personalisation engine" icon="brain">
    All the power of Reelevant workflows — datasources, conditions, splits, real-time testing — just with JSON output instead of visual content.
  </Card>
</CardGroup>

## When to choose this approach

| Scenario                                                        | Recommended                            |
| --------------------------------------------------------------- | -------------------------------------- |
| You have a design system and want personalised *data*, not HTML | **JSON API**                           |
| Mobile app that renders natively                                | **JSON API**                           |
| Headless CMS or composable architecture                         | **JSON API**                           |
| You want Reelevant to produce ready-to-display visuals          | Client-Side Script or Server-Side SDK  |
| Quick integration, no development effort                        | Client-Side Script + Browser Extension |

## How it works

<Steps>
  <Step title="Create a JSON Template">
    In the Reelevant platform, create a JSON Template that defines the schema (fields and types) and declares named variables. Each variable maps to a datasource value that will be resolved at runtime.
  </Step>

  <Step title="Build a workflow with a JSON Template output node">
    Add a **JSON Template** output node to your workflow. Select the template you created, and bind each variable to a datasource field — as a scalar value, an array (for product lists, recommendations, etc.), or a fixed datasource item (a specific position).
  </Step>

  <Step title="Publish the workflow">
    Publishing validates that all JSON Template nodes reference the same template and that the template exists. Once published, the workflow is live.
  </Step>

  <Step title="Call the runner endpoint">
    Your application makes a simple HTTP GET request to the Reelevant runner. The response is a JSON object matching your template schema — with all variables resolved to real-time personalised data.
  </Step>
</Steps>

## Example

Suppose you want to personalise a product recommendation card. Your JSON Template definition might look like:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "headline": { "type": "static", "value": "Recommended for you" },
  "productName": { "type": "dependency", "variable": "productName" },
  "productPrice": { "type": "dependency", "variable": "productPrice" }
}
```

Each field is either a **static** value (fixed at design time) or a **dependency** (a named variable resolved from your datasources at runtime). At runtime, the Reelevant engine resolves each dependency — so each visitor sees the product most relevant to them. The response is a flat JSON object:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "headline": "Recommended for you",
  "productName": "Running Shoes Pro",
  "productPrice": 129.99
}
```

Your frontend simply renders the JSON fields using its own components.

## Next steps

<CardGroup cols={2}>
  <Card title="Technical Integration" icon="code" href="/developer-docs/web-integration/api-json/integration">
    API endpoints, request format, response structure, and code examples.
  </Card>

  <Card title="JSON Template (Output Node)" icon="file-code" href="/product-guide/workflows/output-nodes/json-template">
    Learn about the JSON Template output node configuration in the workflow editor.
  </Card>
</CardGroup>