Quickstart

Next.js or TanStack Start, in one command

In your app's folder (npx create-next-app@latest or npx @tanstack/cli create makes one):

npx @blokcms/cli init
npm run dev

It signs you in through the browser, picks your space (or makes one with starter content), writes the keys to .env.local, adds the routes and a component for each block type, and shows the site in the visual editor. Open http://localhost:3000: your home page comes from BlokCms. Next.js and TanStack Start have the details, and how to go live.

Any other framework

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.