Visual Studio Code

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.

1# Install Node.js LTS from nodejs.org, then run these in your terminal:
2
3# Verify Node.js is installed
4node --version  # Should show v20.x.x or similar
5npm --version   # Should show 10.x.x or similar
6
7# Install Bubble Plugin CLI globally
8npm install -g bubble-plugin-cli
9
10# Verify installation
11bubble-plugin --version

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.

1# In your computer's terminal or VS Code terminal:
2mkdir my-bubble-plugin
3cd my-bubble-plugin
4bubble-plugin init
5
6# Follow prompts:
7# Enter your Bubble email: you@example.com
8# Enter your Bubble password: **********
9# Plugin name: My Custom Plugin
10# Create new or connect existing? Create new
11
12# Open in VS Code:
13code .

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.

1// elements/badge-element/update.js
2function(instance, properties, context) {
3  var container = instance.canvas.get(0);
4  container.innerHTML = '';
5  
6  var badge = document.createElement('span');
7  badge.textContent = properties.label || 'Label';
8  badge.style.backgroundColor = properties.color || '#6366f1';
9  badge.style.color = 'white';
10  badge.style.padding = '3px 10px';
11  badge.style.borderRadius = '9999px';
12  badge.style.fontSize = '12px';
13  badge.style.fontWeight = '600';
14  badge.style.display = 'inline-block';
15  
16  container.appendChild(badge);
17  
18  // Trigger a Bubble event when badge is clicked
19  badge.addEventListener('click', function() {
20    instance.triggerEvent('badge_clicked');
21  });
22}

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.

1# From your plugin project directory in VS Code terminal:
2bubble-plugin deploy
3
4# Expected output:
5# Authenticating...
6# Uploading elements/...
7# Uploading actions/...
8# Uploading shared/...
9# Done! Plugin deployed to Bubble Plugin Editor.

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.

1// bubble-workflow-scripts.js
2// Write in VS Code, test with Node.js, then paste into Bubble's Run JavaScript action
3
4// Sorts an array of user objects by score (highest first)
5// properties.users_json is a Bubble-passed dynamic value serialized as JSON
6var users = JSON.parse(properties.users_json);
7
8var sorted = users
9  .filter(function(u) { return u.score != null; })
10  .sort(function(a, b) { return b.score - a.score; });
11
12// bubble_fn_output sends the result back to Bubble's Workflow
13bubble_fn_output(JSON.stringify(sorted));

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.

1const express = require('express');
2const cors = require('cors');
3const app = express();
4
5app.use(express.json());
6
7const API_KEY = process.env.API_KEY;
8
9app.use((req, res, next) => {
10  if (req.path === '/health') return next();
11  const key = req.headers['x-api-key'];
12  if (!API_KEY || key !== API_KEY) {
13    return res.status(401).json({ error: 'Unauthorized' });
14  }
15  next();
16});
17
18app.get('/health', (req, res) => {
19  res.json({ status: 'ok', service: 'bubble-companion-api' });
20});
21
22app.post('/process', (req, res) => {
23  const { input, user_id } = req.body;
24  if (!input) {
25    return res.status(400).json({ error: 'input is required' });
26  }
27  res.json({
28    result: input.trim().toUpperCase(),
29    length: input.length,
30    user_id,
31    processed_at: new Date().toISOString()
32  });
33});
34
35app.listen(process.env.PORT || 3000, '0.0.0.0', () => {
36  console.log('Server running on port', process.env.PORT || 3000);
37});