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.

TechStack

Links

Overview