Tapestry is a visual workflow builder for creating Arazzo API workflows. Build complex API orchestrations with an intuitive drag-and-drop interface.
- Visual Workflow Editor: Drag-and-drop interface using React Flow
- Auto-Layout: Automatic node positioning using Dagre
- OpenAPI Integration: Import OpenAPI 3.x specifications from URLs (JSON & YAML)
- Colorful Method Badges: Visual distinction for HTTP methods (GET, POST, PUT, DELETE, etc.)
- Connection System: Connect API operations to create workflow sequences
- Save/Load Workflows: Export and import Arazzo 1.0.1 format
- Responsive Design: Works on desktop and tablet devices
- Operation Details: View inputs, outputs, parameters, and responses for each operation
- Node.js 18+
- npm or yarn
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173
- Click the + button in the left Operations Panel
- Enter an OpenAPI specification URL (e.g.,
https://petstore3.swagger.io/api/v3/openapi.json) - Optionally provide a custom name
- Click Add
- Expand/collapse API definitions in the left panel
- View all available operations grouped by API
- Each operation shows HTTP method, operation ID, and endpoint path
- Add Nodes: Click on any operation to add it to the canvas
- Connect Nodes: Drag from output handle (right) to input handle (left)
- Move Nodes: Drag nodes to reposition them manually
- Delete Nodes: Hover over a node and click the red trash icon
- New: Create a fresh workflow
- Save: Export workflow as Arazzo JSON file
- Open: Import a previously saved workflow
- Run: Execute the workflow (coming soon)
- React 19: UI framework
- React Flow: Visual workflow engine
- @dagrejs/dagre: Graph layout algorithm
- Zustand: State management
- Axios: HTTP client for fetching OpenAPI specs
- Font Awesome: Icon library
- Vite: Build tool and dev server
- Vitest: Unit testing framework
The workflow uses @dagrejs/dagre for automatic node positioning in a left-to-right layout direction.
Workflows are exported in Arazzo 1.0.1 format with source descriptions and workflow steps.
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lintMIT