editor

CNCF Serverless Workflow Specification Visual Editor

Prerequisites

To build and run the editor locally, you will need:

• Node.js 22 (current LTS version; see https://nodejs.org/)
• pnpm 10.31.0

Building the Project

The project is structured as a monorepo to support multiple distribution targets (Web, VS Code, etc.) as defined in our architectural decisions.

# Clone the repository
git clone https://github.com/serverlessworkflow/editor.git
cd editor

# Install dependencies
pnpm install

# Build all packages in the monorepo (development)
pnpm run build:dev

# Or build all packages in the monorepo (production)
pnpm run build:prod

Repository Structure

editor/
├── .github/                    # CI workflows, issue templates, Dependabot
├── .husky/                     # Git hooks (commit-msg, pre-commit)
├── packages/                   # Monorepo workspace packages
├── .oxfmtrc.json               # Formatter config (oxfmt)
├── .oxlintrc.json              # Linter config (oxlint)
├── .syncpackrc.json            # Monorepo package version consistency
├── netlify.toml                # Netlify configuration for Storybook preview deployment
├── pnpm-workspace.yaml         # pnpm workspace definition
└── tsconfig.base.json          # Shared TypeScript config

Key Packages

packages/serverless-workflow-diagram-editor/

The visual diagram editor for the Serverless Workflow Specification. Built with React Flow for interactive diagram rendering and includes Storybook for component development.