Visual Transformation Builder

Build complex payload transformations visually without writing code. See live previews and test with real webhook data.

Overview

Transforming webhook payloads often requires deep knowledge of JSONata, JavaScript, or Liquid templates. Our new Visual Transformation Builder makes it easy to:

• Map fields with drag-and-drop
• Preview transformations in real-time
• Test with actual webhook payloads
• Generate optimized transform code

Getting Started

1. Navigate to a route and click Add Transform
2. Select Visual Builder mode
3. Paste a sample payload or select from recent events
4. Start mapping fields

Features

Drag-and-Drop Field Mapping

Click a source field and drag it to the output structure. The builder generates the appropriate JSONata expression automatically.

Computed Fields

Add computed fields with common operations:

• String manipulation (uppercase, lowercase, trim, concat)
• Number operations (round, floor, multiply, divide)
• Date formatting (ISO, Unix timestamp, custom formats)
• Conditional logic (if/then/else)

Live Preview

See your transformation output update in real-time as you make changes. Test with different payloads to ensure your transform handles edge cases.

Code Export

When you're done, export the generated code in your preferred format:

• JSONata (recommended for most use cases)
• JavaScript (for complex logic)
• Liquid (for template-based transforms)

Example

Transform a Stripe webhook to a Slack message:

Input:

{
  "type": "payment_intent.succeeded",
  "data": {
    "object": {
      "amount": 2000,
      "currency": "usd",
      "customer": "cus_123"
    }
  }
}

Visual Mapping:

• data.object.amount → divide by 100 → amount
• data.object.currency → uppercase → currency
• Add static field text → "Payment received: $" + amount

Output:

{
  "text": "Payment received: $20.00 USD"
}

Learn More

• Transforms Guide
• JSONata Reference