Visual Transformation Builder: No-Code JSONata Made Easy

The Challenge with Code-First Transforms

JSONata is incredibly powerful. With a few lines of code, you can reshape, filter, and transform JSON data in ways that would take dozens of lines in traditional programming languages. But there's a catch: JSONata has a learning curve, and for teams where not everyone writes code, that curve can be a barrier.

Today, we're launching the Visual Transformation Builder:a no-code interface that lets anyone on your team build production-ready transformations without writing a single line of JSONata.

How It Works

The Visual Builder is a full-page experience with three main areas:

Left Panel : Configure your transform name, paste sample input JSON, and browse the operation palette

Center Panel : Your configured operations, displayed as cards you can drag to reorder

Right Panel : Live preview showing your input and output, plus a Code tab with the generated JSONata

The Workflow

1. Paste sample JSON : The builder automatically detects all available fields
2. Add operations : Click operations from the palette to add them
3. Configure each operation : Smart autocomplete suggests fields based on your input
4. See results instantly : The preview updates in real-time as you build
5. Save your transform : The generated JSONata is stored and ready to use

No JSONata knowledge required. No documentation needed. Just point, click, and transform.

11 Powerful Operations

The Visual Builder supports the full range of transformation patterns:

Data Mapping

Field Mapping : The foundation. Map an input field to an output key with optional default values.

$.data.user.email → customerEmail

Constant Value : Add static values to your output (strings, numbers, booleans, or null).

Array Operations

Array Map : Transform each item in an array. Supports nested field mappings within items.

$.order.items → items (with name, quantity, price per item)

Array Filter : Keep only items matching your conditions. Supports 10+ operators including equals, contains, regex, greater than, and exists.

Logic & Conditions

Conditional : If/then/else logic based on field values.

If $.status = "shipped" then "dispatched" else "pending"

Object Manipulation

Merge Objects : Combine multiple objects into one. Later objects override earlier ones.

Wrap in Object : Wrap a value in a new object with a custom key.

Wrap in Array : Wrap a value in an array.

Text & Numbers

String Concat : Join multiple fields and literal text with optional separators.

$.firstName + " " + $.lastName → fullName

Math Operation : Arithmetic between numeric fields (+, -, *, /, %).

Type Convert : Convert values to string, number, or boolean.

Smart Features That Save Time

Automatic Schema Detection

Paste your sample JSON and the builder immediately identifies every available field:including nested objects and array elements. No manual path entry required.

Type-Aware Autocomplete

Start typing a field path and get instant suggestions. Each suggestion shows:

• The full path ($.order.items[].name)
• The field type (string, number, array, object)
• A sample value from your input ("Widget Pro")

For array operations, only array fields are suggested. For math operations, numeric fields are prioritized.

Live Preview

Every change triggers an automatic preview (with smart 500ms debouncing). See exactly what your transformation produces before saving. Errors are displayed inline so you can fix issues immediately.

Drag-to-Reorder

Operations execute in order from top to bottom. Need to change the sequence? Just drag and drop. The preview updates instantly to reflect the new order.

Code Tab Access

Power users can switch to the Code tab at any time to see the generated JSONata. You can even edit it directly for fine-tuning.

Example: Transforming an Order Webhook

Let's say you receive this order webhook:

{
  "order": {
    "id": "ord_12345",
    "status": "processing",
    "items": [
      { "name": "Widget", "qty": 2, "price": 29.99 },
      { "name": "Gadget", "qty": 1, "price": 49.99 }
    ]
  },
  "customer": {
    "email": "[email protected]",
    "name": "Jane Doe"
  }
}

Using the Visual Builder, you add these operations:

1. Field Mapping: $.order.id → orderId
2. Field Mapping: $.customer.email → email
3. Conditional: If $.order.status = "shipped" then "dispatched" else "pending" → status
4. Array Map: $.order.items with nested mappings for name and qty → lineItems

The builder generates this JSONata:

{
  "orderId": $.order.id,
  "email": $.customer.email,
  "status": ($.order.status = "shipped" ? "dispatched" : "pending"),
  "lineItems": $.order.items.({
    "name": name,
    "quantity": qty
  })
}

All without writing a single character of code.

Who Is This For?

Non-developers who need to configure webhook integrations without waiting for engineering resources.

Developers who want to quickly prototype transforms before fine-tuning the code.

Teams where multiple people manage integrations and need a shared, visual interface.

Anyone who finds JSONata's syntax intimidating but needs its power.

Try It Now

The Visual Transformation Builder is available today for all Hookbase users.

1. Navigate to Transforms in your dashboard
2. Click Visual Builder
3. Paste sample JSON from your webhook source
4. Start adding operations
5. Watch your transformation come to life

Already have transforms written in JSONata? They'll continue to work exactly as before. The Visual Builder is an additional tool, not a replacement.

Ready to transform webhooks without the code? Open the Visual Builder and start building.