How Rendering Works

Rendering in JSONPress is a direct mapping from JSON types to React components, specifically optimized for individual blog detail pages.

The JSON Structure

When you fetch content from JSONPress, you receive an array of blocks. Each block has a type and a data object containing its properties.

{
  "type": "heading",
  "data": {
    "text": "Getting Started",
    "level": 2
  }
}

Transformation Layer

The jsonpress-block-renderer library provides a high-level JsonPressBlog component. This component:

1. Fetches the content from the JSONPress API using your apiKey and slug.
2. Iterates through the blocks array.
3. Mounts the appropriate pre-styled component for each type.

• paragraph -> <p />
• image -> <img />
• heading -> <h2 />, <h3 />, etc.

Why this works

By separating the content (JSON) from the presentation (Renderer), you can:

• Change styles globally: Update your template to change how every blog post looks.
• Maintain type safety: The library handles all transformations safely.
• Zero Configuration: Use built-in templates like Modern or Minimal without writing any CSS.