vpype-ui

A visual pipeline editor for vpype, the Swiss-Army knife for pen plotter vector graphics.

Instead of composing vpype commands in a terminal, vpype-ui lets you build pipelines step by step in a browser.

What it does

• Compose vpype pipelines visually, using the very same commands you already know from vpype
• See the SVG output after each command as you build your pipeline
• Tweak a command's arguments and see only that step update — no full re-run, which makes a big difference on large documents or long pipelines
• Pick up where you left off: pipelines are saved to disk and restored on next launch

How it works

The backend runs vpype as a library and caches the document state after each step. When you edit a command, only that step and the ones after it re-execute; earlier results are reused from cache. This also preserves the full interpreter state, so variables defined with eval carry through correctly even after edits mid-pipeline.

The frontend is a Vue 3 app talking to a FastAPI backend over REST and WebSocket. A TypeScript SDK (libs/api-sdk) is auto-generated from the OpenAPI spec, so the frontend always has up-to-date types.

Architecture

apps/
  api-python/   FastAPI backend — runs vpype as a library, manages pipeline state
  frontend/     Vue 3 + Vite UI
libs/
  api-sdk/      Auto-generated TypeScript client (from OpenAPI) + hand-written wrappers

The backend exposes a REST + WebSocket API. The SDK is generated from the live OpenAPI spec, so the frontend always has up-to-date types.

Prerequisites

• Python 3.10+
• Node.js 20+ and Yarn (corepack enable)
• A working vpype installation inside the Python virtual environment

Setup

Note: vpype-ui is still in development. Expect rough edges and missing polish.

Python backend

cd apps/api-python
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Node dependencies

# From repo root
yarn install

Running in development

# Start both servers in one terminal
yarn dev

This runs the Python API on http://localhost:3001 and the Vite dev server on http://localhost:5173.

To start them separately:

yarn dev:api       # Python API only
yarn dev:frontend  # Frontend only

Regenerating the SDK

If you change the Python API, regenerate the TypeScript client:

# API must be running first
yarn generate:sdk
yarn build:sdk

See libs/api-sdk/DEVELOPMENT.md for details on customising the SDK.