> ## 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.

# @workflow/sveltekit

> SvelteKit integration for Workflow DevKit

## Installation

```bash theme={null}
npm install @workflow/sveltekit
```

## Usage

Import the package in your `svelte.config.js` to enable workflow functionality:

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

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

Then add the Vite plugin:

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

export default {
  kit: {
    adapter: adapter(),
  },
  vite: {
    plugins: [workflowPlugin()],
  },
};
```

## API

### `workflowPlugin()`

Returns an array of Vite plugins for workflow support in SvelteKit.

Takes no arguments.

```typescript theme={null}
import { workflowPlugin } from '@workflow/sveltekit';
```

## Configuration Example

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

export default {
  kit: {
    adapter: adapter(),
  },
  vite: {
    plugins: [workflowPlugin()],
  },
};
```

## How It Works

### Top-Level Build

The package executes a top-level build when imported:

```javascript theme={null}
import '@workflow/sveltekit';
```

This creates workflow entries before the Svelte plugin starts to avoid race conditions in entry discovery.

### Vite Plugins

`workflowPlugin()` returns an array of three plugins:

1. **`workflowTransformPlugin`** (from `@workflow/rollup`): Transforms workflow directives
2. **`workflow:sveltekit`**: Named marker plugin
3. **`workflowHotUpdatePlugin`** (from `@workflow/vite`): Enables HMR for workflow files

### Vercel Adapter Support

When using `@sveltejs/adapter-vercel`, the integration:

1. Detects Vercel deployment via `VERCEL_DEPLOYMENT_ID`
2. Patches `.vc-config.json` files for workflow functions
3. Configures experimental triggers for queue-based execution

#### Queue Configuration

For `/.well-known/workflow/v1/flow.func`:

```json theme={null}
{
  "experimentalTriggers": [
    {
      "type": "queue/v2beta",
      "topic": "__wkf_workflow_*",
      "consumer": "default",
      "maxDeliveries": 64,
      "retryAfterSeconds": 5,
      "initialDelaySeconds": 0
    }
  ]
}
```

For `/.well-known/workflow/v1/step.func`:

```json theme={null}
{
  "experimentalTriggers": [
    {
      "type": "queue/v2beta",
      "topic": "__wkf_step_*",
      "consumer": "default",
      "maxDeliveries": 64,
      "retryAfterSeconds": 5,
      "initialDelaySeconds": 0
    }
  ]
}
```

### Build Process

1. **Import-Time**: Runs `SvelteKitBuilder.build()` to create workflow entries
2. **Development**: Watches for changes and rebuilds via HMR
3. **Vercel Build**: On `beforeExit`, patches Vercel function configs with queue triggers

## Builder

Uses `SvelteKitBuilder` internally, which:

* Discovers workflows in your SvelteKit project
* Generates route handlers
* Creates workflow bundles
* Integrates with SvelteKit's routing system

## Build Queue

Uses `createBuildQueue()` from `@workflow/builders` to prevent concurrent builds during development.

## Generated Routes

The integration creates SvelteKit routes at:

* `/.well-known/workflow/v1/flow` - Workflow execution
* `/.well-known/workflow/v1/step` - Step execution
* `/.well-known/workflow/v1/webhook/:token` - Webhook handler

## Vercel Function Patching

The `beforeExit` hook:

1. Checks for `VERCEL_DEPLOYMENT_ID`
2. Un-symlinks workflow function directories
3. Copies function files from shared location
4. Patches `.vc-config.json` with queue triggers

This ensures workflow functions have proper queue-based execution configuration on Vercel.


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