METHOD 2: HEADLESS JSON API

JSON REST API Integration

Retrieve raw JSON post payloads from our endpoints and build completely custom layouts using React, Vue, Next.js, or mobile frameworks.

API Endpoint Specs

1. Fetch Post List

GET /api/v1/posts?site=YOUR_KEY

2. Fetch Single Post Details

GET /api/v1/posts/:slug?site=YOUR_KEY

Sample React/Next.js Code

BlogPage.tsx

async function BlogPage() {
  const res = await fetch('https://embedcms.com/api/v1/posts?site=YOUR_KEY', {
    next: { revalidate: 3600 } // Cache hourly
  });
  const { posts } = await res.json();

  return (
    <div className="grid gap-6">
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Live Headless API Rendering Demo

The grid below makes fetch requests to our JSON endpoint and mounts the posts client-side.

Querying REST API endpoint...