How to Integrate Retool with Visual Studio Code

Install VS Code from code.visualstudio.com if you have not already. Open VS Code and install the following extensions from the Extensions panel (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows): 1. **ESLint** (dbaeumer.vscode-eslint) — real-time JavaScript error detection and code quality rules. Retool transformers are plain JavaScript, and ESLint catches common bugs like undefined variables, incorrect return statements, and unused imports before you deploy code. 2. **Prettier - Code Formatter** (esbenp.prettier-vscode) — automatic code formatting that enforces consistent style. Retool's built-in editor does not auto-format, so code written locally in VS Code with Prettier will be clean and readable. 3. **JavaScript (ES2022)** syntax highlighting is built into VS Code. No extension needed. 4. **GitLens** (eamodio.gitlens) — enhanced Git history view. Useful for understanding when Retool app JSON files were changed and by whom. Create a workspace folder for your Retool development work, for example ~/projects/retool-dev/. Inside it, create a transformers/ subdirectory for transformer JavaScript files and an apps/ subdirectory for exported Retool app JSON files. Open the workspace folder in VS Code (File → Open Folder). In the workspace root, initialize a Node.js project: open the integrated terminal (Ctrl+`) and run `npm init -y`. Then install development dependencies: `npm install --save-dev eslint prettier`. Create an .eslintrc.json file with basic settings to match Retool's JavaScript environment.

1// .eslintrc.json — ESLint config for Retool transformer development
2{
3  "env": {
4    "es2022": true,
5    "browser": true
6  },
7  "extends": "eslint:recommended",
8  "parserOptions": {
9    "ecmaVersion": 2022
10  },
11  "rules": {
12    "no-unused-vars": "warn",
13    "no-console": "warn",
14    "no-undef": "warn"
15  },
16  "globals": {
17    "data": "readonly",
18    "moment": "readonly",
19    "_": "readonly",
20    "utils": "readonly"
21  }
22}

The Retool CLI (retool-cli) is the official command-line tool for managing Retool apps from your terminal. It supports exporting app definitions to JSON, importing updated definitions, listing apps, and scaffolding Custom Components. In VS Code's integrated terminal, install the Retool CLI globally: ``` npm install -g retool-cli ``` Verify installation: ``` retool --version ``` To authenticate the CLI with your Retool instance, generate an API token in Retool: 1. Go to your Retool instance → Settings (gear icon) → API Keys. 2. Click 'Create New API Key'. Give it a name like 'VS Code CLI' and set permissions to Apps (Read and Write). 3. Copy the generated token — it is shown only once. In VS Code's terminal, run: ``` retool login ``` The CLI prompts for your Retool instance URL (e.g., `https://yourcompany.retool.com` for Cloud, or your self-hosted domain) and the API token. Enter both when prompted. The CLI saves these credentials in ~/.retoolrc on your machine. For teams working with Retool self-hosted instances behind a VPN, ensure you are connected to the VPN before running Retool CLI commands — the CLI must reach your Retool instance over HTTPS.

1// package.json scripts for common Retool CLI operations
2{
3  "scripts": {
4    "retool:export": "retool apps export --name \"My App Name\" --output ./apps/my-app.json",
5    "retool:import": "retool apps import --file ./apps/my-app.json",
6    "retool:list": "retool apps list",
7    "retool:components:scaffold": "retool components scaffold MyComponent --output ./components/"
8  }
9}

The most immediate benefit of using VS Code for Retool development is writing JavaScript transformer functions with proper tooling. Transformers in Retool take query result data as input (`data`) and return a transformed array or object. In your VS Code workspace's transformers/ folder, create a file named `userTransformer.js`. Write the transformer function as if `data` is already defined (matching Retool's transformer runtime): To test the transformer locally without Retool, add a test block at the bottom of the file wrapped in a conditional. Use Node.js to run the file and verify the output before copying it to Retool. For more structured testing, install Jest (`npm install --save-dev jest`) and create corresponding test files in a __tests__/ folder. Each test imports the transformer function and validates its output against sample API response fixtures stored as JSON files. Once the transformer logic is validated locally: 1. Open your Retool app in the browser. 2. Open the relevant query in the Code panel. 3. Go to the query's Advanced tab → enable 'Run transformer' toggle. 4. In the transformer editor, paste the transformer function body (without the `const data =` mock block). 5. Click Save and verify the Table or component data updates correctly. This workflow eliminates the trial-and-error cycle of debugging transformers inside Retool's browser editor, where you would otherwise need to repeatedly trigger queries to see the effect of code changes.

1// transformers/userTransformer.js
2// Retool transformer: reshape API user response for display
3// In Retool, 'data' is provided automatically by the query runtime
4
5// For local testing only — remove this block when pasting into Retool:
6const data = require('../data/sample_users.json');
7
8// Transformer function (paste this part into Retool's transformer editor)
9const users = Array.isArray(data) ? data : (data.users || data.results || []);
10
11return users
12  .filter(user => user.status !== 'deleted')
13  .map(user => ({
14    id: user.id || user._id,
15    name: user.name || `${user.first_name} ${user.last_name}`.trim() || 'Unknown',
16    email: (user.email || '').toLowerCase(),
17    status: user.status || 'unknown',
18    plan: user.subscription?.plan || user.plan || 'free',
19    created: user.created_at
20      ? new Date(user.created_at).toLocaleDateString('en-US')
21      : 'N/A',
22    last_active: user.last_seen_at
23      ? new Date(user.last_seen_at).toRelativeString?.() ||
24        new Date(user.last_seen_at).toLocaleDateString()
25      : 'Never'
26  }))
27  .sort((a, b) => a.name.localeCompare(b.name));

The Retool CLI's `apps export` command downloads a Retool app's definition as a JSON file that can be opened and edited in VS Code, committed to Git, and imported back into Retool. Export an app: in VS Code's terminal, run: ``` retool apps export --name "My App Name" --output ./apps/my-app.json ``` The exported JSON file contains the complete app definition: component tree, query definitions, event handlers, transformer code, layout settings, and permissions. It is typically hundreds to thousands of lines long. Open it in VS Code and explore the structure — transformer code appears as strings within the JSON. To version-control the exported file: ``` git add apps/my-app.json git commit -m "feat: add date range filter to orders dashboard" ``` To edit transformer code embedded in the exported JSON, use VS Code's search (Cmd+F) to find the transformer by name within the JSON file. Edit the JavaScript string value carefully — be aware that newlines must be escaped as `\n` within JSON strings. To import an updated app definition back into Retool: ``` retool apps import --file ./apps/my-app.json ``` This creates a new version of the app in Retool. Retool keeps version history internally, but the Git history in VS Code provides a more accessible record of what changed, who changed it, and why. For teams where multiple developers modify the same Retool app, establish a convention: the Retool GUI is the source of truth for live app edits, and app exports to Git are snapshots for audit and disaster recovery — not a live bidirectional sync.

1// .gitignore for a Retool development workspace
2node_modules/
3.env
4*.log
5
6# Retool CLI cache
7.retoolrc
8
9# Keep app JSON exports in Git (intentional)
10# apps/*.json  <-- do NOT add this, we want to track these files

Retool Custom Components are fully custom React components that embed directly inside Retool apps. They receive data from Retool queries via props and can trigger Retool queries and event handlers through a model/trigger API. VS Code is the natural IDE for developing Custom Components, which involve React, JSX, and sometimes npm packages. Create a new Custom Component scaffold using the Retool CLI: ``` retool components scaffold MyChart --output ./components/ ``` This creates a component directory with: - `src/index.jsx` — the React component entry point - `package.json` — npm dependencies - `retool.config.json` — component metadata and prop definitions Open the directory in VS Code. Install component dependencies: ``` npm install ``` Edit `src/index.jsx` to implement your component. The scaffold provides the Retool model object with `model` (incoming data from Retool) and `modelUpdate` (function to send data back to Retool). For example: ```jsx import React from 'react'; export default function MyChart({ model, modelUpdate }) { const data = model.chartData || []; return ( <div style={{ height: model.height || 300 }}> {/* Your chart implementation */} </div> ); } ``` Test the component locally: ``` npm run dev ``` Deploy to Retool when ready: ``` retool components deploy ``` After deployment, the Custom Component appears in Retool's Component panel under 'Custom' for use in any app. The source code remains in VS Code and can be version-controlled in Git like any React project.

1// src/index.jsx — Retool Custom Component scaffold
2import React, { useEffect, useRef } from 'react';
3
4export default function CustomDataViz({ model, modelUpdate }) {
5  const containerRef = useRef(null);
6
7  // model.data is set by Retool via the component's model binding
8  const chartData = model.data || [];
9  const title = model.title || 'Chart';
10
11  // Notify Retool when user interacts with the component
12  const handleRowClick = (row) => {
13    modelUpdate({ selectedRow: row });
14  };
15
16  return (
17    <div style={{ padding: '16px', fontFamily: 'sans-serif' }}>
18      <h3 style={{ marginBottom: '12px' }}>{title}</h3>
19      <ul style={{ listStyle: 'none', padding: 0 }}>
20        {chartData.map((item, i) => (
21          <li
22            key={i}
23            onClick={() => handleRowClick(item)}
24            style={{ padding: '8px', cursor: 'pointer', borderBottom: '1px solid #eee' }}
25          >
26            {item.label}: {item.value}
27          </li>
28        ))}
29      </ul>
30    </div>
31  );
32}