How to connect Xano backend in WeWeb

Connecting your Xano backend to a WeWeb frontend is one of the first things you'll want to do when building a dynamic web app. In this guide, you'll learn how to set up the Xano Data Source plugin, pull data into a WeWeb collection, display it on a page using a table element, and — critically — understand why filtering data in the right place matters for performance and security.

Step 1: Add the Xano Data Source Plugin

Start by navigating to the Plugins section in your WeWeb project and selecting the Xano Data Source plugin under Data Sources. You'll be prompted to enter your Xano API key, which you can generate from your Xano account settings. Keep this key private — if you ever share your screen or build in public, revoke the key immediately afterward. Once your key is in place, select your Xano instance and continue through the setup.

Step 2: Create a Collection from Your Xano API

With the plugin connected, you can create a new WeWeb collection. Give it a meaningful name like callsFromXano, set the source to your Xano plugin, and choose Dynamic Mode for building a live web app. From there, you'll select the API group and endpoint from your Xano instance that returns the data you need — in this case, a list of phone calls.

Once configured, WeWeb fetches the data and displays it. Here's where it helps to understand the structure: Xano returns an array of objects. Each object represents a row in your Xano table, and each key inside that object — like id, callTo, duration, or type — corresponds to a column name. Understanding this structure makes binding data to your UI much easier.

Step 3: Display Data with a Table Element

Add a Table element to your page and bind it to your collection. WeWeb will automatically populate the table with your collection items. You can then click into individual text cells and bind them to specific fields from your collection, such as callTo for the phone number or duration for call length. You can even use a no-code formula like concatenate to format values — for example, appending " min" after a numeric duration.

Frontend Filtering vs. Backend Filtering

WeWeb allows you to add filters directly on a collection, such as showing only calls where duration is less than 100 minutes. This is a frontend filter — and it's important to understand what that actually means. Even though only 19 filtered items appear on the page, the browser still downloads all 1,000 records from Xano first. This wastes bandwidth, slows down the page, and can inadvertently expose data you didn't intend to share.

The right approach is to apply filters in your Xano API endpoint so the server only sends the data the user actually needs. This protects performance and keeps sensitive data — like records belonging to other users — from ever reaching the browser.

Key Takeaways

Building efficiently with Xano and WeWeb means thinking about where your data is filtered, not just whether it's filtered. Always push filtering logic to your Xano backend when working with large datasets or sensitive information, and use WeWeb's frontend filters only for lightweight, non-sensitive UI interactions.