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.

Install

Install the client and the package for your framework. The framework packages include rich text rendering and the visual editor bridge.

npm install @blokcms/client @blokcms/react    # React 18+
npm install @blokcms/client @blokcms/vue      # Vue 3.4+
npm install @blokcms/client @blokcms/svelte   # Svelte 5
npm install @blokcms/client                   # no framework

Without a framework, add @blokcms/richtext to render rich text. pnpm, yarn and bun work the same way (pnpm add …). To keep content types in code and generate TypeScript types, also add the CLI:

npm install -D @blokcms/cli

Fetch content

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.