Quickstart

This is the shortest path from API key to rendered content. It uses React, but the two core packages (@opinly/backend + a renderer) work the same everywhere.

1. Install

pnpm add @opinly/backend @opinly/react

npm i @opinly/backend @opinly/react

yarn add @opinly/backend @opinly/react

2. Create a client

createOpinlyClient reads OPINLY_API_KEY from the environment by default. Always create it server-side.

import { createOpinlyClient } from '@opinly/backend'

export const opinly = createOpinlyClient()
// or be explicit: createOpinlyClient({ apiKey: process.env.OPINLY_API_KEY })

3. Fetch a route

const { data: posts } = await opinly.posts({ limit: 12 })

if (posts[0]) {
  const post = await opinly.post(posts[0].slug)
  // post?.content is your Tiptap JSON (null if not found)
}

4. Render it

import { OpinlyContent } from '@opinly/react'

export function Article({ content }) {
  return (
    <article className="prose">
      <OpinlyContent content={content} config={{ imagesPrefix: '/images' }} />
    </article>
  )
}

That's the whole loop: fetch → render. OpinlyContent outputs semantic HTML elements you style yourself (here with Tailwind's prose).

Next steps

• Wire up the full blog (index, posts, categories, authors, sitemap, RSS, SEO) with your framework guide: Next.js · Nuxt · SvelteKit.
• Customize how nodes render or restyle the body — see Rendering.
• Add metadata + JSON-LD — see SEO.