Skip to content

Using the Block Renderer

The jsonpress-block-renderer is a React library that automatically converts JSONPress blocks into UI components.

Installation

npm install jsonpress-block-renderer

Implementation

The library provides a high-level JsonPressBlog component designed for individual blog detail pages. It handles fetching and rendering automatically using your apiKey and the slug.

"use client";

import { JsonPressBlog } from "jsonpress-block-renderer";

// Import the modern Tailwind v4 styles
import "jsonpress-block-renderer/style";

export default function BlogPost() {
    return (
        <JsonPressBlog
            apiKey="your_api_key_here"
            slug="your-blog-slug"
            // template defaults to "Professional"
            template="Professional"
        />
    );
}

Props

Prop	Type	Description
`apiKey`	`string`	Your JSONPress API key (x-api-key).
`slug`	`string`	The unique slug/ID of your blog post.
`template`	`string`	(Optional) The layout style. Defaults to `"Professional"`.
`customBlocks`	`Object`	(Optional) Components to override default rendering.

Links