Using the Visual Builder

The Visual Builder is the heart of Xano — it's where you'll spend most of your time creating the business logic that powers your backend. Whether you're building APIs, background tasks, custom functions, middleware, or triggers, understanding how this interface works will set you up for success from day one.

Working with Inputs

The first section of the Visual Builder is the Inputs panel. Inputs represent all the data your business logic needs before it can execute — typically anything coming from outside of Xano, like a user-facing form. You can add inputs using the "Add Input" button, which gives you access to a wide variety of field types.

Once you've added inputs, you can click on any of them to make changes, and drag them to reorder as needed. A few key options appear consistently across field types: you can add a description for your own reference, choose between a single value or a list, enable nullable values, set a default value, mark a field as required, flag it as sensitive, and apply filters like minimum/maximum length or character whitelisting.

Building Your Function Stack

The Function Stack is where your actual business logic lives — everything that runs when an endpoint is called. Click "Add Function" to open the function panel, where you can search, browse, and favorite functions you use often.

The function stack offers a compact or comfortable view depending on how much visual space you prefer. Functions with nested elements, like conditional statements, can be expanded or collapsed. Hovering over any function gives you quick options to add a function below it, enable or disable it, clone it, or add a description.

You can also select multiple functions using Shift+click to reorder, disable, cut, copy, paste, or group them together — grouping is purely visual and doesn't affect logic. The search feature is especially handy in longer stacks, letting you search by function name or variable name to quickly find what you need. Keyboard shortcuts are available throughout to help you work faster.

Configuring Your Response

The Response section defines what your API endpoint actually returns after the function stack finishes executing. You can click on response items to edit them, add new ones, reorder them by dragging, or hover over them for additional options. While ordering responses is optional, it's there when you need it.

Running, Testing, and Debugging

Once your logic is built, use the Run panel in the upper right to test your function stack by entering inputs and clicking Run. You'll see whether the test succeeded, how long each function took to execute, and you can copy the response or a curl command for external testing.

Activating the Debugger takes things further — you can step through each function one at a time, set breakpoints, and step into or out of custom functions. Any input values you enter in the panel persist as long as your tab stays open, so you can rerun tests easily.

Finally, remember to publish your changes when you're ready for them to go live, and use the revert option if you need to undo recent edits.