JSONPress Block Renderer

Official Website: jsonpress.in
Documentation: docs.jsonpress.in

A high-performance, tree-shakable React library for rendering JSONPress blog content with premium UI layouts. Built with Tailwind CSS v4 and optimized for Next.js (SSR/CSR).

✨ Features

• Modern Renderer: Full support for Header, Paragraph, Image, List, Quote, Code blocks, and more.
• Isomorphic Support: Works perfectly on both Server (SSR) and Client (CSR).
• Premium Layouts: 5 built-in professional templates: Minimal, Modern, Classic, Professional, and Editorial. Also supports None (raw content).
• Glassmorphism: Elegant translucent UI elements for a state-of-the-art aesthetic.
• Tailwind CSS v4: Powered by the latest styling engine for maximum performance.
• Type Safe: Fully typed with TypeScript for a seamless developer experience.

🚀 Installation

npm install jsonpress-block-renderer

📖 Basic Usage

Pass your API key and the slug of the blog post you want to render. Ensure you import the bundled CSS for the default theme.

Next.js (Zero-Config SSR)

The library provides zero-config SSR support for Next.js. You can use it directly in your page files.

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

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

export default function Page() {
    return (
        <JsonPressBlog
            apiKey="your_api_key_here"
            slug="your-blog-slug"
        />
    );
}

🎨 Layout Templates

Choose from 5 professionally designed templates, each crafted for a distinct content style:

| Template | Aesthetic | Best For | Default | | :------------- | :--------------------------- | :-------------------------------------- | :-----: | | Professional | Layered Card Overlap | Corporate or financial blogs. | ✅ | | Minimal | Clean, bold typography | Academic or high-focus reading. | | | Modern | Glassmorphism Hero + Sidebar | Magazines and portfolio sites. | | | Classic | Cinematic Full-Width | Travel and storytelling. | | | Editorial | High-End News Standard | News, tech updates, and opinion pieces. | | | None | No layout wrapper | Embedding in a custom page shell. | |

🧪 Testing and Development

Local Showcase

The repository includes a development showcase where you can test changes in real-time.

npm run dev

🎨 Customization

You can deeply customize the look and feel of your blog using the customStyles and customTemplateStyles props.

🧩 Content Block Styles (customStyles)

| Property | Targets | Description & Effect | | :---------- | :---------------- | :-------------------------------------------------------------------- | | container | Content Wrapper | Controls the max-width, padding, and vertical spacing between blocks. | | header | h1 to h6 | Allows per-level styling of headers. | | paragraph | Text Blocks | Defines the typography, line height, and bottom margins. | | list | Lists & Items | Styles the container, bullet types, and individual list items. | | image | Images & Captions | Controls sizing, borders, background effects, and captions. | | quote | Blockquotes | Customizes the border-left, background, and typography. | | code | Code Blocks | Styles the container, background, and font for technical snippets. | | table | Tables | Manages borders, cell padding, and header/body styling. | | warning | Callouts | Styles the alert boxes, icons, and titles. | | delimiter | HR / Separators | Controls the appearance of section dividers. |

🖼️ Layout Styles (customTemplateStyles)

| Property | Targets | Description & Effect | | :---------------- | :------------ | :------------------------------------------------------------------- | | container | Page Wrapper | The master container for the entire blog post. | | title | Blog Title | Sets the typography for the main article headline. | | subTitle | Blog Subtitle | Styles the summary or secondary headline. | | authorContainer | Author Info | Styles the section containing the author's avatar and name. | | category | Category Pill | Customizes the category badge aesthetic. | | date | Publish Date | Specifically styles the date string. | | coverContainer | Hero Image | Controls the aspect ratio and padding of the featured image section. |

🌐 API Support

The library fetches directly from the JSONPress Public API: https://api.jsonpress.in/api/v1/public/blog/{slug}

📄 License

MIT © JSONPress