Understanding Wized and Xano Integration

This guide covers the role of Wized in your Webflow + Xano setup, and why understanding how data flows between these platforms is essential to building dynamic, functional sites without writing custom front-end code.

Wized acts as the bridge between your front end (Webflow) and your back end (Xano). Think of it like a translator that takes data from your Xano database and feeds it into your Webflow project so that your users can actually see it. You design the layout and structure in Webflow, and Wized helps it come alive with real data.

The Flow of Data

Your Xano database is the source of truth. It stores all your core data—users, companies, invoices, learners, etc. But that data needs to show up on your site. Webflow is the canvas that displays that data. Wized is the middleware that connects the two.

So, visually: Xano → Wized → Webflow.

What Wized Actually Does

There are three main things Wized handles:

1. Requests

These are your GETs and POSTs—your API calls to Xano.

• GET requests pull in data ("show me all users").
• POST requests send data to the database ("create a new user").

For example, when a new user signs up, a Wized request might POST their name, email, password, and other data to Xano's signup endpoint. Wized doesn't store the data—it just facilitates the handoff.

2. Actions

Actions tell Wized when and how to run those requests.

• Want to load all Duck Experts when a page loads? That’s an action.
• Want to send data when a form is submitted? Action.

Actions can be triggered on page load, on click, or after another action completes.

3. Elements

This is the most visual part of Wized and the one you'll touch the most when integrating into Webflow.

Elements in Wized map to your Webflow DOM elements. You build one single card layout in Webflow, and Wized will duplicate it as many times as needed based on the data.

• Think of each element in Webflow as a reusable template.
• The parent element is often the container for a list (e.g., a list of companies).
• Child elements are populated with dynamic values pulled from Xano (e.g., company name, image, profile data).

Example: Rendering a List

Let’s say you have a list of companies you want to show. You'd:

1. Build a single company item in Webflow.
2. Set up a Wized request to get all companies from Xano.
3. Use a Wized action to trigger that request on page load.
4. Bind that data to your Webflow elements inside Wized.

Wized handles the logic. Webflow handles the design.

Troubleshooting with the Data Store

One of the best ways to debug a Wized setup is using the Data Store tab. This shows all live requests firing when a page loads.

• You can manually run any request.
• You can watch what data loads in real time.
• You can see what’s working and what’s not.

Refreshing a page will show all active requests lighting up. It’s a good way to understand what’s happening under the hood.

Why Not Just Use Webflow Alone?

Webflow is powerful, but it doesn’t natively support dynamic back-end logic or custom user data without help. That’s where Wized and Xano come in.

• Xano gives you a scalable, secure database.
• Wized gives you front-end access to that data inside Webflow.

You can’t cut out Xano without replacing it with a different backend, and you can’t communicate with Xano inside Webflow without Wized or heavy custom code.

Final Thoughts

You're not expected to master Wized or Xano overnight. This guide is about understanding the architecture and flow so you know what's happening and where things live. If something breaks, you know whether to look in Webflow, Wized, or Xano.

If you have questions or want help troubleshooting, our team is always available to assist. We want you to feel confident managing and scaling your platform.

‍