# Atom

- Tool: Bubble
- Difficulty: Beginner
- Time required: 30–45 minutes
- Last updated: July 2026

## TL;DR

Atom (GitHub's text editor) was archived in December 2022 and has no REST API — there is no 'Bubble to Atom' integration. This guide redirects you to the correct modern workflow: using VS Code to draft Bubble JavaScript locally (Run JavaScript actions, plugin code, API transformer logic) and copy-paste it into Bubble's editor, since Bubble has no CLI or version control sync.

## Atom is archived — here is the honest explanation and what to do instead

If you searched for 'Bubble Atom integration' or 'connect Bubble to Atom', you were likely wondering one of two things: how to use a text editor as a development companion for writing Bubble JavaScript, or how to version-control your Bubble app code.

The first thing to know: Atom was archived by GitHub on December 15, 2022. GitHub stopped releasing new versions, stopped accepting package submissions to the Atom package registry, and stopped providing security patches. If you are still using Atom today, you are using unmaintained software with known unpatched vulnerabilities. The practical impact on Bubble development is that Atom's JavaScript packages (linters, formatters, IntelliSense) have also drifted into unmaintained status — they generate false errors for modern ES2022 syntax and have no awareness of Bubble-specific globals.

The correct replacement is Visual Studio Code (VS Code), which is free, maintained by Microsoft, and has become the universal standard for JavaScript development. Everything Atom could do for Bubble development, VS Code does better — with a larger extension ecosystem, faster updates, and active community support.

The second thing to know: Bubble has no CLI and no file-based project structure. Unlike Retool (which has 'retool apps push'), FlutterFlow (which has code export), or standard Next.js apps (which live in a folder of files), a Bubble app exists entirely in Bubble's proprietary cloud database. There is no way to export your Bubble app to a folder of files, edit those files locally, and push the changes back to Bubble.

What you CAN do locally is write the JavaScript that goes inside Bubble's code blocks — specifically:
- The code inside 'Run JavaScript' actions in Bubble Workflows (requires the free Toolbox plugin)
- Bubble plugin front-end code and server-side code files (edited in Bubble's Plugin Editor web interface)
- Transformer functions that process API Connector response data

All of these code blocks are written as plain browser-compatible JavaScript. VS Code is an excellent local drafting environment: write the code with full syntax highlighting and linting, test the logic using Quokka.js, then copy-paste the final version into Bubble's code editor.

This guide walks you through setting up VS Code as a Bubble-aware JavaScript development environment and replacing whatever Atom workflow you had.

## Before you start

- A computer running Windows, macOS, or Linux (VS Code runs on all three)
- A Bubble app to develop JavaScript for (any plan — Run JavaScript actions require the free Toolbox plugin from the Bubble Plugin Marketplace)
- No prior VS Code experience required — this guide covers setup from scratch
- Node.js installed on your computer (for ESLint — download from nodejs.org if not already installed; check with: open Terminal on Mac → type 'node --version')

## Step-by-step guide

### 1. Acknowledge Atom's end-of-life and install VS Code

If you are currently using Atom, stop using it for active development. GitHub officially archived Atom on December 15, 2022. This means:
- No new security patches (Atom has known vulnerabilities that will never be fixed)
- No package updates (Atom packages like linters and formatters are drifting out of date)
- Reduced browser/OS compatibility as Electron (the framework Atom was built on) advances

Atom's package repository at atom.io is no longer accepting new packages. The Atom editor download page now redirects to VS Code. GitHub's own migration announcement explicitly recommends VS Code as the successor.

To install VS Code:
1. Open your browser and go to code.visualstudio.com
2. Click the large download button for your operating system (Windows, macOS, or Linux)
3. Run the installer and accept the defaults
4. When VS Code opens, dismiss any welcome/telemetry prompts

If you have Atom-specific keybindings you want to replicate in VS Code:
- Go to VS Code Extensions panel (Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on Mac)
- Search for 'Atom Keymap' — Microsoft publishes an official Atom keybinding extension that maps Atom's shortcuts to VS Code equivalents
- Install it to retain your Atom muscle memory while using VS Code

For tab size settings in VS Code (matching Bubble's code editor default of 2 spaces):
- Open File → Preferences → Settings (or Cmd+, on Mac)
- Search for 'Tab Size' → set to 2
- Search for 'Format on Save' → enable this checkbox
- Search for 'Detect Indentation' → disable this to force 2-space indent on all files

**Expected result:** VS Code is installed and open on your computer. Tab size is set to 2 spaces and Format on Save is enabled. If you installed the Atom Keymap extension, your familiar keyboard shortcuts are active.

### 2. Configure ESLint for Bubble's browser runtime environment

Bubble's 'Run JavaScript' action runs code in the user's browser — it is a browser runtime environment, not Node.js. This means code inside Run JavaScript actions can access browser APIs (document, window, localStorage, fetch) but cannot use Node.js APIs (require, fs, process, Buffer). Configuring ESLint to match this environment prevents false errors in VS Code that would waste your debugging time.

First, create a folder for your Bubble JavaScript files. Open VS Code and go to File → Open Folder → create and select a new folder like 'my-bubble-scripts'.

Open the integrated terminal in VS Code (Terminal → New Terminal or Ctrl+` on Windows/Linux, Cmd+` on Mac). Run:

```
npm init -y
npm install --save-dev eslint
npx eslint --init
```

In the ESLint init prompts:
- How would you like to use ESLint? → 'To check syntax and find problems'
- What type of modules? → 'None of these' (plain scripts)
- Which framework? → 'None of these'
- Does your project use TypeScript? → No
- Where does your code run? → SELECT 'Browser' (use Space to toggle, Enter to confirm)
- What format for the config file? → JSON

This creates a .eslintrc.json file. Open it and add Bubble-specific globals so ESLint does not flag them as undefined variables:

```json
{
  "env": {
    "browser": true,
    "es2022": true
  },
  "globals": {
    "properties": "readonly",
    "context": "readonly",
    "bubble_fn_result": "writable"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "warn"
  }
}
```

The 'properties' global is Bubble's element properties object available inside plugin code. The 'context' global is Bubble's app context. The 'bubble_fn_result' global is the callback function used in Toolbox's Run JavaScript action to return values to Bubble workflows — without declaring it, ESLint will flag every return call as undefined.

Install the ESLint VS Code extension: click the Extensions panel (Ctrl+Shift+X) → search 'ESLint' → install the extension by Microsoft. Now any error in your Bubble JavaScript will be underlined in VS Code before you paste it into Bubble.

```
{
  "env": {
    "browser": true,
    "es2022": true
  },
  "globals": {
    "properties": "readonly",
    "context": "readonly",
    "bubble_fn_result": "writable"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "warn"
  }
}
```

**Expected result:** ESLint is installed and configured with Bubble-specific globals. A test .js file in VS Code shows errors for undefined variables (correctly) but does not flag 'properties', 'context', or 'bubble_fn_result' as undefined. The ESLint extension underlines syntax errors inline.

### 3. Install Quokka.js for inline JavaScript testing before pasting into Bubble

Quokka.js is a VS Code extension that evaluates your JavaScript inline and shows the output of each expression directly in the editor — without running a browser or opening a terminal. For Bubble development, this means you can test transformer functions, date calculations, and data transformation logic before pasting the code into Bubble's workflow editor.

Install Quokka.js:
1. Open the VS Code Extensions panel (Ctrl+Shift+X or Cmd+Shift+X)
2. Search for 'Quokka.js'
3. Install the extension by Wallaby.js (the free Community version is sufficient)

To start a Quokka scratch file:
1. Press Ctrl+Shift+P (or Cmd+Shift+P) to open the Command Palette
2. Type 'Quokka: New JavaScript File' and press Enter
3. A new untitled file opens with Quokka running

As you type code, Quokka immediately shows the evaluated result as grey text beside each expression. For example:

```javascript
const price = 29.99;
const tax = price * 0.08;
const total = price + tax; // Quokka shows: 32.39 immediately
```

This is particularly useful for testing date calculations that will go into a Bubble 'Run JavaScript' action. For example, to calculate a Unix millisecond timestamp for Trend Micro Cloud One event searches:

```javascript
const sevenDaysAgo = new Date().getTime() - (7 * 24 * 60 * 60 * 1000);
// Quokka shows the result immediately: 1751587200000 (for example)
```

For functions that use the bubble_fn_result callback (Toolbox's return mechanism), write a mock version to test locally:

```javascript
// Mock the Bubble callback for local testing
function bubble_fn_result(value) {
  console.log('Result:', value);
}

// Your actual Bubble script logic
const inputDate = '2026-07-01T00:00:00Z';
const timestamp = new Date(inputDate).getTime();
bubble_fn_result(timestamp); // Quokka shows: Result: 1751328000000
```

Once the logic is correct and Quokka shows the expected output, copy the production version of the code (without the mock function) and paste it into the Bubble 'Run JavaScript' action's code field.

```
// Example: Convert a date string to Unix milliseconds for Cloud One API calls
// Test this locally in Quokka before pasting into Bubble's Run JavaScript action

// Mock for local testing only - remove before pasting into Bubble
function bubble_fn_result(value) {
  console.log('Result:', value); // Quokka shows output here
}

// Production code: paste this into Bubble's Run JavaScript action
const daysBack = 7;
const nowMs = new Date().getTime();
const startMs = nowMs - (daysBack * 24 * 60 * 60 * 1000);
bubble_fn_result(startMs);
```

**Expected result:** Quokka.js is installed and running. When you create a new Quokka JavaScript file and type expressions, you see the evaluated results inline in grey text. Date calculations and string manipulations verify correctly before you paste them into Bubble.

### 4. Understand Bubble's code entry points and their constraints

To use VS Code effectively for Bubble development, you need to know exactly where JavaScript can be added in Bubble and what constraints each entry point has. There are three main entry points:

**1. 'Run JavaScript' action in Bubble Workflows (most common)**
This requires the free Toolbox plugin (install it from Plugins → Add plugins → search 'Toolbox'). Once installed, you will see a 'Run JavaScript' action available in Bubble's Workflow panel.

Constraints:
- 30-second timeout — code must complete within 30 seconds
- Browser runtime — runs in the user's browser, not Bubble's servers
- No Node.js APIs (no require, no fs, no process)
- No access to Bubble's database directly — interact with Bubble data through Bubble's element properties or by returning values via bubble_fn_result and wiring them into Workflow steps
- Code size limit: keep scripts reasonably small; very large scripts may hit parsing limits in Bubble's code editor

The Toolbox plugin's 'Run JavaScript' action has input fields (where you pass Bubble data into the JavaScript as variables) and an output field (where you return a value back to Bubble via bubble_fn_result). Write the JavaScript in VS Code, test it with Quokka, then paste the final version into the code field of this action.

**2. Bubble Plugin Editor (for plugin developers)**
If you are building your own Bubble plugin (at bubble.io/plugin), each plugin element has two code files: a front-end code file (runs in the browser) and a server-side code file (runs on Node.js on Bubble's servers). These are edited in the Plugin Editor's web interface — there is no direct way to push from VS Code. Write and test the code locally in VS Code, then paste into the Plugin Editor's corresponding code fields.

Front-end plugin code uses Bubble-specific globals (properties, context, instance, state) that should be declared in your .eslintrc.json globals section. Server-side plugin code runs in Node.js — you can use require for npm packages that Bubble supports.

**3. API Connector JSON transformers**
API Connector calls can have a JavaScript transformer function applied to the response data before Bubble processes it. This is plain JavaScript that receives the API response body and returns a transformed object. Write these in VS Code with the actual API response as test input, verify the output, then paste into the API Connector call's 'Body' → 'Transformer' section.

RapidDev's team has extensive experience building complex Bubble applications with custom JavaScript integrations — for plugin development or advanced transformer patterns, book a free scoping call at rapidevelopers.com/contact.

```
// Example Bubble Run JavaScript action code structure
// Paste this into Bubble's Toolbox 'Run JavaScript' action

// Bubble passes values from Workflow into these variables:
// (You define variable names in the 'Input' fields of the Run JavaScript action)
// var inputValue = <bubble workflow value>;
// var inputDate = <bubble workflow date>;

// Your logic here
var processedResult = inputValue.trim().toLowerCase();
var timestamp = new Date(inputDate).getTime();

// Return a value to Bubble workflow via bubble_fn_result
// (Map this to a Workflow 'result' field of type Text, Number, or Date)
bubble_fn_result(processedResult + '|' + timestamp);
```

**Expected result:** You understand the three JavaScript entry points in Bubble (Run JavaScript action, Plugin Editor, API Connector transformer), the constraints on each (browser vs. Node.js, timeouts, size limits), and how VS Code fits into the workflow as a local drafting and testing environment.

### 5. Set up a local Git repository as your Bubble JavaScript source of truth

Bubble's app version history (Settings → Versions) saves snapshots of your entire app — UI, data types, workflows, and everything else. But it has limitations for JavaScript specifically: the version history does not provide a diff of what changed in a code block between versions, and rolling back a version to fix a JavaScript error means also reverting all UI and workflow changes since that version.

The solution is to maintain a local Git repository containing every piece of JavaScript you use in your Bubble app. This gives you:
- Line-by-line diffs of JavaScript changes over time
- The ability to roll back specific JavaScript files without reverting UI changes in Bubble
- A backup copy of all custom code independent of Bubble's platform
- The ability to comment, annotate, and document code outside of Bubble's constrained code editor

To set up the repository:
1. In VS Code, open your Bubble scripts folder
2. Open the integrated terminal and run: git init
3. Create a .gitignore file containing: node_modules/
4. Create a folder structure matching your Bubble app's JavaScript organization:
   - /workflows/ — one .js file per significant Run JavaScript action in your Bubble Workflows
   - /plugins/ — one subfolder per plugin you are developing
   - /transformers/ — one .js file per API Connector transformer function
   - /utils/ — shared utility functions used across multiple scripts
5. Add all files: git add . and create the first commit: git commit -m 'Initial commit: add Bubble script structure'

Naming convention for workflow scripts: use the Workflow name as the filename, e.g., 'calculate-subscription-price.js' for the 'Run JavaScript' action in the 'Calculate Subscription Price' workflow. This makes it easy to find the corresponding file when you need to update a script.

When you update a Bubble script: update the .js file in VS Code first, commit the change with a descriptive message ('fix: handle null date values in calculate-subscription-price'), test with Quokka, then paste the new version into Bubble's code editor.

**Expected result:** A Git repository exists at your Bubble scripts folder with the folder structure /workflows, /plugins, /transformers, and /utils. An initial commit is in the log. The .gitignore file excludes node_modules. You have a clear process: write and test JavaScript in VS Code, commit to Git, then paste into Bubble.

### 6. Optional: add Prettier for auto-formatting and verify the complete VS Code setup

With ESLint catching logical errors and Quokka providing inline evaluation, adding Prettier completes the VS Code setup for Bubble JavaScript authoring. Prettier handles code formatting automatically — consistent indentation, quote style, and line length — so you do not have to think about formatting when writing scripts.

Install Prettier in your project folder via the integrated terminal:
```
npm install --save-dev prettier
```

Create a .prettierrc file in your project folder with Bubble-compatible settings:
```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}
```

Install the Prettier VS Code extension: Extensions panel → search 'Prettier - Code formatter' → install by Prettier. Once installed, VS Code will auto-format your JavaScript every time you save a file (if Format on Save is enabled from Step 1).

To verify the complete setup is working, create a test file test-setup.js and write:
```javascript
const rawDate = '2026-07-01T12:00:00Z';
const dateObj = new Date(rawDate);
const unixMs = dateObj.getTime();
const formatted = dateObj.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
bubble_fn_result(unixMs);
```

Verify the following:
- ESLint: no errors on bubble_fn_result (global declared)
- Quokka: shows the numeric unixMs value inline
- Prettier: file auto-formats on save (consistent indentation)
- Git: commit this test file to confirm Git tracking works

This file pattern — a date conversion plus a bubble_fn_result return — is representative of the majority of practical Bubble Run JavaScript actions. If this workflow runs smoothly, you are ready to develop all Bubble JavaScript in VS Code.

```
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}
```

**Expected result:** Prettier is installed and configured. Saving a .js file automatically formats it with 2-space indentation and consistent quote style. ESLint, Quokka, and Prettier all work together without conflicts. The complete VS Code setup — format on save, inline evaluation, linting — is ready for Bubble JavaScript development.

## Best practices

- Migrate away from Atom immediately — Atom received its final update in December 2022 and has unpatched security vulnerabilities. Using VS Code for all Bubble JavaScript development is not optional; Atom is no longer a safe development environment.
- Configure ESLint with browser: true and Bubble-specific globals (properties, context, bubble_fn_result) before writing any Bubble JavaScript in VS Code — this catches errors that would only appear after pasting into Bubble, saving significant debugging time.
- Always test Run JavaScript action code with Quokka.js before pasting into Bubble — catching logical errors locally is faster than debugging through Bubble's Workflow Logs, which require running the full app.
- Maintain a local Git repository of all Bubble JavaScript files as your source of truth — Bubble's version history does not provide code diffs, and losing a complex Run JavaScript action to an accidental overwrite in Bubble has no easy recovery path beyond rewriting it.
- Write Bubble plugin code in VS Code with separate .js files per plugin element, commit to Git, then paste into Bubble's Plugin Editor — this gives you version history for plugin code that Bubble's Plugin Editor does not provide natively.
- Never paste TypeScript into Bubble's code editor — Bubble's code execution environment does not support TypeScript syntax. Write TypeScript in VS Code for local type-checking benefits only, then compile to plain JavaScript before pasting.
- Use Prettier with tabWidth: 2 to match Bubble's code editor default indentation — consistently formatted code is easier to review in Bubble's editor (which has basic but functional syntax highlighting) and less likely to introduce invisible whitespace issues.
- Document each local .js file with a comment block showing which Bubble Workflow, which step number, and which app version last used this script — this makes maintaining the Git repository meaningful rather than a collection of anonymous scripts.

## Use cases

### Draft and test Bubble 'Run JavaScript' action code in VS Code before pasting

Write the JavaScript for Bubble's 'Run JavaScript' workflow actions locally in VS Code with ESLint configured for Bubble's browser runtime. Use Quokka.js to run the logic inline and verify it produces expected output before copy-pasting into Bubble's code editor. Catch errors before they break your Bubble workflow — saving debugging time and Bubble credits.

Prompt example:

```
Create a VS Code file bubble-workflows.js. Configure ESLint with browser: true globals to match Bubble's runtime. Write a function that calculates date differences for a Bubble workflow step, test it with Quokka.js inline evaluation, then copy the final function body into Bubble's 'Run JavaScript' action code field.
```

### Develop Bubble plugin front-end code locally with IntelliSense

When building a Bubble Plugin (via Bubble's Plugin Editor), write the plugin's client-side JavaScript locally in VS Code with full autocomplete and error detection. VS Code handles the authoring experience; you paste the finalized code into Bubble's Plugin Editor web interface. Maintain all plugin files in a local Git repository as your source-of-truth backup, since Bubble's Plugin Editor has no version history.

Prompt example:

```
Create a local folder 'my-bubble-plugin' with separate .js files for each plugin element's initialize and update functions. Configure ESLint with Bubble plugin globals (properties, context, bubble). When each file is tested and finalized, paste the content into the corresponding code block in Bubble's Plugin Editor at bubble.io/plugin.
```

### Maintain a version-controlled backup of all Bubble JavaScript

Since Bubble has no CLI sync or Git integration for code content, create a local Git repository containing all the JavaScript files used in your Bubble app — Run JavaScript actions, plugin code, transformer functions. Commit after each significant change. This gives you version history, the ability to diff changes, and a recovery path if a bad paste into Bubble breaks a workflow that cannot be easily rolled back.

Prompt example:

```
Create a Git repo 'bubble-scripts' with folders: /workflows (Run JavaScript action code), /plugins (plugin front-end and server-side files), /transformers (API Connector transformer functions). Commit each file after testing in VS Code. Use Bubble's app version history for UI rollbacks; use Git for JavaScript code rollbacks.
```

## Troubleshooting

### ESLint underlines 'bubble_fn_result' as 'no-undef' even after configuring .eslintrc.json

Cause: The .eslintrc.json file is not being picked up by VS Code's ESLint extension — either the file is in the wrong folder, the JSON has a syntax error, or the ESLint extension has not loaded the updated config after the file was saved.

Solution: Verify .eslintrc.json is in the root of the folder opened in VS Code (the same level as node_modules and package.json). Open .eslintrc.json in VS Code and check for JSON syntax errors — a missing comma or bracket will silently break the entire config. After saving any changes to .eslintrc.json, use Ctrl+Shift+P → 'ESLint: Restart ESLint Server' to reload the extension with the new config. Confirm 'bubble_fn_result' is listed under the 'globals' key exactly as shown (not under 'env').

```
{
  "env": { "browser": true, "es2022": true },
  "globals": {
    "properties": "readonly",
    "context": "readonly",
    "bubble_fn_result": "writable"
  }
}
```

### Quokka.js shows an error for 'bubble_fn_result is not defined' when testing Bubble scripts

Cause: Quokka runs the code as a real Node.js/browser script, not inside Bubble's runtime. 'bubble_fn_result' is a Bubble-injected callback that does not exist in a standard JavaScript environment — Quokka correctly identifies it as undefined.

Solution: Add a local mock of bubble_fn_result at the top of your Quokka test file. This mock replaces the Bubble callback for local testing only. Before pasting into Bubble, delete or comment out the mock line — Bubble's runtime provides the real callback automatically.

Mock to add at the top of Quokka test files:
function bubble_fn_result(v) { console.log('Return to Bubble:', v); }

```
// Add at top of Quokka test file (remove before pasting into Bubble)
function bubble_fn_result(v) { console.log('Return to Bubble:', v); }
```

### Bubble's 'Run JavaScript' action runs without errors in VS Code but throws an error or does nothing in Bubble

Cause: The code uses a Node.js API (such as require, Buffer, process, or fs) that works in VS Code's Node.js environment but does not exist in the user's browser where Bubble's Run JavaScript action runs. Alternatively, the code is using the 'return' keyword instead of 'bubble_fn_result' to return a value.

Solution: Review your code for any Node.js-specific APIs. Confirm that .eslintrc.json is set with env: browser: true — ESLint will flag Node.js-only APIs as errors when browser mode is active, catching these before you paste into Bubble. To return values from a Run JavaScript action, use the bubble_fn_result(value) callback — the standard JavaScript 'return' keyword has no effect in Bubble's Toolbox action context.

### After pasting updated JavaScript into Bubble's code editor, the old version of the code still runs

Cause: Bubble's code editor may have cached the previous version, or the Workflow containing the 'Run JavaScript' action has not been saved after the code was updated.

Solution: After pasting updated code into Bubble's 'Run JavaScript' action code field, click outside the code editor to confirm the paste, then click the blue 'Save' button that appears in the Bubble Workflow editor header. If the Workflow editor does not show a Save button, make a minor change to another element in the workflow (such as toggling a checkbox back and forth) to trigger the 'unsaved' state, then save. Clear your browser cache and run the Workflow again to confirm the updated code is running.

## Frequently asked questions

### Is there any way to continue using Atom for Bubble development?

Technically Atom still runs as an application on most computers, but it is not recommended. Atom has received no security updates since December 15, 2022, meaning known vulnerabilities in Atom and its underlying Electron framework remain unpatched. Additionally, most Atom packages (linters, formatters, language servers) are unmaintained and increasingly incompatible with modern JavaScript. For Bubble development specifically, the JavaScript linting packages in Atom have not been updated to support ES2022 syntax, causing false error underlines. VS Code is the correct replacement and takes less than 10 minutes to set up.

### Can I sync my local VS Code files directly with my Bubble app — like a push/pull workflow?

No. Bubble has no CLI and no file-based project structure. A Bubble app exists entirely in Bubble's proprietary cloud database — there are no .bubble files, no project folder, and no way to push changes from a local editor to Bubble. The only workflow is manual copy-paste: write and test JavaScript locally in VS Code, then paste the final code into the appropriate Bubble code field (Run JavaScript action, Plugin Editor, or API Connector transformer). This is a fundamental limitation of Bubble's architecture, not a missing feature that will be added soon.

### Does Bubble support TypeScript in its code editor?

No. Bubble's code execution environment runs plain JavaScript. While you can write TypeScript locally in VS Code and benefit from type-checking during development, you must compile it to plain JavaScript (using the TypeScript compiler or a bundler like esbuild) before pasting into Bubble. For most Bubble Run JavaScript actions — which tend to be 10-50 lines of transformation logic — plain JavaScript with JSDoc type comments is simpler and avoids the compilation step.

### What is the best way to debug a Bubble 'Run JavaScript' action that is not working?

Start by testing the same logic in a Quokka.js scratch file in VS Code — this isolates whether the problem is the JavaScript logic itself or something specific to Bubble's runtime. If the logic works in Quokka but fails in Bubble, open the Bubble Workflow Logs (Logs tab in the Bubble editor left sidebar → Workflow Logs) and look for the specific error message. Common causes: using a Node.js API that does not exist in the browser (check ESLint output), using 'return' instead of 'bubble_fn_result', or a 30-second timeout if the script is doing heavy computation.

### Can I use npm packages inside Bubble's Run JavaScript actions?

Not directly via require or import — Bubble's Run JavaScript action runs in the user's browser and does not have access to npm. To use an npm package's functionality in Bubble, you have two options: (1) Load the package from a CDN via a Script URL in Bubble's Settings → SEO / metatags → Custom code section, which makes the package available as a global variable in all Run JavaScript actions on that page; or (2) Build a Bubble Plugin with the package included in the plugin's server-side code (which runs on Node.js and supports require). For most utility functions, copying the specific function you need from the npm package directly into your script is simpler than either option.

### How is this different from the Bubble Visual Studio Code integration page?

The VS Code integration page is the 'positive' tutorial — it covers how to set up VS Code for Bubble development from scratch for users actively choosing VS Code. This Atom page is a 'migration and redirect' tutorial for users who arrived with Atom experience and need to understand why Atom is no longer usable and how to transition their workflow. The core VS Code setup described here is a subset of the full VS Code page — if you are starting from zero, the VS Code page has more comprehensive coverage of Bubble-specific extensions and workflows.

---

Source: https://www.rapidevelopers.com/bubble-integrations/atom
© RapidDev — https://www.rapidevelopers.com/bubble-integrations/atom