Core Concepts

JSONPress is designed to bridge the gap between content creation and frontend implementation. It consists of three core layers.

1. The Editor (Content)

Content is created in the JSONPress dashboard using a block-based editor. Unlike traditional CMSs that use a single “body” field, JSONPress breaks content into discrete Blocks (Paragraphs, Headings, Images, Code).

2. The API (JSON)

Every post is exposed via a REST API as a structured JSON object. When you fetch a blog, you get the metadata (title, category) and a blocks array containing the content.

Example Response:

{
  "title": "My first blog",
  "blocks": [
    { "type": "paragraph", "data": { "text": "Hello world" } },
    { "type": "code", "data": { "code": "console.log('test')", "language": "js" } }
  ]
}

3. The Renderer (UI)

The final step is transforming JSON blocks into UI components. While you can parse the JSON yourself, the official jsonpress-block-renderer handles this automatically. It maps each block type to a pre-styled React component.

---

The Workflow

1. Write in the JSONPress Editor.
2. Fetch via the public API with your x-api-key.
3. Render using the jsonpress-block-renderer in your frontend.