Skip to main content
This guide shows you how to install Workflow DevKit in a SvelteKit project.
1

Install dependencies

Install the workflow package:
npm install workflow
2

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)
3

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":"[email protected]"}' 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()
  }
};

​
Next steps

Core Concepts

Learn about workflows and steps

API Reference

View the full SvelteKit API reference

Build docs developers (and LLMs) love

Get started for freeTalk to us