Ableton Extension Starter

This repository is a starter project for building Ableton extensions with a Node/TypeScript backend and a Vue 3 UI frontend.

What is included?

• src/ — extension entrypoint and helper framework.
• ui/ — Vue 3 UI app for modal dialogs and custom UI.
• build.ts — Node-based build wrapper for packaging the extension.
• vendor/ — local SDK packages required by Ableton.

Prerequisites

• Node.js >=24.14.1
• npm
• Ableton Extensions SDK archive downloaded from the Extensions SDK site
• Ableton Extensions CLI archive

Setup

1. Place the SDK archives inside vendor/:

vendor/
├── ableton-extensions-sdk-1.0.0-beta.0.tgz
└── ableton-extensions-cli-1.0.0-beta.0.tgz

2. Install dependencies:

npm install

3. Verify that the vendor files exist and are referenced in package.json.

Development

Run the UI in development mode

npm run dev:ui

This starts Vite for the Vue frontend.

Type-check and build the project

npm run build:dev

This performs a type-check with tsc, builds the Vue UI, and runs build.ts.

Build for production

npm run build

This builds the full extension production bundle.

Run the extension

npm run start

This runs the extension through the Ableton Extensions CLI after building it in development mode.

Package for distribution

npm run package

This builds the extension and packages it for distribution.

Project structure

• src/ — core extension code and framework helpers.
• src/lib/ — reusable framework and utility modules.
• ui/ — Vue frontend app.
• ui/dialog1/ — dialog1 UI entrypoint, App.vue, and generated index.html.
• ui/dialog2/ — dialog2 UI entrypoint, App.vue, and generated index.html.
• build.ts — script that bundles the extension and inlines UI assets.

Notes

• The UI is a standard Vue 3 project.
• The extension uses local Ableton SDK tarballs in vendor/.
• window.__INITIAL_DATA__, window.closeWithResult, and window.sendMessage are host-provided window methods for the UI shell.

Docs

There are additional documentation files under docs/:

• docs/utils.md — utility helper docs.
• docs/framework.md — extension framework docs.
• docs/ui.md — Vue UI docs.