Easily enable preview mode for your CMS with SvelteKit
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.
To install SvelteKit Preview Mode, run the following command:
npm install sveltekit-preview-mode
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 });
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.