SDKs

Package	What
`@blokcms/client`	Typed Delivery API client, link and image URL helpers, editor ticket verification.
`@blokcms/react`	`Blocks`, `RichText`, `BlokImage`, `editable()`, `useLiveEntry`.
`@blokcms/vue`	`BlokBlocks`, `BlokRichText`, `BlokImage`, `v-editable`, `useLiveEntry`.
`@blokcms/svelte`	Svelte 5: `BlokBlocks`, `BlokRichText`, `BlokImage`, `use:editable`, `liveEntry` store.
`@blokcms/richtext`	Rich text to safe HTML or plain text, for any framework.
`@blokcms/bridge`	The visual editor bridge (also hosted at `https://docs.blokcms.app/bridge/v1.js`).

Client

const blok = createClient({ space, token, locale: "en" });
await blok.getEntryByPath("/about", { include: ["author"] });
await blok.getEntry("ent_…");
for await (const entry of blok.allEntries({ type: "article" })) { /* … */ }
await blok.getTree({ under: "/docs", depth: 2 });
await blok.getList("countries");
await blok.search("bike repair", { limit: 5 });   // AI-enabled spaces

linkHref(link, included);                        // entry, asset and URL links → href
assetUrl(asset, { width: 800 });
assetSrcSet(asset);
blok.setCacheVersion(cvFromWebhook);             // pin a version for immutable caching

Vue

import { createBlok, BlokBlocks } from "@blokcms/vue";
app.use(createBlok({ components: { hero: Hero } }));

<BlokBlocks :blocks="entry.content.fields.body" />
<section v-editable="block">…</section>

Svelte

<script>
  import { setBlokContext, BlokBlocks, liveEntry } from "@blokcms/svelte";
  let { data } = $props();
  setBlokContext({ components: { hero: Hero } });
  const entry = liveEntry(data.entry);
</script>

<BlokBlocks blocks={$entry.entry.content.fields.body} />

<!-- Hero.svelte -->
<section use:editable={block}>…</section>

Rich text

import { renderRichText } from "@blokcms/richtext";
import { richTextLinkResolver } from "@blokcms/client";

const html = renderRichText(fields.body, { resolveLink: richTextLinkResolver(included) });

Output is escaped and only http(s), mailto, tel and relative links are kept.