Overview

SvelteKit Preview Mode is a library for SvelteKit that allows users to enable preview mode for content management systems (CMSs). It provides an easy way to preview draft or unpublished content without complications. This library serves as the SvelteKit equivalent of Next.js Preview Mode.

Features

Easy enabling of preview mode for content management systems (CMSs)
Preview draft or unpublished content without hassle
Equivalent of Next.js Preview Mode

Usage

To use SvelteKit Preview Mode, simply import it into your SvelteKit application:

import { enablePreviewMode } from 'sveltekit-preview-mode';

Don't forget to set the PREVIEW_SECRET environment variable. This can be any string you'd like. If you need to add additional handlers, you can do so using the sequence helper function.

In order to share the preview status in the client, you'll need to add the following code to +layout.server.ts:

import { getSession, handle } from 'svelte-kit-preview-mode/server';

export const load = handle(async ({ request, render }) => {
  const session = await getSession(request);
  return render({ session });
});

Then, in +layout.ts, update the store to hold the preview status:

import { sessionStore } from 'svelte-kit-preview-mode/store';

sessionStore.set({ isPreview: session.previewMode });

Summary

SvelteKit Preview Mode is a library for SvelteKit that enables preview mode for content management systems (CMSs). It allows users to easily preview draft or unpublished content without any hassle. The library serves as the SvelteKit equivalent of Next.js Preview Mode. To use SvelteKit Preview Mode, you need to install it using npm and import it into your SvelteKit application. You also need to set the PREVIEW_SECRET environment variable and make some adjustments to the layout files. With SvelteKit Preview Mode, displaying a banner when preview mode is enabled, enabling and disabling preview mode, and customizing options are all made simple.

Darbymanning

Sveltekit Preview Mode