Code View

Use JavaScript alongside Spala's Gherkin, Visual, and Split views.

Code View

Use JavaScript alongside Spala's Gherkin, Visual, and Split views. Built-in steps round-trip cleanly between visual views and code; custom JavaScript is preserved as Custom Code when it cannot be represented as a built-in step.

The code view showing JavaScript for a function
Every function has a Code tab next to Gherkin, Visual, and Split.

How to switch

1. Open any function in the editor
2. Click the Code tab at the top
3. Edit the JavaScript directly
4. Switch back to Gherkin, Visual, or Split to review the function visually

Pro tip

Built-in steps stay connected across visual views and code. Unsupported JavaScript is preserved as Custom Code so you do not lose work.

What it looks like

Here is how common steps translate to JavaScript:

Set Variable:

let greeting = "Hello, " + input.name;

Database Query:

let cases = await db.query("SELECT * FROM cases WHERE client_id = $1", [vars.user.id]);

If/Else:

if (vars.cases.length === 0) {
  return { message: "No cases yet" };
}

Loop:

for (let caseRecord of vars.cases) {
  // steps inside the loop
}

When to use code view

- Complex expressions — Multi-line logic that is awkward in the properties panel
- Rapid prototyping — Writing code can be faster than dragging steps
- Copy-paste — Duplicate logic by copying code blocks
- Refactoring — Restructure function logic by editing code directly

When to use visual view

- Getting an overview — The visual editor shows function structure at a glance
- Configuring steps — The properties panel surfaces all options for each step type
- Collaboration — Visual functions are easier for non-coders to read and modify

Good to know

If you write JavaScript that does not map to a built-in step type (like a class definition), it gets wrapped in a Custom Code step. The code is preserved, but appears as a single block in the visual editor.

Create a Function
/flows/creating-flows
Build functions in the visual editor
Variables & Data
/flows/variables
Work with data in both views
Try & Runs
/flows/debugging
Test your functions