Visual Body Editor

Configure complex JSON body injection visually with drag-and-drop. No template syntax required.

What is the Visual Body Editor?

The Visual Body Editor is a drag-and-drop interface for injecting values (like secrets) into specific locations in your JSON request body. Traditional way (manual templates):

{
  "api_key": "{{secret:stripe_key}}",
  "user": {
    "id": 123,
    "token": "{{secret:user_token}}"
  }
}

Manual JSON editing with template syntax Visual way:

Capture or paste an example JSON payload
Drag injection rules onto specific fields
KnoxCall builds the template automatically

Perfect for complex nested payloads!

When to Use This Feature

Use Visual Editor When:

✅ You have complex nested JSON structures
✅ You need to inject multiple secrets at different depths
✅ You want to see the exact structure visually
✅ You’re not comfortable with JSON template syntax
✅ You need to inject values into deeply nested objects

Use Manual Template When:

⚠️ Simple flat JSON payloads (1-2 fields)
⚠️ You prefer writing JSON directly
⚠️ Dynamic payloads that vary by request

How It Works

1. Capture or paste example JSON payload
     ↓
2. KnoxCall parses structure and identifies all paths
     ↓
3. Create injection rules (key-value pairs)
     ↓
4. Drag rules onto specific JSON fields
     ↓
5. KnoxCall generates template automatically
     ↓
6. Backend receives requests with injected values

Step-by-Step Guide

Step 1: Open Route Configuration

Navigate to Routes
Click your route
Go to Configuration tab (or Method Configs for method-specific body)
Scroll to Body Injection section

Step 2: Capture or Paste Payload

You have two options:

Option A: Capture Live Request (Recommended)

Best for APIs you can actually call.

Click Capture Payload
Choose Live Request
Copy the unique capture URL
Send a POST request to that URL with example payload:

curl -X POST "https://a1b2c3d4.DunderMifflin.knoxcall.com/capture/abc123..." \
  -H "Content-Type: application/json" \
  -d '{
    "payment": {
      "amount": 1000,
      "currency": "usd",
      "source": "tok_visa"
    },
    "customer": {
      "email": "customer@example.com",
      "name": "John Doe"
    }
  }'

KnoxCall automatically captures the structure

Who can retrieve a live capture. The request you send to the capture URL is captured traffic, so retrieving it is a reveal: only the Owner and Admins can, and each retrieval asks for a fresh second factor (an authenticator code, a passkey or a security key) and is recorded in the audit log before the request comes back. An Editor’s capture is refused when the request arrives (only the person holding the capture link can retrieve it, and a capture expires after 5 minutes), so an Editor uses Paste JSON below, which reveals nothing and works for every role that can edit the route. The sample saved from a capture is behind the same rule: see What the editor shows below.

Option B: Paste JSON (Faster)

Best when you already have example JSON.

Click Capture Payload
Choose Paste JSON
Paste your example JSON:

{
  "payment": {
    "amount": 1000,
    "currency": "usd",
    "source": "tok_visa",
    "api_key": ""
  },
  "customer": {
    "email": "customer@example.com",
    "name": "John Doe"
  }
}

Click Submit Payload

Tip: Use realistic example data. The structure you provide becomes your template. Any fields you add later won’t have drop zones unless you recapture.

What the editor shows: the structure, not the values

A saved sample is usually a real request, so the dashboard shows it as its structure: every key and every level of nesting, with each value replaced by its type — "<string>", "<number>" or "<boolean>" (null stays null, and a list keeps each item, shown the same way). That is everything the editor needs: every field is still a drop zone, and rules are assigned to paths exactly as before. This is the same for every role, and for the person who pasted the sample — saving stores what you sent, and reading it back shows its structure.

Payload Structure:
payment
  amount: <number>
  currency: <string>
  source: <string>
customer
  email: <string>
  name: <string>

Seeing the values. The Owner and Admins see an eye button on the Body card. Clicking it reveals the saved values for the environment (and, in method-specific mode, the method) on screen: it asks for an optional reason and a fresh second factor (an authenticator code, a passkey or a security key), and is recorded in the audit log before the values are shown. Values under sensitive-looking field names (authorization headers, API keys, card numbers) stay masked even then. The values are hidden again when you switch environment or method, or save. Editors and Viewers cannot reveal them, and the Management API (/v1) never returns them. The eye button appears only for a sample that is saved where you are looking. A method with no sample of its own shows the route’s default structure, and an environment with no sample of its own shows the base environment’s; there are no values to reveal for either, so the card says so instead of offering the button.

Step 3: Create Injection Rules

Injection rules are key-value pairs you’ll drag onto your JSON structure.

Click + Add Injection Rule
Enter Key (field name to inject):
api_key
Enter Value (what to inject):
{{secret:stripe_prod_key}}
Or click 🔑 Secrets button to pick from dropdown
Click Add Rule

Example rules:

Key	Value	Purpose
api_key	`{{secret:stripe_key}}`	Stripe API key
auth_token	`{{secret:user_token}}`	User auth token
webhook_secret	`{{secret:webhook_secret}}`	Webhook signing
customer_id	`{{var:customer_id}}`	From query param

Variables work too! Use {{var:param_name}} to inject query parameters from the incoming request.

Step 4: Drag Rules onto JSON Structure

Now the fun part - visually place your injection rules. The interface shows:

Top section: List of injection rules (draggable)
Bottom section: Your JSON payload structure (drop zones)

To assign a rule:

Click and hold an injection rule from the top
Drag it over the JSON structure below
Drop it onto a specific field

Drop indicators:

Blue line above = Drop before this field
Blue line below = Drop after this field
“DROP AS CHILD →” badge = Drop inside nested object

Example:

Injection Rules (top):
┌─────────────────────────────────────────┐
│ ⋮⋮ api_key: {{secret:stripe_key}}      │ ← Drag this
└─────────────────────────────────────────┘

Payload Structure (bottom):
payment                                     ← Drop zone
  amount: 1000
  currency: usd
  [Drop here to inject as child] ⬇️

After drop:
payment
  amount: 1000
  currency: usd
  ✓ INJECTED api_key: {{secret:stripe_key}} ← Injected!

Step 5: Assign Nested Fields

For nested objects, you can inject at any depth: Example structure:

user
  profile
    settings
      notifications
        email: true
        sms: false

Drag rule onto notifications with “DROP AS CHILD”:

user
  profile
    settings
      notifications
        email: true
        sms: false
        ✓ INJECTED token: {{secret:notification_token}}

Result JSON path: user.profile.settings.notifications.token

Step 6: Save Route

Click Save or Update Route Your body injection template is now configured!

Understanding Injection Rules

Rule Components

Each injection rule has three properties: 1. Key (Required)

The field name to inject
Example: api_key, token, customer_id
Shows in the final JSON

2. Value (Required)

The value to inject
Can be:
- Secret: {{secret:stripe_key}}
- Variable: {{var:user_id}}
- Static: "production"
- Mixed: Bearer {{secret:token}}

3. Path (Auto-assigned by drag-drop)

Where in the JSON to inject
Example: payment.details.api_key
Automatically set when you drop the rule
Can be empty if not assigned yet

Rule States

Unassigned (gray):

⋮⋮ api_key: {{secret:stripe_key}}     Not assigned ⚠️

Rule exists but not placed in JSON structure Assigned (green):

⋮⋮ api_key: {{secret:stripe_key}}     @ payment.api_key ✓

Rule assigned to payment.api_key path

Unassigned rules are not injected! Only rules with a path (assigned via drag-drop) are included in requests.

Managing Rules

Reorder Rules (Drag Within JSON)

To move a rule to a different location:

Find the green ✓ INJECTED box in your JSON structure
Drag it to a new location
Drop on a different field

The rule updates to the new path automatically.

Remove Rule Assignment

To unassign a rule (without deleting it):

Click Remove button on the green ✓ INJECTED box
Rule moves back to unassigned list (top section)
Can be reassigned later by dragging again

Delete Rule Completely

To permanently delete a rule:

Click Remove button in the Injection Rules list (top section)
Rule is deleted entirely
If it was assigned, it’s removed from JSON structure too

Edit Existing Rule

Currently, rules cannot be edited after creation. To change:

Delete the existing rule
Create a new rule with updated values
Drag onto the same location

Example Use Cases

Use Case 1: Payment API with Nested Secrets

Goal: Inject Stripe key and webhook secret at different depths Example payload:

{
  "payment": {
    "amount": 5000,
    "currency": "usd",
    "api_key": ""
  },
  "webhook": {
    "url": "https://example.com/webhook",
    "secret": ""
  }
}

Injection rules:

Key	Value	Path
api_key	`{{secret:stripe_prod_key}}`	payment.api_key
secret	`{{secret:webhook_secret}}`	webhook.secret

Result (what backend receives):

{
  "payment": {
    "amount": 5000,
    "currency": "usd",
    "api_key": "sk_live_EXAMPLE_abc123xyz789..."
  },
  "webhook": {
    "url": "https://example.com/webhook",
    "secret": "whsec_def456..."
  }
}

Use Case 2: User Profile with Dynamic Variables

Goal: Inject user-specific tokens from query params Example payload:

{
  "user": {
    "profile": {
      "email": "user@example.com"
    },
    "auth": {
      "token": ""
    }
  }
}

Incoming request:

GET /api/user?user_id=12345

Injection rules:

Key	Value	Path
token	`{{secret:api_token}}`	user.auth.token
id	`{{var:user_id}}`	user.id

Result:

{
  "user": {
    "id": "12345",
    "profile": {
      "email": "user@example.com"
    },
    "auth": {
      "token": "bearer_abc123..."
    }
  }
}

Use Case 3: Multi-Service Request

Goal: Call multiple services with different API keys in one payload Example payload:

{
  "stripe": {
    "key": "",
    "action": "charge"
  },
  "sendgrid": {
    "key": "",
    "action": "send"
  },
  "twilio": {
    "key": "",
    "action": "sms"
  }
}

Injection rules:

Key	Value	Path
key	`{{secret:stripe_key}}`	stripe.key
key	`{{secret:sendgrid_key}}`	sendgrid.key
key	`{{secret:twilio_key}}`	twilio.key

All secrets injected at different paths with the same key name!

Editing Payload Structure

Recapture Payload

If your API payload structure changed:

Click Recapture button (next to payload structure)
Send new request or paste updated JSON
⚠️ Warning: Existing rule assignments are lost
Drag rules onto new structure again

Recapturing clears all rule assignments! Save your rule list somewhere if you need to reference it. The rules themselves aren’t deleted, but their path assignments are cleared.

Edit Payload Manually

For small tweaks:

Click Edit button
Modify JSON structure directly
Save
Reassign rules if paths changed

The editor opens on what the page shows: the structure, or the values if an Owner or Admin revealed them first. Saving it unchanged keeps the stored values (so changing only the rules loses nothing). Saving an edited structure stores what you typed — so to keep the values while you edit, reveal them first. Copying one method’s configuration to another, or syncing an environment’s configuration from another environment, copies the structure, not the values (a target sample with the same structure keeps its own values); duplicating an environment copies the values too.

Delete Payload Structure

To start over:

Click Delete button
Confirm deletion
All rule assignments cleared
Can capture new payload structure

Advanced Features

Nested Object Injection

Drop rules into nested objects: Drag rule to right side of parent:

user                    ← Hover here
  email: test@example.com
  [DROP AS CHILD →] appears

Result:

user
  email: test@example.com
  ✓ INJECTED token: {{secret:token}}  ← Added as child

Multiple Rules on Same Level

You can inject multiple fields at the same nesting level:

payment
  amount: 1000
  ✓ INJECTED api_key: {{secret:stripe_key}}
  ✓ INJECTED merchant_id: {{secret:merchant_id}}
  ✓ INJECTED webhook_secret: {{secret:webhook_secret}}

All three injected as children of payment.

Parent Path Requirements

Important: When injecting into nested paths, the parent objects must exist in the incoming request or be defined in your payload structure.Example:

Injection path: user.profile.token
Incoming request must have user.profile object (even if empty)
Otherwise injection fails silently

The editor shows warnings for nested injections:

profile
  ✓ INJECTED token: {{secret:token}}
  ⚠️ Parent key "user" must exist in request

Combining with Method Configs

You can use visual body editor per HTTP method: GET method: No body injection (GET has no body) POST method:

Payload: User creation structure
Inject: write_api_key, create_token

PUT method:

Payload: User update structure
Inject: update_api_key, version_token

DELETE method:

Payload: Deletion confirmation
Inject: delete_token, admin_key

Each method gets its own visual body editor with separate:

Payload structure
Injection rules
Drop zone assignments

See Method-Specific Config for details.

Troubleshooting

Issue: “Drag not working”

Causes:

Browser compatibility (use Chrome/Edge/Firefox)
JavaScript disabled
Conflicting browser extensions

Fix:

Try different browser
Disable ad blockers temporarily
Clear browser cache

Issue: “Drop indicator not showing”

Symptoms: Can’t see blue line or “DROP AS CHILD” badge Causes:

Not dragging an actual rule
Dragging too fast
CSS rendering issue

Fix:

Drag slowly and hover over fields
Wait for indicator to appear
Refresh page

Issue: “Rule not injected in requests”

Symptoms: Backend doesn’t receive injected field Debug:

Check rule is assigned (shows green with path)
Check rule appears in JSON structure (green ✓ INJECTED box)
Test route with Route Tester
View request details in logs
Verify secret exists if using {{secret:name}}

Common cause: Rule created but never dragged onto structure (unassigned).

Issue: “Parent key must exist” warning

Symptoms: Injecting into nested path like user.profile.token Cause: Incoming requests don’t always have user.profile object Fix:

Ensure incoming requests include parent object:
{ "user": { "profile": {} } }
Or inject at root level instead of nested
Or use method configs to define base structure

Issue: “Payload structure deleted my rules”

Symptoms: Recaptured payload and rules disappeared Actually: Rules still exist but assignments cleared Fix:

Rules are in top Injection Rules list
Drag them onto new payload structure
Save route
To prevent: Don’t recapture unnecessarily

Best Practices

1. Use Realistic Example Payloads

✅ Good:

{
  "order": {
    "items": [{"id": 123, "qty": 2}],
    "total": 50.00,
    "currency": "USD"
  }
}

Real structure with actual data types ❌ Bad:

{
  "order": {}
}

Empty - won’t show nested fields

2. Name Rules Descriptively

✅ Good:

stripe_api_key
sendgrid_auth_token
user_webhook_secret

❌ Bad:

key1
secret
token

3. Test After Configuration

Always test with Route Tester:

Configure visual body editor
Click Test Route
Send test request
Verify injected fields in Request Details section
Check backend received correct values

4. Document Your Structure

In route description, note the payload structure:

Stripe Payments Route

Body structure:
- payment.api_key → Stripe production key
- payment.webhook_secret → Webhook verification
- customer.id → From query param user_id

Helps team members understand the configuration.

5. Use Variables for Dynamic Values

Don’t hardcode dynamic data: ❌ Bad:

{
  "user_id": "12345"
}

✅ Good:

{
  "user_id": "{{var:user_id}}"
}

Inject from query parameter

6. Organize Rules by Service

Group related rules:

Injection Rules:
├─ Stripe:
│  ├─ stripe_api_key
│  └─ stripe_webhook_secret
├─ SendGrid:
│  └─ sendgrid_api_key
└─ Internal:
   └─ app_secret

Limitations

Arrays Not Fully Supported

The editor shows arrays but doesn’t let you inject into array items: Structure:

{
  "items": [
    {"id": 1, "name": "Item 1"},
    {"id": 2, "name": "Item 2"}
  ]
}

Can inject: Root or items level Cannot inject: Specific array item like items[0].name Workaround: Use manual template editing for array injection.

Max Nesting Depth: 10 Levels

Payloads deeper than 10 levels may not render properly:

{
  "a": { "b": { "c": { "d": { "e": { "f": { "g": { "h": { "i": { "j": { "k": {} } } } } } } } } } }
}

Level 11 and beyond not supported

No Conditional Injection

Rules are always injected. Cannot do:

“Only inject if query param exists”
“Inject different value based on environment”

Workaround: Use multiple method configs or environment overrides.

Large Payloads (>1000 fields)

Very large JSON structures may slow down the editor. Workaround: Break into multiple routes or use manual template editing.

Manual Body Templates: Edit JSON directly without visual editor
Method Configs: Different body per HTTP method
Secrets: Encrypted credentials for injection
Variables: Inject query parameters with {{var:name}}

Next Steps

Method Configs

Different body per HTTP method

Test Routes

Test your body injection

Secrets

Create secrets for injection

Advanced Config

Headers, transformations, and more

📊 Statistics

Level: intermediate
Time: 15 minutes

🏷️ Tags

body-injection, visual-editor, drag-drop, json, configuration

​Visual Body Editor

​What is the Visual Body Editor?

​When to Use This Feature

​Use Visual Editor When:

​Use Manual Template When:

​How It Works

​Step-by-Step Guide

​Step 1: Open Route Configuration

​Step 2: Capture or Paste Payload

​Option A: Capture Live Request (Recommended)

​Option B: Paste JSON (Faster)

​What the editor shows: the structure, not the values

​Step 3: Create Injection Rules

​Step 4: Drag Rules onto JSON Structure

​Step 5: Assign Nested Fields

​Step 6: Save Route

​Understanding Injection Rules

​Rule Components

​Rule States

​Managing Rules

​Reorder Rules (Drag Within JSON)

​Remove Rule Assignment

​Delete Rule Completely

​Edit Existing Rule

​Example Use Cases

​Use Case 1: Payment API with Nested Secrets

​Use Case 2: User Profile with Dynamic Variables

​Use Case 3: Multi-Service Request

​Editing Payload Structure

​Recapture Payload

​Edit Payload Manually

​Delete Payload Structure

​Advanced Features

​Nested Object Injection

​Multiple Rules on Same Level

​Parent Path Requirements

​Combining with Method Configs

​Troubleshooting

​Issue: “Drag not working”

​Issue: “Drop indicator not showing”

​Issue: “Rule not injected in requests”

​Issue: “Parent key must exist” warning

​Issue: “Payload structure deleted my rules”

​Best Practices

​1. Use Realistic Example Payloads

​2. Name Rules Descriptively

​3. Test After Configuration

​4. Document Your Structure

​5. Use Variables for Dynamic Values

​6. Organize Rules by Service

​Limitations

​Arrays Not Fully Supported

​Max Nesting Depth: 10 Levels

​No Conditional Injection

​Large Payloads (>1000 fields)

​Related Features

​Next Steps

Method Configs

Test Routes

Secrets

Advanced Config

📊 Statistics

🏷️ Tags

Visual Body Editor

What is the Visual Body Editor?

When to Use This Feature

Use Visual Editor When:

Use Manual Template When:

How It Works

Step-by-Step Guide

Step 1: Open Route Configuration

Step 2: Capture or Paste Payload

Option A: Capture Live Request (Recommended)

Option B: Paste JSON (Faster)

What the editor shows: the structure, not the values

Step 3: Create Injection Rules

Step 4: Drag Rules onto JSON Structure

Step 5: Assign Nested Fields

Step 6: Save Route

Understanding Injection Rules

Rule Components

Rule States

Managing Rules

Reorder Rules (Drag Within JSON)

Remove Rule Assignment

Delete Rule Completely

Edit Existing Rule

Example Use Cases

Use Case 1: Payment API with Nested Secrets

Use Case 2: User Profile with Dynamic Variables

Use Case 3: Multi-Service Request

Editing Payload Structure

Recapture Payload

Edit Payload Manually

Delete Payload Structure

Advanced Features

Nested Object Injection

Multiple Rules on Same Level

Parent Path Requirements

Combining with Method Configs

Troubleshooting

Issue: “Drag not working”

Issue: “Drop indicator not showing”

Issue: “Rule not injected in requests”

Issue: “Parent key must exist” warning

Issue: “Payload structure deleted my rules”

Best Practices

1. Use Realistic Example Payloads

2. Name Rules Descriptively

3. Test After Configuration

4. Document Your Structure

5. Use Variables for Dynamic Values

6. Organize Rules by Service

Limitations

Arrays Not Fully Supported

Max Nesting Depth: 10 Levels

No Conditional Injection

Large Payloads (>1000 fields)

Related Features

Next Steps