API Blocks

Dynamic Blocks (also called API Blocks) allow you to query real-time data from external HTTP APIs (e.g. weather feeds, e-commerce products, or headless CMS platforms) and render it directly on your site pages using LiquidJS templates.

To manage your API Blocks, navigate to your site dashboard and click the API Blocks tab.

---

How It Works

1. Configure Request: Set the URL, HTTP method, query params, headers, authentication, and caching rules.
2. Design Template: Write a LiquidJS HTML template to format the JSON data, utilizing the interactive schema fields sidebar.
3. Bind Block: Add a Dynamic Block onto your canvas in the Visual Editor and select your configured API Block.
4. Proxy Fetch: When a visitor accesses the page, the server fetches the API secure-ly, applies the template, and renders the result.

---

Creating an API Block

1. Navigate to the API Blocks tab in your site dashboard.
2. Click New API Block.
3. Enter a Name (e.g., "E-commerce Catalog") and click Create & Configure.

You will be redirected to the API Builder page.

---

Request Configuration

The request bar lets you select the HTTP method (GET, POST, PUT, PATCH, or DELETE) and enter the destination URL. Underneath the request bar, configure headers and params across six tabs:

1. Params (Query Parameters)

• Add key-value parameters to append to the endpoint query string.
• Use the checkbox next to each parameter to toggle it on or off for testing.

2. Headers

• Configure key-value HTTP request headers.
• Reference securely stored credentials using {{credential_name}} syntax to avoid exposing API keys or tokens.

3. Auth (Credentials)

• Connect encrypted workspace credentials to your request. Click Add Credential to register a token or API key.
• Credential values are encrypted using AES-256-GCM and never exposed in public logs or client-side code.

4. Body

• Enter raw JSON payloads to send with POST, PUT, or PATCH requests.

5. Behavior (Trigger & Actions)

Configure when the request executes and what it does with the response:

• Trigger: Choose On page load (automatic) or On button click (user-initiated).
• Action:
  • Render template: Display the formatted HTML template output directly.
  • Load more (append): Render template with pagination. Clicking a button appends the next page of results.
  • Paged (numbered, replace): Render standard paginated controls. Injects variables (data.current_page, data.total_pages, data.prev_page, data.next_page) into the template.
  • Redirect (e.g. checkout): Fetch a target URL from the JSON response and automatically redirect the user to it.
• Pagination Variables: Paginated actions expose {limit}, {skip}, {offset}, and {page} keys, which you can inject directly into your Query Parameters or Request Body (e.g. ?page={page}).

6. Cache

Control how response data is cached to minimize API latency and protect source rate limits:

• Strategy: Choose between Stale-while-revalidate, Cache-first, or Network-first.
• TTL: Define the cache duration in seconds.

Root Path

Located next to the request tabs, the Root Path input lets you specify a dot-path (e.g., data.items or results) to extract a specific child object or array from the JSON response payload to serve as the root context of your LiquidJS template.

---

Testing & Inspecting Responses

Click Send (in the request bar) to execute the request. The test results will appear in the response inspector panel:

• Status: View HTTP status codes, execution duration (ms), and response body size.
• body: Inspect the raw JSON response payload.
• headers: View HTTP headers returned by the server.
• cookies: Inspect set cookies.
• results: Inspect the JSON data subset filtered by your configured Root Path.

---

LiquidJS Response Templates

Once a request returns successfully, the system infers its JSON schema. You can build your HTML template in the split-screen Template Editor:

• LiquidJS Syntax: Iterate over lists or display object attributes. For example, rendering product cards:

  {% for product in data %}
    <div class="product-card">
      <img src="{{ product.thumbnail }}" alt="{{ product.title }}" />
      <h3>{{ product.title }}</h3>
      <p>${{ product.price }}</p>
    </div>
  {% endfor %}

• Schema Viewer: The left sidebar of the template editor displays the inferred JSON schema fields. Click any field key to insert it directly into your template cursor.
• Live Preview: The right-hand panel renders your LiquidJS template in real time.
  • Click Fullscreen to test responsiveness in a fullscreen modal.
  • If the template syntax is incorrect, a Template Error box will point out the failing line number and error detail.

---

Placing API Blocks on Your Site

1. Open the visual page editor.
2. Under the left panel's Data Panel (Database/CMS icon) in the APIs tab, verify that your API block is listed.
3. In the left blocks menu, click to add a Dynamic Block onto the canvas.
4. With the block selected, open the right sidebar settings.
5. In the dropdown, select your configured API Block. The page canvas will render the live API data immediately.
6. Publish the site.

---

Security & SSRF Protection

All API Block requests are routed through safe proxy servers:

• SSRF Prevention: Requests to loopback addresses (127.0.0.1, localhost) and private subnets are blocked.
• Domain Restrictions: Admins can configure domain allowlists to limit external endpoints.
• Encrypted Credentials: Stored tokens are encrypted at rest using AES-256-GCM.