> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/workflow/llms.txt
> Use this file to discover all available pages before exploring further.

# SvelteKit

> Install and configure Workflow DevKit in your SvelteKit application

This guide shows you how to install Workflow DevKit in a SvelteKit project.

<Steps>
  <Step title="Install dependencies">
    Install the `workflow` package:

    <CodeGroup>
      ```bash npm theme={null}
      npm install workflow
      ```

      ```bash yarn theme={null}
      yarn add workflow
      ```

      ```bash pnpm theme={null}
      pnpm add workflow
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure Vite">
    Add the Workflow plugin to your Vite config:

    ```typescript vite.config.ts theme={null}
    import { sveltekit } from '@sveltejs/kit/vite';
    import { defineConfig } from 'vite';
    import { workflowPlugin } from 'workflow/sveltekit';

    export default defineConfig({
      plugins: [
        ...workflowPlugin(),
        sveltekit()
      ]
    });
    ```

    The plugin automatically:

    * Adds the Rollup transform plugin for workflow code transformation
    * Configures hot module replacement for workflow files
    * Builds workflow bundles before SvelteKit starts
    * Generates Vercel functions during production builds (when using Vercel adapter)
  </Step>

  <Step title="Enable TypeScript support (Optional)">
    Add the Workflow TypeScript plugin to your `tsconfig.json` for IntelliSense:

    ```json tsconfig.json theme={null}
    {
      "compilerOptions": {
        "plugins": [
          {
            "name": "workflow"
          }
        ]
      }
    }
    ```
  </Step>
</Steps>

## How it works

The SvelteKit integration:

* Uses `@workflow/rollup` for code transformation
* Uses `@workflow/vite` for hot module replacement
* Builds workflows synchronously on startup (before SvelteKit initialization)
* Automatically discovers workflows in your project
* Generates route handlers at `.well-known/workflow/v1/*`
* Configures Vercel queue triggers when deploying to Vercel

## Example workflow

```typescript src/lib/workflows/subscription.ts theme={null}
import { sleep } from "workflow";

export async function handleSubscription(email: string) {
  "use workflow";

  const subscription = await createSubscription(email);
  await sendConfirmationEmail(subscription);
  await sleep("7 days");
  await sendRenewalReminder(subscription);

  return { email, status: "active" };
}

async function createSubscription(email: string) {
  "use step";
  console.log(`Creating subscription for ${email}`);
  return { id: crypto.randomUUID(), email };
}

async function sendConfirmationEmail(subscription: { id: string; email: string }) {
  "use step";
  console.log(`Sending confirmation to ${subscription.email}`);
}

async function sendRenewalReminder(subscription: { id: string; email: string }) {
  "use step";
  console.log(`Sending renewal reminder to ${subscription.email}`);
}
```

## Triggering workflows

Start workflows from API routes:

```typescript src/routes/api/subscribe/+server.ts theme={null}
import { start } from 'workflow/api';
import { handleSubscription } from '$lib/workflows/subscription';
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async ({ request }) => {
  const { email } = await request.json();
  await start(handleSubscription, [email]);
  return json({ message: "Subscription workflow started" });
};
```

## Development

Run the development server:

```bash theme={null}
npm run dev
```

Trigger a workflow:

```bash theme={null}
curl -X POST --json '{"email":"user@example.com"}' http://localhost:5173/api/subscribe
```

## Production

Build for production:

```bash theme={null}
npm run build
```

### Vercel deployment

When using the Vercel adapter, the plugin automatically:

* Patches Vercel function configurations
* Configures queue triggers for workflow and step execution
* Sets retry policies (max 64 deliveries, 5s retry delay)

Install the Vercel adapter:

```bash theme={null}
npm install -D @sveltejs/adapter-vercel
```

Configure it in `svelte.config.js`:

```javascript svelte.config.js theme={null}
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter()
  }
};
```

## Next steps

<CardGroup cols={2}>
  <Card title="Core Concepts" href="/concepts/workflows-and-steps">
    Learn about workflows and steps
  </Card>

  <Card title="API Reference" href="/api-reference/integrations/sveltekit">
    View the full SvelteKit API reference
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.