Quickstarts by surface
Render a blog frontend
Read published posts with a public key and render them in React.
Use a public key to read published content directly from a browser. Never expose a private publishing key in frontend code.
Fetch the post list
export async function listPosts() {
const response = await fetch(
"https://api.cli-blog.com/v1/posts?status=published&fields=summary,seo",
{ headers: { "x-api-key": import.meta.env.PUBLIC_CLI_BLOG_KEY } },
);
if (!response.ok) throw new Error(`Cli Blog returned ${response.status}`);
return response.json();
}Render the result
import { useEffect, useState } from "react";
export function BlogIndex() {
const [posts, setPosts] = useState<Array<{ id: string; title: string }>>([]);
useEffect(() => {
listPosts().then((result) => setPosts(result.data));
}, []);
return (
<ul>
{posts.map((post) => <li key={post.id}>{post.title}</li>)}
</ul>
);
}Request content when a post page needs body_markdown or the generated table_of_contents array. Choose a Markdown renderer and sanitize generated HTML according to your framework's security model.
Continue with a full framework guide such as Next.js, React, or Vue.