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 })

Tell Opinly where your blog lives so it can report how each post is doing. On Next.js this is automatic (withOpinlyConfig sets it). On every other framework, pass the config object you already use for canonical URLs:

const opinly = createOpinlyClient({
  site: { siteUrl: 'https://acme.com', blogPrefix: '/blog' },
})

Without it, Opinly holds no address for your posts and cannot match them to search or traffic data. See the client reference.

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.