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

# Vite

> Install and configure Workflow DevKit in your Vite application

This guide shows you how to install Workflow DevKit in a Vite 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 hot update plugin to your Vite config:

    ```typescript vite.config.ts theme={null}
    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.
  </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 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

```typescript src/workflows/example.ts theme={null}
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

<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/vite">
    View the full Vite API reference
  </Card>
</CardGroup>


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