{"id":42844083,"url":"https://github.com/transcriptaze/vpd","last_synced_at":"2026-01-30T11:55:09.047Z","repository":{"id":218638294,"uuid":"716587259","full_name":"transcriptaze/vpd","owner":"transcriptaze","description":"VCV panel design web application","archived":false,"fork":false,"pushed_at":"2025-09-26T23:07:00.000Z","size":63202,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-27T01:13:06.941Z","etag":null,"topics":["vcv","vcv-rack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/transcriptaze.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-09T12:58:57.000Z","updated_at":"2025-09-26T23:06:57.000Z","dependencies_parsed_at":"2024-01-23T04:06:46.424Z","dependency_job_id":"f186f59d-c8b5-4a13-a9b5-82006d53e01f","html_url":"https://github.com/transcriptaze/vpd","commit_stats":null,"previous_names":["transcriptaze/vpd"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/transcriptaze/vpd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transcriptaze%2Fvpd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transcriptaze%2Fvpd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transcriptaze%2Fvpd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transcriptaze%2Fvpd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transcriptaze","download_url":"https://codeload.github.com/transcriptaze/vpd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transcriptaze%2Fvpd/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28912143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T08:15:08.179Z","status":"ssl_error","status_checked_at":"2026-01-30T08:14:31.507Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vcv","vcv-rack"],"created_at":"2026-01-30T11:55:08.974Z","updated_at":"2026-01-30T11:55:09.039Z","avatar_url":"https://github.com/transcriptaze.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![build](https://github.com/transcriptaze/vpd/workflows/build/badge.svg)\n![alpha](https://github.com/transcriptaze/vpd/workflows/alpha/badge.svg)\n![cloudflare](https://github.com/transcriptaze/vpd/workflows/cloudflare/badge.svg)\n\n# VPD: VCV Rack 2 Panel Designer\n\nVPD is a [web application](https://vpdx.pages.dev) to create the SVG files for a basic VCV module panel. \n\nThere is a brief [Getting started](#getting-started) section below and a somewhat more comprehensive [user guide](GUIDE.md) which \ndescribes all the available commands (along with a summary [cheatsheet](/doc/cheatsheet.pdf))\n\n**Status**: _ALPHA_\n\n\u003cimg width=\"800\" src=\"doc/images/screenshot.png\"\u003e\n\nIt has mostly (well, almost exclusively) been developed using Google Chrome on MacOS. Other browsers are \na work in progress:\n\n|           | Chrome      | Firefox       | Opera       | Safari       | Edge | DuckDuckGo    |\n|-----------|-------------|---------------|-------------|--------------|------|---------------|\n| _MacOS_   | ✓ _(130.0)_ | ✓ _(131.0.3)_ | ✓ _(114.0)_ | ✓ _(16.6.1)_ | -    | ✓ _(1.110.1)_ |\n| _Linux_   | ?           | ?             | ?           | -            | -    | -             |\n| _Windows_ | ?           | ?             | ?           | -            | ?    | ?             |\n\n\n### Raison d’être\n\nVPD was created mostly as an experiment in implementing a command interface using _tree-sitter_, but also because having to\nswitch back and forth between between text and paths in _Inkscape_ when creating or modifying a VCV panel is just plain annoying.\n\n\n### Getting Started\n\nAssuming that you have already installed the [VCV plugin SDK](https://vcvrack.com/manual/PluginDevelopmentTutorial):\n\n1. Create a sample VCV plugin:\n   ```\n   $RACK_DIR/helper.py createplugin bodacious\n   cd bodacious\n   make\n   ```\n2. Open the VPD [web application](https://vpdx.pages.dev) in a browser.\n\n3. Create a sample panel by either:\n   - Downloading the [_quickstart.vpd_](/doc/examples/quickstart.vpd) project file and opening it by clicking on the _Load_ \n     (\u003cimg width=\"20\" src=\"doc/images/load.png\"\u003e) button (or alternatively by executing the _load project_ command)\n\n     -- OR --\n\n   - Downloading the [_quickstart.vpx_](/doc/examples/quickstart.vpx) script file and opening it by **Alt-clicking** on the _Load_ \n     (\u003cimg width=\"20\" src=\"doc/images/load.png\"\u003e) button (or alternatively by executing the _load script_ command)\n\n     -- OR --\n\n   - Following the [_Getting started_](GUIDE.md#getting-started) instructions in the _User Guide_\n\n4. Export the SVG files to the plugin `res` folder using either the _Export SVG_ buttons \n   (\u003cimg width=\"20\" src=\"doc/images/export-svg-light.png\"\u003e \u003cimg width=\"20\" src=\"doc/images/export-svg-dark.png\"\u003e) or \n   the commands:\n   ```\n   export panel svg\n   export panel svg dark\n   ```\n5. Generate a module using the [VCV helper script](https://vcvrack.com/manual/Panel) and add the module to the _plugin_:\n   ```\n   $RACK_DIR/helper.py createmodule bodacious res/bodacious.svg src/bodacious.cpp\n   ```\n   _plugin.hpp_\n   ```\n   #pragma once\n   #include \u003crack.hpp\u003e\n\n   using namespace rack;\n\n   extern Plugin* pluginInstance;\n   extern Model* modelBodacious;\n   ```\n   _plugin.cpp_\n   ```\n   #include \"plugin.hpp\"\n\n   Plugin* pluginInstance;\n\n   void init(Plugin* p) {\n       pluginInstance = p;\n\n       p-\u003eaddModel(modelBodacious);\n   }\n   ```\n\n6. Compile and link and (optionally) install:\n   ```\n   make\n   make install\n   ```\n\n### Releases\n\n## _web app_\n\nThe [VPD](https://vpdx.pages.dev) web app is currently hosted on _Cloudflare Pages_.\n\n\n## Running locally\n\n### VPD application\n\n1. Download the _vpd_ executable archive from a [release](https://github.com/transcriptaze/vpd/releases) or the latest\n   [_alpha_](https://github.com/transcriptaze/vpd/actions/workflows/alpha.yml) build and extract it to a folder of \n   your choice.\n2. Open the `vpd` application in a terminal window (on a _Mac_ you may have to _Ctrl-Open_ the file the first time to grant\n   it permissions to run).\n3. Open [http://localhost:9876](http://localhost:9876) in your browser.\n4. Voilá, you're good to go!\n\n#### Command line\n```\nvpd [--debug] [--port \u003cport\u003e] [--html \u003cfolder\u003e]\n\nOptions:\n--debug          Enables verbose internal debug logging\n--port \u003cport\u003e    Serves the web application on the specifed port (the default port is 9876)\n--html \u003cfolder\u003e  External folder for the HTML files - by default it serves the web application\n                 embedded in the executable. A tar.gz file with the base version of the HTML\n                 can be downloaded from the Github releases or the latest 'alpha' build.\n```\n\n### Python\n\n1. Download the _HTML_ artifact from either a [release](https://github.com/transcriptaze/vpd/releases) or the latest \n   [_alpha_](https://github.com/transcriptaze/vpd/actions/workflows/alpha.yml) build and unzip it to a folder.\n2. Start an HTTP server to serve the unzipped files:\n   ```\n   cd vpd\n   python3 -m http.server 9876 -d html\n   ```\n\n### NodeJS\n\n1. Download the _HTML_ artifact from either a [release](https://github.com/transcriptaze/vpd/releases) or the latest\n   [_alpha_](https://github.com/transcriptaze/vpd/actions/workflows/alpha.yml) build and unzip it to a folder.\n2. Start an HTTP server to serve the unzipped files:\n   ```\n   cd vpd\n   npx http-server html --port 9876\n   ```\n   \n## Building from source\n\nYou need a **bunch** of tools:\n- _make_ (optional but recommended)\n- [_tree-sitter_](https://tree-sitter.github.io/tree-sitter)\n- [_Rust_ 1.81+](https://www.rust-lang.org/tools/install)\n- [_wasm-pack_](https://github.com/rustwasm/wasm-pack)\n- [_wasm-bindgen_](https://github.com/rustwasm/wasm-bindgen)\n- [_npm 1.16.32+_](https://www.npmjs.com/get-npm)\n- [_sass_](https://sass-lang.com)\n- [_eslint_](https://eslint.org)\n- [_eslint-config-standard_](https://www.npmjs.com/package/eslint-config-standard)\n- [_Docker_](https://www.docker.com)\n- [_Go 1.23+_](https://go.dev)\n- [_Python 3.9+_](https://www.python.org/downloads/)\n\n**NOTES**: \n\n1. `apt install sass` on _Ubuntu_ installs `ruby-sass` which was marked **[obsolete](https://sass-lang.com/ruby-sass)**\n   in 2019. Please follow the installation instructions on the [Sass homepage](https://sass-lang.com) to install\n   the current version.\n\n2. The _web app_ is not bundled because I cannot for the life of me figure out how to resolve all the wasm dependencies.\n\n3. The DuckDuckGo browser for Mac does not support:\n   - `Object.hasOwn`\n   - `OPFS`\n\n### Build instructions\n\n1. Clone the repository\n   ```\n   git clone https://github.com/transcriptaze/vpd\n   cd vpd\n   ```\n2. Start docker\n3. Build everything:\n   ```\n   make build-all\n   ```\n\n\n## Attribution\n\n1. `undo` icon by Michael Kussmaul from \u003ca href=\"https://thenounproject.com/browse/icons/term/undo/\" target=\"_blank\" title=\"Undo Icons\"\u003eNoun Project\u003c/a\u003e (CC BY 3.0)\n2. `redo` icon by Michael Kussmaul from \u003ca href=\"https://thenounproject.com/browse/icons/term/redo/\" target=\"_blank\" title=\"redo Icons\"\u003eNoun Project\u003c/a\u003e (CC BY 3.0)\n3. The remaining icons are from the [SVG Silh](https://svgsilh.com) project.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftranscriptaze%2Fvpd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftranscriptaze%2Fvpd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftranscriptaze%2Fvpd/lists"}