How to Integrate Retool with Sublime Text

To get the most out of Sublime Text for Retool development, you need a few key packages installed via Package Control. If Package Control is not already installed, open Sublime Text's command palette with Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux), type 'Install Package Control', and press Enter. Wait a moment for it to install — you may need to restart Sublime Text. Once Package Control is installed, open the command palette again and type 'Package Control: Install Package', then press Enter. A searchable package list will appear. Install these packages one at a time: JSPrettier (auto-formats JavaScript using Prettier, keeping transformer functions clean and consistently indented), SublimeLinter (framework for linting in Sublime Text), SublimeLinter-jshint (JavaScript linting to catch undefined variables and syntax errors before pasting into Retool), and Emmet (HTML abbreviation expander, essential for writing Custom Component HTML quickly). After installing all packages, go to Preferences → Package Settings → JSPrettier → Settings — User and add a configuration to match Retool's 2-space indent style and single-quote preference. Restart Sublime Text after package installation to ensure all packages activate correctly.

1{
2  "prettier_cli_path": "",
3  "auto_format_on_save": false,
4  "prettier_options": {
5    "printWidth": 100,
6    "tabWidth": 2,
7    "singleQuote": true,
8    "semi": true,
9    "trailingComma": "es5"
10  }
11}

Organize your Retool transformer functions in a local folder structure so they are easy to find, version, and reuse across apps. Create a folder in your development directory named retool-transformers or similar. Inside, create subdirectories organized by Retool app name or by function purpose (e.g., /data-cleaning, /api-response-parsers, /chart-formatters). Each file in these directories contains a single transformer function. Open this folder in Sublime Text by going to File → Open Folder, which loads it as a project with a sidebar showing all files. Create a new file for each transformer, name it descriptively (e.g., flatten-stripe-charges.js), and set the syntax to JavaScript via the bottom status bar → Plain Text → JavaScript. Write your transformer function in the standard Retool pattern: a JavaScript expression where the data variable holds the raw query results and the return value replaces queryName.data. Include a comment at the top of each file explaining which Retool app and query the transformer belongs to, which resource it operates on, and what the input and output shapes look like. This makes it easy to find the right file when you need to update a transformer months later.

1// App: Customer Dashboard
2// Query: getStripeCharges
3// Input: raw Stripe /v1/charges list response
4// Output: flat array of charge objects for Table component
5
6const charges = data.data || [];
7
8return charges.map(charge => ({
9  id: charge.id,
10  amount: `$${(charge.amount / 100).toFixed(2)}`,
11  currency: charge.currency.toUpperCase(),
12  status: charge.status,
13  customer_email: charge.billing_details?.email || 'N/A',
14  created: new Date(charge.created * 1000).toLocaleDateString(),
15  description: charge.description || ''
16}));

The core workflow loop is: write transformer logic in Sublime Text, format it, verify it, then paste into Retool. Open one of your transformer .js files in Sublime Text. Write the JavaScript function body — remember that Retool transformers are expressions, not complete function definitions. You have access to the data variable containing raw query results, and your code's return value becomes the new .data property of the query. Write the logic, using Sublime Text's multi-cursor editing (Cmd+click or Ctrl+click on multiple points) to efficiently edit repetitive patterns like mapping object keys. When the logic is complete, trigger JSPrettier by opening the command palette with Cmd+Shift+P and typing 'JSPrettier: Format JavaScript', then pressing Enter. The code reformats instantly with consistent indentation and spacing. Review the formatted output, then select all the code with Cmd+A and copy it with Cmd+C. Switch to your Retool browser tab, open the app, navigate to the Code panel at the bottom, and click on the query whose transformer you want to update. Click the 'Advanced' tab and scroll to the Transform results section. If the toggle is off, turn it on. Click inside the transformer code area, select all existing content, and paste your code. Click 'Run' to execute the query with the new transformer and verify the output in the right-hand results pane.

1// Before formatting (written in Sublime Text)
2const rawItems = data.items||[];
3return rawItems.filter(item=>item.active===true).map(item=>({id:item.id,name:item.name||'N/A',price:item.price_money?`$${(item.price_money.amount/100).toFixed(2)}`:'Free',category:item.category_id||'Uncategorized'}));

For teams that use the Retool CLI to manage app definitions as code, Sublime Text becomes the primary editor for reviewing and modifying exported JSON files. First, install the Retool CLI globally using npm (run npm install -g retool-cli in your terminal). Authenticate with retool login and configure your organization URL. Create a local directory for your Retool app definitions and run retool apps pull to export your apps as JSON files — each app exports as a single JSON file containing all components, queries, transformers, and event handler configurations. Open the exported directory in Sublime Text (File → Open Folder). App definition files are deeply nested JSON with a structure following Retool's internal schema. Use Sublime Text's JSON folding (click the triangle icons in the gutter) to collapse sections you do not need to edit. Use Cmd+F to search for specific component names or query names within the large JSON file. When you need to make bulk changes — such as updating a resource name across all queries in an app after renaming a Resource in Retool — Sublime Text's Find and Replace (Cmd+H) with regex mode makes this straightforward. After editing, format the JSON with Cmd+Shift+P → 'Reindent Lines' and validate it is valid JSON before running retool apps push to re-import the modified app definition back into Retool.

Retool Custom Components allow you to embed arbitrary HTML, CSS, and JavaScript inside a Retool app using an iframe. They are typically written as a single HTML file with embedded styles and scripts. Sublime Text is well-suited for this because Custom Components are self-contained HTML documents that benefit from Emmet's abbreviation system and syntax highlighting for all three languages (HTML, CSS, JavaScript) in one file. Create a file with a .html extension in your transformers project folder. Set the syntax to HTML. At the top of the file, write the standard Retool Custom Component boilerplate: an HTML document structure with a script tag that imports Retool's Custom Component SDK from the Retool CDN, and the initialization code that calls Retool.subscribe() to receive model data from the parent Retool app. Use Emmet to generate HTML structure quickly — type an Emmet abbreviation like div.chart-container>canvas#myChart and press Tab to expand it. Write your component's CSS in a style tag and JavaScript in a script tag within the same file. When the component is complete, select all (Cmd+A), copy (Cmd+C), switch to Retool, open or create a Custom Component in your app, click 'Edit source', select all existing code in the editor, and paste your component. Click 'Save' to apply the component. The component renders immediately in Retool's preview, receiving data from any query you bind to it via the model.

1<!DOCTYPE html>
2<html>
3<head>
4  <style>
5    body { margin: 0; font-family: sans-serif; }
6    .container { padding: 16px; }
7    .metric { font-size: 2rem; font-weight: bold; color: #2563eb; }
8    .label { font-size: 0.875rem; color: #6b7280; margin-top: 4px; }
9  </style>
10</head>
11<body>
12  <div class="container">
13    <div class="metric" id="value">—</div>
14    <div class="label" id="label">Loading...</div>
15  </div>
16  <script src="https://cdn.tryretool.com/js/custom-component.js"></script>
17  <script>
18    Retool.subscribe(function(model) {
19      document.getElementById('value').textContent = model.value || '—';
20      document.getElementById('label').textContent = model.label || 'Metric';
21    });
22  </script>
23</body>
24</html>