1.0.13 • Public • Published


    WARNING: This project is in early development. See issues and planning on the GitHub repo.

    A set of helpers for developing Prismic projects with Svelte.

    To do

    • [ ] Add HTML Serializer to config (and asHTML)
    • [ ] Add Slices to config
    • [x] Create a SliceZone component
    • [x] Make SliceZone component work
    • [x] Handle the API options
    • [ ] Add TypeScript and re-enable config.kit.emitTypes
    • [ ] Configure previews with client v6

    Do we want to add an Image component?


    To add prismic-svelte, first install:

    npm i prismic-svelte@alpha

    At the root of your project, create a file called prismic.config.js. Paste in the following code, and update the values:

    const prismicConfig = {
      // Fill in your repo name
      repoName: 'sam-onboarding-nuxt-blog',
      // Define a route for each Custom Type
      routes: [
          type: 'page',
          path: '/:uid',
          type: 'post',
          path: '/blog/:uid',
      // Add an access token (only if your repo is private)
      accessToken: null,
      // Add any API options
      options: {},
    export default prismicConfig

    In svelte.config.js, import the plugin and add it to Svelte's preprocessor. Update the repo name.

    import { usePrismic } from 'prismic-svelte'
    import { repoName } from './prismic.config.js'
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
      kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
      preprocess: [usePrismic({ repoName })],

    Fill in the config options. Only repoName is required.

    repoName: The name of your repository in Prismic (required).

    routes: A collection of routes for Prismic's Route Resolver.

    accessToken: An access token for the Prismic API; required only when your repo is private.

    options: Options for your Prismic API queries.

    To configure previews, create the file /src/routes/preview.js and paste in the following code:

    import { createPreview } from 'prismic-svelte'
    import prismicConfig from './../../prismic.config.js'
    export async function get({ query, headers }) {
      return await createPreview(query, headers, prismicConfig.repoName)


    The plugin injects a SliceZone component and prismic object into components in the src folder as needed.

    The prismic object includes a client method, which you can use to query the Prismic API. The client is already initialized with the repoName and options that you specified in svelte.config.js. You can also pass the fetch variable (available globally in Svelte, and provided as an argument in SvelteKit's load function) and the session variable. Passing the session variable is necessary for previews to work.

    In a standard Svelte component:

    <!-- Standard .svelte component -->
      $: clientData = null
      const getData = async () => {
        clientData = await prismic.client(fetch).getAll()

    In a SvelteKit project:

    <!-- In a SvelteKit project -->
    <script context="module">
      export async function load({ fetch, session }) {
        const allDocs = await prismic.client(fetch, session).getAll()
        return { props: { allDocs } }
      export let allDocs

    The SliceZone accepts a slices prop and a body prop. Slices is an object of Slice components. body is an array of Slice contents.

    <SliceZone slices={slices} body={} />

    The plugin exports the following properties and methods:

    • asText()
    • asHTML()
    • asLink()
    • documentAsLink()
    • asDate()
    • setClientOptions()
    • initClient()
    • usePrismic()

    See for information on how to use these methods.


    npm i prismic-svelte

    DownloadsWeekly Downloads






    Unpacked Size

    8.75 kB

    Total Files


    Last publish


    • samlfair