Headless CMS for Svelte: Step-by-Step Tutorial

SvelteKit is one of the leanest, fastest web frameworks available. Its compiler-based approach means almost no runtime JavaScript — and pairing it with Cosmic means your content delivery is equally lean. The Cosmic REST API returns structured JSON fast, and SvelteKit's server-side functions are the perfect place to call it.

In this tutorial, you'll build a SvelteKit app connected to Cosmic, fetch content in functions using the TypeScript SDK, render it in Svelte components, and deploy to Vercel.

Target keyword: Svelte headless CMS tutorial

Prerequisites

• Node.js 18+
• A free Cosmic account (sign up here)
• Basic familiarity with Svelte and TypeScript

Step 1: Create a SvelteKit App

Scaffold a new SvelteKit project:

When prompted, choose:

• Skeleton project
• TypeScript (yes)
• Any additional linting options you prefer

Start the dev server:

You should see the default SvelteKit welcome page at .

Step 2: Install the Cosmic TypeScript SDK

Install the official Cosmic SDK:

This gives you — a fully typed client for querying your Cosmic bucket.

Step 3: Set Up Your Cosmic Bucket

1. Log in to Cosmic and create a new bucket (or use an existing one).
2. Create an Object Type called with these metafields:
   • (text)
   • (markdown)
   • (date)
   • (textarea)
3. Add a few test blog post objects.
4. Navigate to Settings > API Keys in your bucket and copy your Bucket Slug and Read Key.

Step 4: Configure Environment Variables

Create a file in your project root:

SvelteKit exposes environment variables prefixed with to both server and client. For server-only secrets, use unprefixed variables and access them via .

Step 5: Create a Cosmic Client Module

Create a reusable server-only client module:

By placing this in , SvelteKit enforces that it's never imported by client-side code — keeping your keys secure.

Step 6: Fetch Content in a Load Function

Create a blog index route:

Now render the data in your Svelte component:

Step 7: Fetch a Single Post

Create a dynamic route for individual blog posts:

And the corresponding Svelte component:

Step 8: Add TypeScript Types for Your Content

Keep things clean with a shared types file:

Import and use these types in your load functions and components for full end-to-end type safety.

Step 9: Deploy to Vercel

Install the SvelteKit Vercel adapter:

Update your :

Install the Vercel CLI and deploy:

Add your environment variables in the Vercel dashboard under Settings > Environment Variables:

Deploy to production:

What's Next

You now have a fully functional SvelteKit app powered by Cosmic. From here you can:

• Add more Object Types (products, team members, case studies)
• Use Cosmic's AI Agents to generate content automatically
• Connect the Cosmic MCP Server to your AI toolchain
• Use the Cosmic CLI to manage content models from the terminal

Pricing

Cosmic's Free plan is forever free — no credit card required.

Additional users are $29/user/month on any plan.

Related Resources

• Headless CMS for Svelte — Landing Page
• Headless CMS for Vue
• Cosmic Docs

Ready to build? Sign up free — no credit card required. Or book a demo with Tony to get a guided walkthrough.