Svelte blog integration

@opinly/svelte is a plain Svelte renderer. Use it in a Vite + Svelte app, or anywhere Svelte runs. (On SvelteKit, add @opinly/sveltekit for the <OpinlySeo> head component and server load functions.)

Install

pnpm add @opinly/backend @opinly/svelte @opinly/shared

npm i @opinly/backend @opinly/svelte @opinly/shared

yarn add @opinly/backend @opinly/svelte @opinly/shared

Fetch + render

A Vite + Svelte app has no server of its own, so fetch with @opinly/backend from your own backend (or at build time) and hand the post to the component as a prop — that keeps OPINLY_API_KEY out of the browser bundle.

// server/posts.ts — runs on your server, never in the Vite bundle
import { createOpinlyClient } from '@opinly/backend'

const opinly = createOpinlyClient({
  apiKey: process.env.OPINLY_API_KEY,
  // So Opinly can name each post's live URL and report its performance.
  site: { siteUrl: 'https://example.com', blogPrefix: '/blog' },
})

export const getPost = (slug: string) => opinly.post(slug) // FullPost | null

<!-- src/lib/Post.svelte -->
<script lang="ts">
  import { OpinlyContent, type OpinlyNode } from '@opinly/svelte'

  let { post } = $props()

  const config = {
    imagesPrefix: 'https://cdn.opinly.ai/REPLACE-ME-xxxxxxxx', // your 21-char CDN namespace
    siteUrl: 'https://example.com',
  }
</script>

{#if post}
  <article>
    <h1>{post.title}</h1>
    <OpinlyContent content={post.content as OpinlyNode} {config} />
  </article>
{/if}

Point imagesPrefix straight at the CDN (https://cdn.opinly.ai/<your-namespace>) — images load directly from the absolute URL, with no proxy. To serve them same-origin instead, proxy /images/* to the CDN on your host and set imagesPrefix: '/images' to match.

<OpinlyContent> takes content, config, and an optional classNames. It serialises the content to HTML with renderToHtml and injects it with {@html}. See Rendering for node coverage and styling.

SEO

There's no Svelte-specific SEO adapter — use @opinly/shared's neutral builders (buildMetadata, buildBlogPostingJsonLd) and write the tags into <svelte:head> yourself. See SEO.

Notes

• Requires Svelte 5. The package ships .svelte source for your app to compile, and the components use runes ($props(), $derived), which a Svelte 4 compiler can't build.
• @opinly/svelte also exports <OpinlyPixel writeKey host> and getOpinlyPixel() for analytics — see Install the pixel.