Skip to content

Quick Start (5 Minutes)

This guide gets you from zero to a live blog using JSONPress.

1. Create content

Log in to your JSONPress Dashboard and create a blog post. Add a Heading, some Text, and an Image.

Click Publish to make it available via the public API.

2. Get your API Key

Go to Settings → API Key and generate a key. This will be used as the apiKey prop in the renderer.

3. Install the Renderer

In your React project, install the official renderer:

npm install jsonpress-block-renderer

4. Render the Blog

Use the JsonPressBlog component. It handles fetching and rendering automatically.

"use client";

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

export default function MyBlog() {
  return (
    <div style={{ maxWidth: '800px', margin: 'auto' }}>
      <JsonPressBlog
        apiKey="YOUR_API_KEY"
        slug="your-blog-slug-or-id"
        template="Professional"
      />
    </div>
  );
}

Done! 🎉

You’ve successfully integrated JSONPress. Your content is now managed in the dashboard and rendered in your app.

What’s next?