Svelte Headless CMS

How it works

Blog Getting Started

How to use SvelteKit to pull content from a headless CMS and display for arbitrary urls

A dynamic svelte folder called [..slug] passes all traffic via 2 files. First is the server-side +layout.server.js which grabs the content for whatever url is requested from the Pullnote REST API.

export async function load({url, params}) {

  const PULLNOTE_KEY = "your_api_key";

  // Page slug e.g. "productivity/how-to-concentrate"
  var slug = params.slug || "";

  // Get content from pullnote
  var apiUrl = "" + slug;
  var res = await fetch(apiUrl, {
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "pn_authorization": "Bearer " + PULLNOTE_KEY
  var data = await res.json();
  return data;

+page.svelte then picks up that data via $ and renders the content returned.

  import { page } from '$app/stores';
  $: note = $;

<div class="flex flex-col gap-5 md:w-2/3 mx-auto content">

  {@html note.content_html}


A simple +layout.svelte with Header and Footer components lays everything out with app.css providing the tailwind formatting.

See the Pullnote documentation for more details.

Related docs

Download the code for this blog from GitHub at