https://github.com/transcriptaze/vpd
VCV panel design web application
https://github.com/transcriptaze/vpd
vcv vcv-rack
Last synced: 5 months ago
JSON representation
VCV panel design web application
- Host: GitHub
- URL: https://github.com/transcriptaze/vpd
- Owner: transcriptaze
- License: mit
- Created: 2023-11-09T12:58:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-26T23:07:00.000Z (9 months ago)
- Last Synced: 2025-09-27T01:13:06.941Z (9 months ago)
- Topics: vcv, vcv-rack
- Language: JavaScript
- Homepage:
- Size: 60.3 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# VPD: VCV Rack 2 Panel Designer
VPD is a [web application](https://vpdx.pages.dev) to create the SVG files for a basic VCV module panel.
There is a brief [Getting started](#getting-started) section below and a somewhat more comprehensive [user guide](GUIDE.md) which
describes all the available commands (along with a summary [cheatsheet](/doc/cheatsheet.pdf))
**Status**: _ALPHA_
It has mostly (well, almost exclusively) been developed using Google Chrome on MacOS. Other browsers are
a work in progress:
| | Chrome | Firefox | Opera | Safari | Edge | DuckDuckGo |
|-----------|-------------|---------------|-------------|--------------|------|---------------|
| _MacOS_ | ✓ _(130.0)_ | ✓ _(131.0.3)_ | ✓ _(114.0)_ | ✓ _(16.6.1)_ | - | ✓ _(1.110.1)_ |
| _Linux_ | ? | ? | ? | - | - | - |
| _Windows_ | ? | ? | ? | - | ? | ? |
### Raison d’être
VPD was created mostly as an experiment in implementing a command interface using _tree-sitter_, but also because having to
switch back and forth between between text and paths in _Inkscape_ when creating or modifying a VCV panel is just plain annoying.
### Getting Started
Assuming that you have already installed the [VCV plugin SDK](https://vcvrack.com/manual/PluginDevelopmentTutorial):
1. Create a sample VCV plugin:
```
$RACK_DIR/helper.py createplugin bodacious
cd bodacious
make
```
2. Open the VPD [web application](https://vpdx.pages.dev) in a browser.
3. Create a sample panel by either:
- Downloading the [_quickstart.vpd_](/doc/examples/quickstart.vpd) project file and opening it by clicking on the _Load_
(
) button (or alternatively by executing the _load project_ command)
-- OR --
- Downloading the [_quickstart.vpx_](/doc/examples/quickstart.vpx) script file and opening it by **Alt-clicking** on the _Load_
() button (or alternatively by executing the _load script_ command)
-- OR --
- Following the [_Getting started_](GUIDE.md#getting-started) instructions in the _User Guide_
4. Export the SVG files to the plugin `res` folder using either the _Export SVG_ buttons
(
) or
the commands:
```
export panel svg
export panel svg dark
```
5. Generate a module using the [VCV helper script](https://vcvrack.com/manual/Panel) and add the module to the _plugin_:
```
$RACK_DIR/helper.py createmodule bodacious res/bodacious.svg src/bodacious.cpp
```
_plugin.hpp_
```
#pragma once
#include
using namespace rack;
extern Plugin* pluginInstance;
extern Model* modelBodacious;
```
_plugin.cpp_
```
#include "plugin.hpp"
Plugin* pluginInstance;
void init(Plugin* p) {
pluginInstance = p;
p->addModel(modelBodacious);
}
```
6. Compile and link and (optionally) install:
```
make
make install
```
### Releases
## _web app_
The [VPD](https://vpdx.pages.dev) web app is currently hosted on _Cloudflare Pages_.
## Running locally
### VPD application
1. Download the _vpd_ executable archive from a [release](https://github.com/transcriptaze/vpd/releases) or the latest
[_alpha_](https://github.com/transcriptaze/vpd/actions/workflows/alpha.yml) build and extract it to a folder of
your choice.
2. Open the `vpd` application in a terminal window (on a _Mac_ you may have to _Ctrl-Open_ the file the first time to grant
it permissions to run).
3. Open [http://localhost:9876](http://localhost:9876) in your browser.
4. Voilá, you're good to go!
#### Command line
```
vpd [--debug] [--port ] [--html ]
Options:
--debug Enables verbose internal debug logging
--port Serves the web application on the specifed port (the default port is 9876)
--html External folder for the HTML files - by default it serves the web application
embedded in the executable. A tar.gz file with the base version of the HTML
can be downloaded from the Github releases or the latest 'alpha' build.
```
### Python
1. Download the _HTML_ artifact from either a [release](https://github.com/transcriptaze/vpd/releases) or the latest
[_alpha_](https://github.com/transcriptaze/vpd/actions/workflows/alpha.yml) build and unzip it to a folder.
2. Start an HTTP server to serve the unzipped files:
```
cd vpd
python3 -m http.server 9876 -d html
```
### NodeJS
1. Download the _HTML_ artifact from either a [release](https://github.com/transcriptaze/vpd/releases) or the latest
[_alpha_](https://github.com/transcriptaze/vpd/actions/workflows/alpha.yml) build and unzip it to a folder.
2. Start an HTTP server to serve the unzipped files:
```
cd vpd
npx http-server html --port 9876
```
## Building from source
You need a **bunch** of tools:
- _make_ (optional but recommended)
- [_tree-sitter_](https://tree-sitter.github.io/tree-sitter)
- [_Rust_ 1.81+](https://www.rust-lang.org/tools/install)
- [_wasm-pack_](https://github.com/rustwasm/wasm-pack)
- [_wasm-bindgen_](https://github.com/rustwasm/wasm-bindgen)
- [_npm 1.16.32+_](https://www.npmjs.com/get-npm)
- [_sass_](https://sass-lang.com)
- [_eslint_](https://eslint.org)
- [_eslint-config-standard_](https://www.npmjs.com/package/eslint-config-standard)
- [_Docker_](https://www.docker.com)
- [_Go 1.23+_](https://go.dev)
- [_Python 3.9+_](https://www.python.org/downloads/)
**NOTES**:
1. `apt install sass` on _Ubuntu_ installs `ruby-sass` which was marked **[obsolete](https://sass-lang.com/ruby-sass)**
in 2019. Please follow the installation instructions on the [Sass homepage](https://sass-lang.com) to install
the current version.
2. The _web app_ is not bundled because I cannot for the life of me figure out how to resolve all the wasm dependencies.
3. The DuckDuckGo browser for Mac does not support:
- `Object.hasOwn`
- `OPFS`
### Build instructions
1. Clone the repository
```
git clone https://github.com/transcriptaze/vpd
cd vpd
```
2. Start docker
3. Build everything:
```
make build-all
```
## Attribution
1. `undo` icon by Michael Kussmaul from Noun Project (CC BY 3.0)
2. `redo` icon by Michael Kussmaul from Noun Project (CC BY 3.0)
3. The remaining icons are from the [SVG Silh](https://svgsilh.com) project.