Install Prismic

This article explains how to install and configure Prismic in a SvelteKit project. By the end of this page, you will have Prismic utilities installed in your app.

Quickstart from the dashboard

To start building quickly, go to, select SvelteKit, and choose a starter.

Start from scratch

This guide assumes basic knowledge of Svelte and SvelteKit. If you are new to development with either, see the official introductions for Svelte and SvelteKit.

Create a SvelteKit project

Before proceeding, you will need a SvelteKit project. You can quickly create a brand new project using the following create-svelte command. (Read the official documentation to learn more):

  • npm
  • Yarn
npm create svelte@latest
yarn create svelte@latest

This command will prompt an option to name your project. After that you'll be able to open your newly created SvelteKit app.

Once it's finished, you'll have a brand new SvelteKit project where you can install Slice Machine.

Run the setup command

In the root of your SvelteKit project, run the following command:

npx @slicemachine/init@latest

What happens when you run @slicemachine/init?

The command executes the following actions in your codebase:

  1. Creates a new Prismic repository (or lets you specify an existing one)
  2. Adds a start-slicemachine script to package.json
  3. Creates a slicemachine.config.json file containing the name of your Prismic repository and the location of your slice library
  4. Creates a prismicio.js|ts file in the src/lib/ directory of your project to configure Prismic
  5. Detects your framework (SvelteKit)
  6. Installs dependencies: @prismicio/client@prismicio/svelteslice-machine-ui, and @slicemachine/adapter-sveltekit
  7. Creates a src/routes/slice-simulator/+page.svelte file to simulate slices

That might seem like a lot of dependencies. Don't worry, they each perform an important function:

  • @prismicio/client is responsible for fetching data from the Prismic API
  • @prismicio/svelte provides Svelte components to render data from the Prismic API
  • slice-machine-ui is a local development tool for building slices
  • @slicemachine/adapter-sveltekit is the SvelteKit adapter for Slice Machine

We also mentioned that the init command creates a src/routes/slice-simulator/+page.svelte file. What does that file do? The simulator is a mini-app that simulates what your slices will look like in production. The slice simulator uses an iframe, which runs locally, to simulate your slices. The mock data is provided by Slice Machine and is customizable. (See What Is Slice Machine? for more information.)

Configure Prismic

The init script creates a file called prismicio.js in the src/lib/ directory of your project. This file contains configurations for your project.

The most important configuration is the routes array, which is your route resolver. Update the route resolver to match the routing structure of your SvelteKit app. To learn more about how to add configurations, see the documentation for the route resolver and @prismicio/client.

The prismicio.js file is prefilled with an example routes array:

const routes = [
    type: 'homepage',
    path: '/',
    type: 'page',
    path: '/:uid',

In prismicio.js, customize the routes array to match the routing of your project. For each page type, add an object that describes the route for that page. Learn more about how the route resolver works.

You now have Prismic utilities available throughout your project.

Now you can start creating slices and types to model your project.

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.