Code Examples

Render LiquiChart data server-side in any framework. Google indexes the content — no iframes.

Next.js (App Router)

// app/chart/[id]/page.tsx
export default async function ChartPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const res = await fetch(`https://www.liquichart.com/api/v1/charts/${id}`, {
    headers: { 'x-api-key': process.env.LIQUICHART_API_KEY! },
  });
  const { data: chart } = await res.json();

  return (
    <article>
      <h2>{chart.title}</h2>
      {/* Native HTML — Google indexes this */}
      <table>
        <tbody>
          {chart.data.map(d => (
            <tr key={d.label}>
              <td>{d.label}</td>
              <td>{d.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {chart.insight && <blockquote>{chart.insight.text}</blockquote>}
      <cite>Source: {chart.source.attribution}</cite>
    </article>
  );
}

Compare with iframes: <iframe src="..."> — Google sees nothing. With the API, every word is in the HTML source.

Nuxt 3

<!-- pages/chart/[id].vue -->
<script setup>
const { id } = useRoute().params;
const { data: response } = await useFetch(
  `https://www.liquichart.com/api/v1/charts/${id}`,
  { headers: { 'x-api-key': useRuntimeConfig().liquichartApiKey } }
);
const chart = response.value?.data;
</script>

<template>
  <article v-if="chart">
    <h2>{{ chart.title }}</h2>
    <table>
      <tr v-for="d in chart.data" :key="d.label">
        <td>{{ d.label }}</td>
        <td>{{ d.value }}</td>
      </tr>
    </table>
  </article>
</template>

Astro

---
// src/pages/chart/[id].astro
const { id } = Astro.params;
const res = await fetch(`https://www.liquichart.com/api/v1/charts/${id}`, {
  headers: { 'x-api-key': import.meta.env.LIQUICHART_API_KEY },
});
const { data: chart } = await res.json();
---

<article>
  <h2>{chart.title}</h2>
  <table>
    {chart.data.map(d => (
      <tr><td>{d.label}</td><td>{d.value}</td></tr>
    ))}
  </table>
</article>

WordPress (PHP)

<?php
// functions.php or template file
function liquichart_get_chart($short_id) {
    $response = wp_remote_get(
        "https://www.liquichart.com/api/v1/charts/{$short_id}",
        ['headers' => ['x-api-key' => LIQUICHART_API_KEY]]
    );
    $body = json_decode(wp_remote_retrieve_body($response), true);
    return $body['data'] ?? null;
}

$chart = liquichart_get_chart('abc12345');
if ($chart): ?>
<article>
    <h2><?= esc_html($chart['title']) ?></h2>
    <table>
        <?php foreach ($chart['data'] as $d): ?>
        <tr><td><?= esc_html($d['label']) ?></td><td><?= $d['value'] ?></td></tr>
        <?php endforeach; ?>
    </table>
</article>
<?php endif; ?>

Living Content

// Fetch the active variant of a Living Content block
const res = await fetch('https://www.liquichart.com/api/v1/living-content/framework-race', {
  headers: { 'x-api-key': process.env.LIQUICHART_API_KEY },
});
const { data: block } = await res.json();

// Render as a paragraph
<p>{block.content}</p>
// → "React leads with 42% of the vote, a clear frontrunner..."
// Proactive mode: when the linked poll crosses a threshold you set, the block
// swaps to the variant you wrote for it: "The race has tightened to a dead heat..."
// Reactive mode: when a source changes, the fix is proposed for your approval first.

// No iframe. No JavaScript. Pure server-rendered prose.