# Visual Studio Code

- Tool: Bubble
- Difficulty: Intermediate
- Time required: 45–90 minutes
- Last updated: July 2026

## TL;DR

VS Code does not have a direct API integration with Bubble — Bubble's editor is entirely browser-based and proprietary. The practical VS Code + Bubble workflow covers three patterns: writing and linting JavaScript for Bubble's 'Run JavaScript' action before pasting into Bubble, developing custom Bubble plugins locally using the Bubble Plugin CLI, and building companion microservices that Bubble calls via API Connector. The Plugin CLI pattern is the highest-value differentiator.

## Three ways VS Code improves your Bubble development

Most Bubble developers work entirely in Bubble's browser-based editor — and for most things, that is fine. But there are three scenarios where VS Code dramatically improves the experience, and understanding which scenario matches your situation determines how you use it.

Scenario 1: Writing JavaScript for Bubble Workflows. Bubble's editor has a JavaScript code input field used in the 'Run JavaScript' action (Toolbox plugin) and in Bubble's 'Evaluate JavaScript' expression. This field has no syntax highlighting, no autocompletion, and no error checking. If you are writing more than ten lines of JavaScript, you want to write it in VS Code first — where you get IntelliSense, ESLint, and instant feedback on syntax errors — then paste the working code into Bubble's field.

Scenario 2: Building custom Bubble plugins. This is the highest-value differentiated pattern. Bubble has a plugin system that lets developers create reusable elements, actions, and data connections. The official Bubble Plugin CLI (`bubble-plugin-cli`) lets you write plugin JavaScript and CSS locally in VS Code, with full autocompletion and Git version control, and deploy the plugin directly to Bubble's Plugin Editor with a single command. If you are building reusable Bubble components for your own apps or to share in the marketplace, VS Code is the right tool.

Scenario 3: Building microservices that Bubble calls. If you are building a companion API (Node.js, Python, Go) that your Bubble app calls via API Connector, you write and test that API in VS Code, containerize it with Docker if needed, deploy it to a cloud platform, and connect Bubble to the live URL. VS Code is your development environment; Bubble is the consumer.

Note: VS Code's Git integration (Source Control panel) works for the plugin code or microservice code you write locally — it does NOT sync with Bubble's own version history (Settings → Versions). These are entirely separate systems.

## Before you start

- A Bubble account on any plan (plugin development works on all plans)
- VS Code downloaded and installed from code.visualstudio.com (free and open-source)
- Node.js installed on your computer (download from nodejs.org) — required for the Bubble Plugin CLI
- The Bubble Plugin CLI installed: 'npm install -g bubble-plugin-cli' in your computer's terminal
- A Bubble account with plugin development enabled — you will need to authenticate the CLI with your Bubble email and password

## Step-by-step guide

### 1. Install Node.js, VS Code, and the Bubble Plugin CLI

VS Code is a local development tool — unlike Bubble's browser-based editor, VS Code installs on your computer. You also need Node.js, which the Bubble Plugin CLI runs on.

Step A: Install VS Code. Go to code.visualstudio.com in your browser. Click the Download button for your operating system (macOS, Windows, or Linux). Run the installer. VS Code is free and open-source.

Step B: Install Node.js. Go to nodejs.org. Download the LTS version (recommended for most users — currently Node.js 20.x or 22.x). Run the installer. Node.js includes npm (Node Package Manager), which you will use to install the Bubble Plugin CLI.

To verify Node.js installed correctly, open VS Code → Terminal menu → New Terminal. Type `node --version` and press Enter. You should see a version number like 'v20.11.0' or similar. If you see 'command not found', Node.js did not install correctly — try reinstalling from nodejs.org.

Step C: Install the Bubble Plugin CLI. In the VS Code terminal, run:

```
npm install -g bubble-plugin-cli
```

The `-g` flag installs the CLI globally, making the `bubble-plugin` command available anywhere on your computer. After installation, run `bubble-plugin --version` to confirm it installed.

Note: The `bubble-plugin-cli` package is maintained by the Bubble community — check the npm page (npmjs.com/package/bubble-plugin-cli) for the current version and any compatibility notes with Bubble's platform. If the package shows it has not been updated recently, verify it still works with current Bubble before building a production plugin on top of it.

```
# Install Node.js LTS from nodejs.org, then run these in your terminal:

# Verify Node.js is installed
node --version  # Should show v20.x.x or similar
npm --version   # Should show 10.x.x or similar

# Install Bubble Plugin CLI globally
npm install -g bubble-plugin-cli

# Verify installation
bubble-plugin --version
```

**Expected result:** VS Code is installed and open. Running 'bubble-plugin --version' in VS Code's terminal shows a version number without errors.

### 2. Create a Bubble plugin project and authenticate the CLI

With the Bubble Plugin CLI installed, create a new plugin project. Open VS Code and use the integrated terminal (Terminal → New Terminal) to run the init command.

First, create a folder for your plugin project and navigate to it:

```
mkdir my-bubble-plugin
cd my-bubble-plugin
```

Then initialize the plugin:

```
bubble-plugin init
```

The CLI will prompt you for:
- Your Bubble account email address
- Your Bubble account password
- The plugin name (used in the Bubble Plugin Editor)
- Whether you want to create a new plugin or connect to an existing plugin

Choose 'Create a new plugin' on first run. The CLI authenticates with Bubble's servers using your credentials and creates the plugin in your Bubble account's Plugin Editor automatically.

After authentication, the CLI scaffolds the plugin project in your current directory with a structure like:

```
my-bubble-plugin/
  plugin.json          # Plugin metadata
  elements/            # Custom element definitions
  actions/             # Custom action definitions
  shared/
    code.js            # Shared JavaScript
    css.css            # Shared CSS
```

Open the folder in VS Code (File → Open Folder → select my-bubble-plugin). You will see the project structure in VS Code's Explorer panel. All the JavaScript and CSS files here are what you will edit in VS Code and deploy to Bubble's Plugin Editor.

```
# In your computer's terminal or VS Code terminal:
mkdir my-bubble-plugin
cd my-bubble-plugin
bubble-plugin init

# Follow prompts:
# Enter your Bubble email: you@example.com
# Enter your Bubble password: **********
# Plugin name: My Custom Plugin
# Create new or connect existing? Create new

# Open in VS Code:
code .
```

**Expected result:** The 'bubble-plugin init' command completes without errors. The plugin project folder opens in VS Code showing the scaffolded file structure. Your Bubble account now has a new plugin visible in the Plugin Editor (go to the Plugin Editor in Bubble to confirm).

### 3. Write plugin JavaScript and CSS in VS Code

With the project scaffolded, write your plugin logic in VS Code. The plugin files you edit depend on what type of plugin element you are building.

For a custom element: open the 'elements/' directory. The scaffolded element file defines how your element initializes, updates, and resets. Here is a simple example element that renders a custom styled badge based on a 'label' and 'color' property:

```javascript
function(instance, properties, context) {
  // properties.label - the text passed from Bubble
  // properties.color - the background color passed from Bubble
  
  var container = instance.canvas.get(0);
  container.innerHTML = '';
  
  var badge = document.createElement('span');
  badge.textContent = properties.label || 'Badge';
  badge.style.cssText = [
    'display: inline-block',
    'padding: 4px 12px',
    'border-radius: 9999px',
    'font-size: 12px',
    'font-weight: 600',
    'color: white',
    'background-color: ' + (properties.color || '#3b82f6')
  ].join(';');
  
  container.appendChild(badge);
}
```

VS Code advantages here:
- Install ESLint extension (search 'ESLint' in Extensions panel, install the Microsoft ESLint extension) to get real-time error highlighting
- Use Git (Source Control panel in VS Code sidebar) to commit each version of your plugin with a descriptive message
- Use VS Code's Find & Replace (Cmd+H / Ctrl+H) across all plugin files when you need to rename a property

The key Bubble plugin API objects available in element code:
- `instance.canvas` — jQuery-wrapped DOM element where you render your plugin's HTML
- `instance.data` — persistent data storage for the element instance
- `instance.triggerEvent(eventName)` — fire a Bubble event from your element
- `properties.field_name` — read Bubble-exposed property values passed by the Bubble editor user
- `context.currentUser` — access the current logged-in Bubble user

Note: Bubble plugin JavaScript runs in a sandboxed browser context — some modern browser APIs may be restricted. Do not rely on fetch() directly (use Bubble's built-in API calls for data) and test all code in Bubble's plugin preview, not just in VS Code.

```
// elements/badge-element/update.js
function(instance, properties, context) {
  var container = instance.canvas.get(0);
  container.innerHTML = '';
  
  var badge = document.createElement('span');
  badge.textContent = properties.label || 'Label';
  badge.style.backgroundColor = properties.color || '#6366f1';
  badge.style.color = 'white';
  badge.style.padding = '3px 10px';
  badge.style.borderRadius = '9999px';
  badge.style.fontSize = '12px';
  badge.style.fontWeight = '600';
  badge.style.display = 'inline-block';
  
  container.appendChild(badge);
  
  // Trigger a Bubble event when badge is clicked
  badge.addEventListener('click', function() {
    instance.triggerEvent('badge_clicked');
  });
}
```

**Expected result:** Plugin JavaScript files in VS Code show ESLint highlighting for syntax errors. You can write and edit element code with full VS Code tooling — autocompletion for DOM APIs, error highlighting, and Git version control.

### 4. Deploy the plugin to Bubble's Plugin Editor from VS Code

Once your plugin code is ready, deploy it to Bubble with a single CLI command. In VS Code's terminal, from your plugin project directory:

```
bubble-plugin deploy
```

The CLI uploads your local JavaScript and CSS files to your plugin in Bubble's Plugin Editor. This is a one-way push — the CLI sends your local files to Bubble, overwriting the Plugin Editor's current content for those files.

After deploying, Bubble does NOT automatically reload the plugin in any open Bubble app. You must:
1. Open your Bubble app in a new browser tab (or refresh the editor)
2. If the plugin is already installed in the app, go to Plugins tab → find your plugin and click 'Update to latest version' if a version update is shown
3. Open Preview mode to test the deployed plugin in a live context

For active development, you will iterate rapidly:
1. Edit code in VS Code
2. Run `bubble-plugin deploy` in VS Code terminal
3. Refresh Bubble editor or preview to see the change
4. Repeat

Note: VS Code has no 'watch mode' equivalent for Bubble plugin development — there is no hot reload. Each change requires a manual deploy followed by a manual Bubble refresh. This is a known limitation of the current Plugin CLI tooling.

Bubble's Plugin Editor (accessible from the main Bubble editor via the Plugins tab → Edit this plugin) shows the deployed code. You can verify the deploy succeeded by opening the Plugin Editor and checking that your code is there.

RapidDev's team has built custom Bubble plugins for clients ranging from simple UI components to complex API integrations — for enterprise-level plugin development or private plugins for your Bubble apps, book a free scoping call at rapidevelopers.com/contact.

```
# From your plugin project directory in VS Code terminal:
bubble-plugin deploy

# Expected output:
# Authenticating...
# Uploading elements/...
# Uploading actions/...
# Uploading shared/...
# Done! Plugin deployed to Bubble Plugin Editor.
```

**Expected result:** 'bubble-plugin deploy' completes without errors. The Bubble Plugin Editor shows your updated JavaScript and CSS code. Refreshing Bubble's preview shows the updated plugin element behavior.

### 5. Use VS Code for JavaScript in Bubble's 'Run JavaScript' workflow action

Even if you are not building a full Bubble plugin, VS Code is valuable for a simpler use case: writing JavaScript for Bubble's 'Run JavaScript' action (provided by the Toolbox plugin) before pasting it into Bubble's code editor.

Bubble's in-editor JavaScript field has no syntax highlighting, no error checking, and no formatting. If you write a typo, you will not know until you run the Workflow and see a JavaScript error at runtime. VS Code eliminates this by giving you a proper development environment.

Workflow:
1. In VS Code, create a new file — for example, 'bubble-workflow-scripts.js'
2. Write your JavaScript function with full VS Code tooling
3. Test the logic in VS Code's built-in terminal with Node.js: `node -e "your test here"`
4. When the code is working, copy the function body
5. In Bubble's Workflow editor, add a 'Run JavaScript' action (Toolbox plugin required) and paste the code

Bubble-specific considerations for 'Run JavaScript' actions:
- Your JavaScript runs in the user's browser (client-side), not on Bubble's servers
- You can access Bubble data passed as parameters via the `properties` object if using the Toolbox plugin's JavaScript element, or via dynamic data inserted into a text template if using the simple 'Run JavaScript' action
- The `bubble_fn_` prefix functions (e.g., `bubble_fn_output(value)`) are Bubble's way of returning values from JavaScript to the Bubble Workflow — these are Bubble-specific and not standard JavaScript
- Use `console.log()` for debugging — check the browser Console tab (F12) while in Bubble Preview to see output

Example: sorting a list of objects by a field:

```javascript
// Write and test this in VS Code first:
var users = JSON.parse(properties.users_json);
var sorted = users.sort(function(a, b) {
  return b.score - a.score;
});
bubble_fn_sorted_users(JSON.stringify(sorted));
```

This JavaScript is written in VS Code, tested in Node.js (replace `bubble_fn_sorted_users` with `console.log` for local testing), and then pasted into Bubble's Run JavaScript field.

```
// bubble-workflow-scripts.js
// Write in VS Code, test with Node.js, then paste into Bubble's Run JavaScript action

// Sorts an array of user objects by score (highest first)
// properties.users_json is a Bubble-passed dynamic value serialized as JSON
var users = JSON.parse(properties.users_json);

var sorted = users
  .filter(function(u) { return u.score != null; })
  .sort(function(a, b) { return b.score - a.score; });

// bubble_fn_output sends the result back to Bubble's Workflow
bubble_fn_output(JSON.stringify(sorted));
```

**Expected result:** JavaScript functions are written and tested in VS Code before pasting into Bubble's Run JavaScript action. Runtime JavaScript errors in Bubble are reduced because code is linted and tested locally first.

### 6. Build and connect a companion microservice from VS Code to Bubble

The third VS Code + Bubble pattern: build a REST API in VS Code that Bubble calls at runtime via API Connector. This is the pattern to use when you need server-side logic that Bubble cannot perform natively — PDF generation, complex calculations, HMAC signing for secure API calls, or processing requiring system libraries.

In VS Code, create a new Node.js project:

```
mkdir bubble-companion-api
cd bubble-companion-api
npm init -y
npm install express cors
```

Create a basic server.js:

```javascript
const express = require('express');
const cors = require('cors');
const app = express();

app.use(express.json());
app.use(cors({ origin: 'https://bubble.io' })); // or your Bubble app domain

const API_KEY = process.env.API_KEY || 'dev-key';

app.use((req, res, next) => {
  const key = req.headers['x-api-key'];
  if (key !== API_KEY) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  next();
});

app.get('/health', (req, res) => {
  res.json({ status: 'ok' });
});

app.post('/process', (req, res) => {
  const { input } = req.body;
  // Add your business logic here
  res.json({ result: input.toUpperCase(), processed_at: new Date().toISOString() });
});

app.listen(3000, '0.0.0.0', () => console.log('Running on port 3000'));
```

Test locally in VS Code's terminal: `node server.js`. Then in a second terminal: `curl -H "x-api-key: dev-key" http://localhost:3000/health` — should return `{"status": "ok"}`.

Once the API is working, deploy to Railway, Render, or another cloud platform. Then add the deployed HTTPS URL to Bubble's API Connector with the X-API-Key header marked as Private.

Set Privacy Rules in Bubble's Data tab on any data types that store results from this companion API.

```
const express = require('express');
const cors = require('cors');
const app = express();

app.use(express.json());

const API_KEY = process.env.API_KEY;

app.use((req, res, next) => {
  if (req.path === '/health') return next();
  const key = req.headers['x-api-key'];
  if (!API_KEY || key !== API_KEY) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  next();
});

app.get('/health', (req, res) => {
  res.json({ status: 'ok', service: 'bubble-companion-api' });
});

app.post('/process', (req, res) => {
  const { input, user_id } = req.body;
  if (!input) {
    return res.status(400).json({ error: 'input is required' });
  }
  res.json({
    result: input.trim().toUpperCase(),
    length: input.length,
    user_id,
    processed_at: new Date().toISOString()
  });
});

app.listen(process.env.PORT || 3000, '0.0.0.0', () => {
  console.log('Server running on port', process.env.PORT || 3000);
});
```

**Expected result:** The companion API runs locally in VS Code and responds correctly to test requests. After deploying to a cloud platform, the HTTPS URL is added to Bubble's API Connector and a successful Initialize call confirms connectivity.

## Best practices

- Always develop plugin JavaScript in VS Code with ESLint enabled before deploying to Bubble — Bubble's Plugin Editor code field has no error highlighting, so catching syntax errors locally saves significant debugging time.
- Use Git in VS Code to version-control your plugin source code and companion microservice code — this is entirely separate from Bubble's own version history (Settings → Versions) and gives you proper diff views, rollback capability, and team collaboration.
- After every 'bubble-plugin deploy', test the plugin in Bubble's Plugin Editor's test app environment before installing in your production Bubble app — plugin updates that break an existing element can affect all users of your Bubble app.
- Write JavaScript for Bubble's 'Run JavaScript' Workflow action in VS Code first and test it locally in Node.js (replacing Bubble-specific functions like bubble_fn_output with console.log) before pasting into Bubble's code field.
- Keep Bubble plugin code focused on UI rendering and event handling — move complex business logic (API calls, data transformation, calculations) into Bubble Workflows or a companion microservice rather than embedding it all in plugin JavaScript.
- Do not use TypeScript directly in Bubble plugin code — Bubble's Plugin Editor does not support TypeScript transpilation. Write TypeScript in VS Code for development and transpile to JavaScript (with tsc) before deploying with the Plugin CLI.
- Understand that VS Code's Git integration tracks your plugin source code while Bubble tracks the no-code app state — these are independent systems. Committing your VS Code plugin code does not create a Bubble version, and creating a Bubble version does not commit your VS Code code.
- For companion microservices built in VS Code that Bubble calls via API Connector, always add API key authentication and mark the key as Private in the Bubble API Connector shared header — set Privacy Rules on any Bubble data types that store the microservice's responses.

## Use cases

### Develop a custom Bubble plugin locally in VS Code with full IntelliSense

Use the Bubble Plugin CLI to scaffold a new Bubble plugin project in VS Code. Write plugin JavaScript (element rendering, action logic, data call processing) with full VS Code tooling — syntax highlighting, ESLint, Git commits. Deploy to the Bubble Plugin Editor with 'bubble-plugin deploy' and install the plugin in your Bubble app for testing.

Prompt example:

```
Initialize a new Bubble plugin project in VS Code, create a custom element that accepts a color palette parameter and renders a styled color swatch grid using the Bubble element rendering API. Write the element's update function in VS Code with ESLint checking, then deploy the plugin to Bubble's Plugin Editor and test it in the Bubble preview.
```

### Write and lint complex JavaScript in VS Code before using it in Bubble's Run JavaScript action

Write a complex string manipulation, array sorting, or data transformation function in VS Code with ESLint and TypeScript type hints. Once it is working and linted, paste the final function into a Bubble 'Run JavaScript' action (Toolbox plugin). This prevents silent JavaScript errors inside Bubble's workflow editor, which has no error checking.

Prompt example:

```
Write a JavaScript function in VS Code that takes a Bubble-passed array of user objects, sorts them by a 'score' property, deduplicates by email address, and formats dates as 'MMM D, YYYY'. Lint with ESLint and test in Node.js, then paste the working function body into a Bubble Run JavaScript workflow action.
```

### Build a Node.js REST API in VS Code that Bubble calls via API Connector

Develop an Express.js or Fastify API in VS Code to handle business logic that Bubble's workflow engine cannot perform natively — PDF generation, complex calculations, external service integrations requiring HMAC signing. Test the API locally in VS Code's integrated terminal, then deploy to a cloud platform for Bubble to call at runtime.

Prompt example:

```
Create a Node.js Express server in VS Code with a POST /generate-invoice endpoint that accepts line items and customer data from Bubble, generates a PDF invoice using pdfkit, uploads it to S3, and returns the signed S3 URL. Test locally with Postman, then deploy to Railway and add the URL to Bubble's API Connector.
```

## Troubleshooting

### 'bubble-plugin' command not found after running 'npm install -g bubble-plugin-cli'

Cause: The global npm bin directory is not in your system PATH, or the installation completed with permission errors that prevented the CLI from being placed in the expected location.

Solution: Run 'npm config get prefix' in your terminal to see where global npm packages are installed. Add that directory's /bin folder to your PATH. On macOS/Linux, add 'export PATH="$PATH:$(npm config get prefix)/bin"' to your ~/.zshrc or ~/.bashrc. Alternatively, use 'npx bubble-plugin-cli' instead of 'bubble-plugin' to run without a global install.

```
# macOS/Linux: add to ~/.zshrc or ~/.bashrc
export PATH="$PATH:$(npm config get prefix)/bin"

# Then reload your shell config:
source ~/.zshrc
```

### 'bubble-plugin deploy' fails with authentication error or 'Invalid credentials'

Cause: Your Bubble email or password has changed since you last ran 'bubble-plugin init', or the CLI's stored authentication token has expired.

Solution: Delete the CLI's stored credentials (look for a .bubble-plugin directory in your home folder or the plugin project directory) and run 'bubble-plugin init' again to re-authenticate with your current Bubble credentials. If you use two-factor authentication on your Bubble account, check whether the CLI supports 2FA (check the npm package documentation).

### JavaScript written in VS Code works in Node.js testing but throws errors in Bubble's plugin sandbox

Cause: Bubble's plugin sandbox runs in a restricted browser context. Some modern Web APIs available in Node.js (like fetch(), crypto, Buffer, process) are either unavailable or behave differently in Bubble's plugin environment. ES6+ syntax (arrow functions, template literals, const/let) works in most modern browsers but check Bubble's supported browser targets.

Solution: Test all plugin code in Bubble's Plugin Editor preview environment, not just in VS Code's Node.js runtime. Use Bubble's dedicated API mechanism for HTTP calls within plugins rather than native fetch(). Avoid Node.js-specific globals (process.env, Buffer, require) in plugin code. Check the Bubble Plugin documentation for the list of restricted APIs in the plugin sandbox.

```
// Instead of fetch() in plugin code, use Bubble's recommended approach
// or the API Connector which handles calls outside the sandbox
// Avoid:
fetch('https://api.example.com').then(r => r.json());

// Better: handle API calls in Bubble's API Connector
// and pass results to the plugin via properties
```

### Changes deployed with 'bubble-plugin deploy' are not visible in the Bubble editor or preview

Cause: Bubble's editor caches plugin code. Deploying with the CLI uploads the code to Bubble's servers but the browser-based editor does not auto-refresh to pick up the changes.

Solution: After every 'bubble-plugin deploy', do a hard refresh in the Bubble editor browser tab (Cmd+Shift+R on macOS, Ctrl+Shift+R on Windows/Linux). If the changes still do not appear, close the Bubble editor tab entirely, reopen it, and navigate back to your app. For preview testing, always close and reopen the Preview tab after deploying.

### The Bubble Plugin CLI package has not been updated in a long time and may be incompatible with the current Bubble platform

Cause: The bubble-plugin-cli is a community-maintained package and may lag behind Bubble's internal API or tooling changes. Bubble has made platform updates that occasionally break CLI compatibility.

Solution: Before building a production plugin workflow on the CLI, check the npm page (npmjs.com/package/bubble-plugin-cli) for the last publish date and any open issues. If the package appears abandoned, consider developing plugins entirely in Bubble's Plugin Editor browser interface — VS Code can still be used for writing logic in a separate file before pasting into the Plugin Editor's code fields.

## Frequently asked questions

### Is there a VS Code extension specifically for Bubble development?

There is no official VS Code extension published by Bubble.io. Some community members have created snippets or syntax highlight files for Bubble's expression language, but they are not officially supported. For plugin development, the Bubble Plugin CLI is the official local development tool — it integrates with VS Code as a generic code editor rather than through a dedicated extension.

### Can VS Code sync with Bubble's version control system?

No. Bubble's version history (Settings → Versions) is a proprietary snapshot system that stores app state in Bubble's database. VS Code tracks code files with Git. There is no sync between the two — they are entirely independent systems. Your VS Code Git history tracks plugin code or microservice code; Bubble's version history tracks the no-code app configuration.

### How do I debug JavaScript running inside a Bubble plugin?

Use your browser's built-in developer tools. When your Bubble app is open in Preview mode, press F12 to open DevTools. The Console tab shows console.log() output from your plugin JavaScript. The Sources tab lets you set breakpoints in the plugin JavaScript (find it under the page's scripts). The Bubble Plugin Editor also has a 'Test' tab that provides a sandboxed environment for basic plugin testing.

### Can I use TypeScript in Bubble plugin development with VS Code?

Not natively. Bubble's Plugin Editor accepts plain JavaScript only — TypeScript must be transpiled to JavaScript before deploying. You can write plugin logic in TypeScript in VS Code (for type checking and IntelliSense), compile it with 'tsc' in VS Code's terminal, and then deploy the compiled JavaScript output with the Plugin CLI. Set up a tsconfig.json that targets ES5 or ES6 to ensure browser compatibility.

### What is the Bubble Plugin CLI and where do I find the documentation?

The Bubble Plugin CLI (bubble-plugin-cli) is a Node.js package that scaffolds, develops, and deploys Bubble plugins from your local file system. Find it on npm at npmjs.com/package/bubble-plugin-cli. Bubble's official plugin development documentation is at manual.bubble.io in the Building Plugins section — it covers the Plugin Editor's interface, the JavaScript API for elements and actions, and the property types available to plugin developers.

### Does the Bubble Plugin CLI support hot reload or watch mode for development?

No. The current bubble-plugin-cli does not support watch mode or hot reload. Each code change requires a manual 'bubble-plugin deploy' command followed by a manual refresh of Bubble's editor or preview. This is a known limitation of the community-maintained CLI. To speed up development, use VS Code's integrated terminal to quickly run deploy without leaving the editor, and keep the Bubble preview open in a separate browser tab.

---

Source: https://www.rapidevelopers.com/bubble-integrations/visual-studio-code
© RapidDev — https://www.rapidevelopers.com/bubble-integrations/visual-studio-code