Get Started with Svelte

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

This guide will teach you how to make a web app with Svelte and Prismic.

If you want to jump right in, proceed to the Install step:

Install Prismic

By the end of this page, you will have a Svelte project set up with basic utilities from Prismic.

Curious about pricing? Prismic has an unlimited free tier for projects with one user. To learn more, see our pricing page:

Prismic Pricing

Find the right plan for any size of project.

What technical skills do I need?

If you're a developer building a project with Prismic and Svelte: We recommend that you already have a basic knowledge of JavaScript, CSS, Svelte, and API querying.

If a developer is setting up Prismic for you: You won't need any technical knowledge. Prismic is designed to be used by anyone.

Why should I use Prismic with Svelte?

Every great website starts with great content.

Svelte has great tools for managing every part of your website (Scoped styles! Transitions! Reactivity! Layouts!). But, it doesn't have a way to manage content.

The most important part of your website (the reason you have a website) deserves a tool.

Prismic is the tool for your content. What's more, Prismic is designed to integrate smoothly with Svelte, with a logical content architecture that maps directly to Svelte's routes and components.

Plus, Prismic adds some super-powers to your website, like image optimization, content versioning, scheduling, and user permissions.

Is this guide for Svelte or SvelteKit?

This guide includes instructions for both Svelte and SvelteKit. It does not provide instructions for other Svelte-based web app development frameworks like Elder.js or Sapper, but the basic Svelte instructions will serve those frameworks.

The guide treats SvelteKit as a natural add-on to Svelte. For example, if you're building an SPA with Svelte, you can use client-side fetching as described in "Fetch Data." But, if you add server-side rendering with SvelteKit, we also describe how to do server-side fetching.

Does Prismic have a Svelte plugin?

Prismic's Svelte plugin is under active development. If you'd like to contribute or test it when it's ready, you can see it on GitHub.

Have a question or comment?

This documentation is still in beta. If you have ideas for how to improve it, we'd love to hear from you on the Prismic Community Forum.

Five steps to get started

This guide will walk you through six steps to deploying your website and creating content.

Before you get started...

This guide assumes that you have already created a Svelte or SvelteKit project. If you don't have one, check out the Svelte or SvelteKit docs for instructions to get started.

Here's what we'll go over:

1. Install Prismic

In this step, you'll add the Prismic plugins to your Svelte project. By the end of the page, you'll have a collection of Prismic utilities integrated in your project.

2. Fetch Data

Next, you'll learn how to use your new Prismic utilities to retrieve data from your Prismic repo. By the end of this step, you will know how to query the Prismic API.

3. Template Content

Once you have Prismic data in your project, you can display it on the page. By the end of this step, you will know how to template every type of content from the Prismic API.

4. Deploy an App

In this step, you'll learn how to deploy your site with Netlify or Vercel. By the end of this step, you will have a live website online.

5. Preview Drafts

With your site online, you'll need a way to preview draft changes and unpublished documents. By the end of this step, you will have one-click previewing set up.

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.