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

Install dependencies

Install the workflow package:
npm install workflow
2

Configure Vite

Add the Workflow hot update plugin to your Vite config:
vite.config.ts
import { defineConfig } from 'vite';
import { workflowHotUpdatePlugin } from 'workflow/vite';

export default defineConfig({
  plugins: [
    workflowHotUpdatePlugin()
  ]
});
The hot update plugin watches for changes to files containing "use workflow" or "use step" directives and triggers rebuilds automatically.
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 Vite integration provides:
  • Hot module replacement (HMR) support for workflow files
  • Automatic rebuild detection when workflow or step files change
  • Detection of workflow patterns including:
    • "use workflow" and "use step" directives
    • @workflow/serde imports
    • Custom serialization patterns with Symbol.for('workflow-serialize')

​
Usage with frameworks

The Vite plugin is used internally by other framework integrations:
  • Astro: Uses workflowHotUpdatePlugin for HMR
  • SvelteKit: Uses workflowHotUpdatePlugin for HMR
  • Nitro: Can optionally use the Vite plugin for development
For framework-specific setup, see the dedicated installation guides.

​
Example workflow

src/workflows/example.ts
import { sleep } from "workflow";

export async function processOrder(orderId: string) {
  "use workflow";

  await validateOrder(orderId);
  await sleep("5s");
  await fulfillOrder(orderId);

  return { orderId, status: "completed" };
}

async function validateOrder(orderId: string) {
  "use step";
  console.log(`Validating order ${orderId}`);
}

async function fulfillOrder(orderId: string) {
  "use step";
  console.log(`Fulfilling order ${orderId}`);
}

​
Next steps

Core Concepts

Learn about workflows and steps

API Reference

View the full Vite API reference

Build docs developers (and LLMs) love

Get started for freeTalk to us