Quickstart

1. In the admin, create a space, then a content type page with a title (text) and a body (blocks) field.
2. Create an entry, give it a title and publish it.
3. In Settings → Delivery tokens, create a public token. Restrict it to your site's origins if it runs in browsers.

Fetch content

npm install @blokcms/client

import { createClient } from "@blokcms/client";

const blok = createClient({ space: "spc_…", token: "blok_pub_…", locale: "en" });

const { entry, included } = await blok.getEntryByPath("/");
console.log(entry.content.fields.title);

// Lists, filters and paging
const posts = await blok.listEntries({
  type: "article",
  under: "/blog",
  filter: { featured: true },
  sort: ["-publishedAt"],
  limit: 10,
});

Or plain HTTP:

curl "https://cdn.blokcms.app/v1/spc_…/entries/by-path/?token=blok_pub_…"

Render blocks

Map block types to your components. React:

import { BlokProvider, Blocks, editable } from "@blokcms/react";

function Hero({ block, fields }) {
  return <section {...editable(block)}><h1>{fields.headline}</h1></section>;
}

<BlokProvider components={{ hero: Hero }} included={included}>
  <Blocks blocks={entry.content.fields.body} />
</BlokProvider>

Vue and Svelte work the same way, see SDKs. A complete TanStack Start starter is in examples/tanstack-start-site.