SvelteKit

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

Install dependencies

Install the workflow package:

npm install workflow

yarn add workflow

pnpm add workflow

Configure Vite

Add the Workflow plugin to your Vite config:

vite.config.ts

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)

Enable TypeScript support (Optional)

Add the Workflow TypeScript plugin to your tsconfig.json for IntelliSense:

tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "workflow"
      }
    ]
  }
}

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

src/lib/workflows/subscription.ts

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:

src/routes/api/subscribe/+server.ts

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:

npm run dev

Trigger a workflow:

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

Production

Build for production:

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:

npm install -D @sveltejs/adapter-vercel

Configure it in svelte.config.js:

svelte.config.js

import adapter from '@sveltejs/adapter-vercel';

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

Getting Started

Installation

Core Concepts

Building AI Agents

How It Works

Deployment

Observability

Testing

Error Reference

How it works

Example workflow

Triggering workflows

Development

Production

Vercel deployment

Next steps

Core Concepts

API Reference

​How it works

​Example workflow

​Triggering workflows

​Development

​Production

​Vercel deployment

​Next steps

Core Concepts

API Reference

How it works

Example workflow

Triggering workflows

Development

Production

Vercel deployment

Next steps