Svelte Blocks Renderer (Strapi)

Svelte Blocks Renderer (Strapi)

sbr is built for teams who love Strapi’s flexible content model but want the front end to feel first-class in Svelte 5. Drop in a single renderer, pass your blocks JSON, and you get structured UI that matches your stack—not a generic “dump HTML” escape hatch.

Inilathala Na-update 543 mga view

TechStack

  • Svelte
  • Strapi
  • Sveltekit

Links

Github Link Live Website

Overview

Why teams reach for it

  • Built for modern Svelte — Designed around Svelte 5 so it feels natural in today’s component model.

  • Looks like your product, not a template — Override blocks and modifiers so typography, spacing, and components match your design system.

  • Tailwind-friendly — Plays nicely with Tailwind v4, so utility-first styling stays in your wheelhouse.

  • Less glue code — Spend time on UX, not parsing and mapping Strapi’s block tree by hand.

In one line: Ship CMS-driven pages faster—Strapi defines the content; sbr makes it sing in Svelte.

Install

bun add sbr-mike
npm i sbr-mike
pnpm add sbr-mike
yarn add sbr-mike

Use

<script lang="ts">
	import { BlocksRenderer } from 'sbr-mike';

	const content = [
		{ type: 'paragraph', children: [{ text: 'Hello world' }] },
		{ type: 'heading', level: 2, children: [{ text: 'Title' }] }
	];
</script>

<BlocksRenderer {content} />

Optional blocks and modifiers props override default components.

import type { RootNode, Node, BlocksContent, ParagraphBlockNode, HeadingBlockNode } from 'sbr-mike';

Licensed under the GNU General Public License v3. See LICENSE for details.