# Accessing draft/updated content

If you have [draft/published mode](https://www.datocms.com/docs/general-concepts/draft-published.md) enabled on some of your models, you can use [the `X-Include-Drafts` header](https://www.datocms.com/docs/content-delivery-api/api-endpoints.md#include-drafts) to **access records at their latest version available** instead of the currently published one:

Pages and layouts can utilize the `includeDrafts` option of the `executeQuery` function in their server load functions:

src/routes/+page.server.ts

```javascript
const query = `
  query HomeQuery {
    blogPost { title }
  }
`;

export const load = () => {
  return executeQuery(query, { includeDrafts: true });
};
```

The `X-Include-Drafts` is one of many headers you can use to shape up the behavior of the Content Delivery API. Check out the other [available headers in the Content Delivery API](https://www.datocms.com/docs/content-delivery-api/api-endpoints.md).

### Setting up Draft Mode

If your SvelteKit site is deployed as a **dynamic site** (server-side rendered on each request), you can implement a "Draft Mode" toggle that allows content editors to switch between viewing published content and draft content directly on the website.

Unlike Next.js, SvelteKit doesn't have a built-in draft mode feature. However, you can implement it yourself using cookies to store the draft mode state. The basic approach involves:

-   **API routes to enable/disable draft mode** — These set or delete a cookie that indicates whether draft mode is active.
-   **A helper function to check draft mode status** — Used in your `load` functions to determine whether to include drafts in API requests.
    
-   **Conditional query execution** — Pass the `includeDrafts` option based on the current draft mode state.
    

Here's an example of how your layout server load function might conditionally include drafts:

src/routes/+layout.server.ts

```typescript
import { isDraftModeEnabled } from '$lib/draftMode.server';

export const load = async (event) => {
  const draftModeEnabled = isDraftModeEnabled(event);

  const data = await executeQuery(query, {
    includeDrafts: draftModeEnabled,
  });

  return { data, draftModeEnabled };
};
```

For a complete implementation including secure cookie handling with JWT tokens and API route handlers, check out the [draft mode implementation in the SvelteKit Starter Kit](https://github.com/datocms/sveltekit-starter-kit/tree/main/src/lib/draftMode.server.ts).

## Related content in "SvelteKit"

- [SvelteKit + DatoCMS Overview](https://www.datocms.com/docs/svelte.md)
- [Accessing draft/updated content](https://www.datocms.com/docs/svelte/accessing-draft-updated-content-with-fetch.md)
- [Managing images](https://www.datocms.com/docs/svelte/managing-images.md)
- [Displaying videos](https://www.datocms.com/docs/svelte/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/svelte/structured-text-fields.md)
- [SEO Management](https://www.datocms.com/docs/svelte/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/svelte/real-time-updates.md)
- [Visual Editing](https://www.datocms.com/docs/svelte/visual-editing.md)
- [SvelteKit Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official](https://www.datocms.com/marketplace/starters/sveltekit-starter-kit.md)