# How to Integrate Retool with Atom

- Tool: Retool
- Difficulty: Beginner
- Time required: 15 minutes
- Last updated: April 2026

## TL;DR

Atom was a popular open-source text editor for writing Retool custom component code and JavaScript transformers, but GitHub archived Atom in December 2022. This guide covers the migration path from Atom to Visual Studio Code for Retool development workflows — including Retool CLI setup, JavaScript and TypeScript tooling, and why VS Code is now the recommended replacement for all Retool-related code editing.

## Migrating from Atom to VS Code for Retool Development

Atom was widely used by developers building Retool applications for writing JavaScript transformer functions, Custom Component React code, and Retool CLI app definitions locally before syncing changes to Retool. Its extensibility and package ecosystem made it a comfortable environment for web developers. However, GitHub officially archived the Atom project on December 15, 2022, meaning no further updates, security patches, or package maintenance will be released. Using an archived, unmaintained editor for production development work carries increasing risk as dependencies age.

Visual Studio Code has emerged as the clear successor for Retool development workflows. Built on the same Electron foundation as Atom, VS Code offers a near-identical editing experience with significantly superior capabilities: built-in TypeScript support (critical for Retool Custom Components using React), an actively maintained extension marketplace, GitHub Copilot integration for accelerating repetitive transformer code, and a native Git interface. For teams using the Retool CLI to export and version-control app definitions, VS Code's integrated terminal and JSON schema validation make the workflow more productive.

This guide walks through migrating your Atom-based Retool workflow to VS Code, covering the essential extension setup for JavaScript, TypeScript, and React development, and explains how to configure VS Code to match the parts of Atom's workflow your team depended on most.

## Before you start

- Visual Studio Code installed from https://code.visualstudio.com (free, available for macOS, Windows, and Linux)
- Node.js 18+ installed for running the Retool CLI and any local development tools
- A Retool account with an existing application to migrate development workflow for
- Retool CLI installed globally: npm install -g retool-cli (for teams using version-controlled app definitions)
- Optional: your existing Atom configuration and packages list to reference when selecting VS Code equivalents

## Step-by-step guide

### 1. Install Visual Studio Code and configure it as your Retool editor

Download and install Visual Studio Code from https://code.visualstudio.com. VS Code is available for macOS, Windows, and Linux — select the appropriate installer for your operating system and run it. VS Code installs in minutes with no additional dependencies.

After installation, configure VS Code with the recommended settings for Retool development. Open VS Code Settings (Cmd+, on macOS, Ctrl+, on Windows/Linux) and configure the following:
- Set 'Tab Size' to 2 spaces — this matches Retool's internal code editor formatting
- Enable 'Format On Save' to automatically format JavaScript and TypeScript files on every save
- Set the default file associations: .js files to JavaScript (ES2022+), not older JavaScript modes

If you used Atom's theme or keymap, VS Code has built-in options to replicate familiar experiences. In VS Code's Command Palette (Cmd+Shift+P), search for 'Preferences: Color Theme' to select a theme visually similar to Atom's One Dark theme (which is available as the built-in 'Dark+ theme' in VS Code or as a marketplace extension named 'One Dark Pro').

Configure VS Code to use the integrated terminal for Retool CLI commands: Terminal → New Terminal opens a terminal in the current project directory, making it convenient to run Retool CLI commands without switching windows.

**Expected result:** Visual Studio Code is installed and configured with 2-space tabs, format-on-save enabled, and your preferred theme. The integrated terminal is available for running Retool CLI commands.

### 2. Install VS Code extensions for Retool development

Install the essential extensions that give VS Code superior capabilities compared to Atom for Retool development. Open the Extensions panel (Cmd+Shift+X) and install the following:

ESlint (dbaeumer.vscode-eslint) — provides real-time linting for JavaScript transformer functions and custom component code. Create an .eslintrc.json file in your project root to configure rules matching Retool's environment (browser globals, ES2022 syntax).

Prettier (esbenp.prettier-vscode) — automatic code formatting for JavaScript and JSON files. Configure it to format on save for consistent code style across your Retool codebase.

ES7+ React/Redux/React-Native Snippets (dsznajder.es7-react-js-snippets) — provides shorthand snippets for React component boilerplate used in Retool Custom Components (rafc for functional component, rh for React Hook patterns).

JSON (built-in) — VS Code's built-in JSON support with schema validation is significantly better than Atom's json package. Configure it to validate against Retool's app definition schema if available.

Thunder Client (rangav.vscode-thunder-client) — a lightweight REST API client built into VS Code for testing Retool resource configurations and API endpoints before writing Retool queries. This replaces the need to switch to Postman for API testing.

GitLens (eamodio.gitlens) — enhanced Git history and blame annotations, useful for tracking changes to transformer code and custom components over time.

```
// .eslintrc.json — recommended config for Retool transformer code
{
  "env": {
    "browser": true,
    "es2022": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "warn"
  },
  "globals": {
    "data": "readonly",
    "moment": "readonly",
    "_": "readonly",
    "query": "readonly"
  }
}
```

**Expected result:** ESLint, Prettier, React Snippets, Thunder Client, and GitLens are installed and active. Opening a JavaScript transformer file shows real-time linting with Retool-aware globals configured. The JSON editor validates Retool app definition files.

### 3. Set up the Retool CLI with VS Code for app version control

The Retool CLI allows you to pull app definitions from Retool as JSON files, edit them locally in VS Code, and push changes back. This workflow replaces Atom-based local editing with a VS Code-integrated approach that benefits from better JSON editing and Git tooling.

Install the Retool CLI globally: open the VS Code integrated terminal and run npm install -g retool-cli. After installation, authenticate by running retool login and following the prompts to connect to your Retool instance.

Create a local project directory for your Retool apps. Run retool apps list to see all available apps in your Retool instance, then retool apps pull --app 'Your App Name' to download the app definition as a JSON file into the current directory.

Open the downloaded JSON file in VS Code. The Retool app definition includes component trees, query configurations, event handlers, and transformer code — all stored as JSON. VS Code's JSON editor provides collapsible sections for navigating complex app definitions, making it much easier to find specific transformers or query configurations than in Atom's basic JSON support.

After making changes, run retool apps push to sync the modified definition back to Retool. Use Git (through VS Code's built-in Source Control panel or GitLens) to commit each change set with descriptive messages tracking what you changed in the app definition.

Configure VS Code's integrated terminal to auto-navigate to your Retool project directory by creating a workspace settings file (.vscode/settings.json) with the terminal.integrated.cwd setting pointed at your Retool project folder.

```
// .vscode/settings.json — workspace settings for Retool CLI projects
{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "terminal.integrated.cwd": "${workspaceFolder}",
  "json.schemas": [],
  "files.associations": {
    "*.retool.json": "json"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ]
}
```

**Expected result:** The Retool CLI is installed and authenticated. Running retool apps pull downloads app definitions as JSON files that VS Code opens with proper syntax highlighting. Running retool apps push syncs local changes back to Retool. Git tracks all changes through VS Code's Source Control panel.

### 4. Write and test Retool transformer code locally in VS Code

One of the most productive aspects of using a local editor for Retool development is writing and testing transformer JavaScript code before pasting it into Retool's query editor. VS Code makes this significantly more powerful than Atom with its built-in JavaScript execution capabilities.

Create a local directory named retool-transformers/ in your project. Create individual .js files for each transformer (e.g., flatten-orders.js, format-currency.js). Write transformer functions with the same signature they use in Retool: the function receives the raw data object and returns the formatted result.

Install the Quokka.js extension (wallabyjs.quokka-vscode) for inline JavaScript evaluation. With Quokka running, you can define a test data variable at the top of your transformer file and see the output of each expression inline in the editor as you type — no need to paste into Retool and click Run to see results.

Alternatively, write Jest unit tests for your transformers to verify they handle edge cases (null values, empty arrays, missing properties) before deploying to Retool. Create a transformer.test.js file alongside each transformer, import the function, and write test cases covering normal data, empty data, and malformed API responses.

When the transformer logic is tested and working locally, copy the function body into Retool's query Advanced tab transformer field. Remove the test scaffolding and keep only the data transformation logic. This test-first approach catches bugs locally rather than discovering them in production Retool apps.

```
// retool-transformers/flatten-orders.js
// Test locally with Quokka.js before pasting into Retool

// Simulate Retool's injected 'data' variable for local testing
const data = {
  orders: [
    { id: 1, customer: { name: 'Alice', email: 'alice@example.com' }, total: 4999, status: 'complete', created_at: '2024-01-15T10:00:00Z' },
    { id: 2, customer: { name: 'Bob', email: null }, total: 1200, status: 'pending', created_at: '2024-01-16T14:30:00Z' }
  ]
};

// Transformer function — this is what you paste into Retool
const orders = (data.orders || []);
return orders.map(order => ({
  id: order.id,
  customer_name: order.customer?.name || 'Unknown',
  customer_email: order.customer?.email || 'N/A',
  total: `$${(order.total / 100).toFixed(2)}`,
  status: order.status,
  created_at: new Date(order.created_at).toLocaleDateString()
}));

// Quokka.js will show inline results for each expression above
```

**Expected result:** Transformer functions written in VS Code execute inline with Quokka.js showing real-time output. Unit tests with Jest catch edge cases before the transformer is pasted into Retool. The Git repository contains both the app definitions and the transformer source files with test coverage.

## Best practices

- Migrate from Atom to Visual Studio Code immediately — Atom has been archived since December 2022 and receives no security updates, making it unsuitable for production development work.
- Use VS Code's ESLint extension with Retool-specific globals configured to catch undefined variable errors in transformer code before pasting into Retool's editor.
- Store Retool transformer functions as separate .js files in a Git repository with Jest unit tests, and paste only the tested final version into Retool's query transformer field.
- Use the Retool CLI to version-control app definitions as JSON files, with VS Code as the editor for making structured changes to component configurations and query logic.
- Install the Quokka.js extension for inline JavaScript evaluation when developing Retool transformer logic locally — seeing output values next to each line dramatically speeds up transformer development and debugging.
- Configure VS Code workspace settings (.vscode/settings.json) with tab size, formatter, and terminal working directory to create a consistent development environment for your entire team working on Retool apps.
- Use VS Code's built-in Source Control panel (GitLens extension for enhanced features) to maintain a commit history of transformer code changes, making it possible to roll back problematic transformer logic without losing other app changes.

## Use cases

### Migrate Retool Custom Component development from Atom to VS Code

If you used Atom to write React-based Retool Custom Components locally before uploading them to Retool's Custom Component editor, migrate this workflow to VS Code. VS Code adds TypeScript type checking, React IntelliSense, and ESLint integration that Atom required separate packages to approximate.

Prompt example:

```
Set up a VS Code workspace for Retool Custom Component development with the ESLint, Prettier, and ES7 React Snippets extensions installed, configure a tsconfig.json for the project with React JSX support, and use the integrated terminal for running the Retool CLI commands to sync app definitions.
```

### Version-control Retool app definitions with VS Code and Retool CLI

Teams that used Atom as their editor for working with Retool CLI exports can transition to VS Code with improved JSON schema validation for Retool's app definition format and better Git integration for managing app version history. VS Code's JSON editor shows schema violations inline rather than requiring manual inspection.

Prompt example:

```
Configure VS Code as the default editor for Retool CLI exports by running 'retool apps pull' to download app definitions, opening the JSON files in VS Code with the Retool JSON schema configured, editing query logic and component properties locally, then using 'retool apps push' to sync changes back to Retool.
```

### Write and test JavaScript transformer functions locally before Retool upload

Developers who used Atom's JavaScript environment to draft and test transformer functions before pasting them into Retool's code editor can replicate this workflow in VS Code with additional benefits: the Quokka.js extension provides inline JavaScript execution results, and the Jest extension allows writing unit tests for transformer logic before deploying to Retool.

Prompt example:

```
Create a VS Code project with transformer function files, install the Quokka.js extension for inline JavaScript evaluation, write unit tests for each transformer with Jest to validate the data reshaping logic, then copy the tested transformer code into Retool's query Advanced tab transformer field.
```

## Troubleshooting

### Atom packages are no longer receiving updates or have broken dependencies

Cause: GitHub archived the Atom project in December 2022, ending all official development. The Atom package registry (atom.io) and many community packages have stopped receiving updates, causing incompatibilities with newer operating systems and Node.js versions.

Solution: Migrate to Visual Studio Code immediately. Most Atom packages have VS Code equivalents with active maintenance. The VS Code Marketplace (marketplace.visualstudio.com) contains over 50,000 extensions maintained by their authors. The transition effort is minimal — VS Code's interface is deliberately similar to Atom's, and most keyboard shortcuts translate directly.

### Retool CLI push fails with JSON parse errors after editing app definitions in a text editor

Cause: Manually editing Retool's JSON app definition files in a text editor can introduce syntax errors (trailing commas, unclosed brackets) or formatting inconsistencies that prevent the Retool CLI from parsing and uploading the file.

Solution: Install the Prettier extension in VS Code and run Format Document (Shift+Alt+F) on the app definition JSON file before running retool apps push. Configure VS Code's JSON validator to highlight syntax errors before you attempt the push. Always run the CLI push command in small increments after each logical change rather than making many edits and pushing in bulk.

### Custom Component React code written in VS Code has TypeScript errors that don't appear in Retool's editor

Cause: Retool's built-in Custom Component editor has more permissive error checking than a properly configured VS Code TypeScript environment. Code that 'works' in Retool may have underlying type errors that surface in a stricter local TypeScript setup.

Solution: This is actually beneficial — VS Code's stricter checking catches real bugs before they appear at runtime in Retool. Fix the TypeScript errors locally to make the component code more robust. Configure tsconfig.json with strict: false initially to match Retool's looser environment, then gradually enable stricter checks as you fix underlying issues.

## Frequently asked questions

### Is Atom still usable for Retool development even though it was archived?

Technically Atom can still be installed and run, but it is strongly inadvisable for production development. GitHub archived Atom in December 2022, meaning no security patches, no bug fixes, and no package updates are being released. Many Atom packages have already broken on newer operating systems and Node.js versions. Using an archived, unmaintained editor for production code introduces security and compatibility risks that increase over time.

### How long does it take to migrate from Atom to VS Code?

For individual developers, the switch to VS Code typically takes less than an hour — install VS Code, install your essential extensions (ESLint, Prettier, GitLens), and configure your settings. VS Code's interface is deliberately similar to Atom's, and most common keyboard shortcuts are identical. The most time-intensive part is finding VS Code equivalents for any Atom-specific packages your workflow depended on.

### Can I use any text editor for writing Retool transformer code?

Yes. Retool transformer functions are plain JavaScript that you paste into Retool's query editor. Any text editor can be used to draft transformer code locally — the key requirement is that the code is syntactically valid JavaScript ES2022 before you paste it. VS Code and Sublime Text provide the best experience for this because of their JavaScript syntax highlighting and linting capabilities, but even a basic text editor works for simple transformers.

### What is the Retool CLI and do I need it for local development?

The Retool CLI (npm install -g retool-cli) is an optional tool for exporting Retool app definitions as JSON files, editing them locally, and pushing changes back. It is most useful for teams that need to version-control Retool apps in Git, manage app promotion across environments (staging to production), or make bulk configuration changes that are faster to edit in a text editor than through Retool's visual builder. For individual developers writing transformer code, the CLI is optional — you can simply paste code directly into Retool's code editor.

---

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