WeWeb + Xano Integration Guide
WeWeb and Xano form a full-stack no-code pair where WeWeb handles the UI layer and Xano provides a scalable, customisable REST API backend. Xano's visual function stack lets you write complex business logic — validation, transformations, third-party API calls — without code, while WeWeb's drag-and-drop interface turns your API into a polished product.
Why WeWeb + Xano?
Xano provides something Supabase does not: a visual, logic-first backend where you can build complex multi-step API endpoints with branches, loops, and external API calls — all without writing server code. When combined with WeWeb, you get a frontend that can call any Xano endpoint through its REST/OpenAPI plugin, making this pair ideal for apps with non-trivial business logic, complex workflows, or heavy data transformation needs.
Setting up the integration
In Xano, export your API's Swagger/OpenAPI spec URL (found under API Group → Swagger). In WeWeb, add the REST API or OpenAPI plugin and paste the spec URL — WeWeb will auto-import all your endpoints as callable actions. For authenticated endpoints, configure a bearer token variable in WeWeb that stores the JWT returned by Xano's /auth/login endpoint after sign-in. Map this token to the Authorization header in your plugin settings.
Authentication flow
Xano ships with a built-in auth system that issues JWTs. Create a /auth/signup and /auth/login endpoint in Xano, then call them from WeWeb's onPageLoad and form-submit events. Store the returned authToken in a WeWeb variable marked as persistent (localStorage). On every subsequent API call, WeWeb sends this token as a Bearer header. Xano's auth middleware validates it automatically for any endpoint with authentication enabled.
Real-world use cases
This stack excels for apps that need custom business rules: booking platforms with availability logic, e-commerce with custom pricing engines, B2B SaaS with multi-tenant data isolation, and workflow automation dashboards. App Studio uses WeWeb + Xano for clients who need rapid iteration on backend logic without touching code — Xano's visual debugger makes it easy to trace and fix issues in production.
Common pitfalls
Keep Xano's workspace on a paid plan before going to production — the free tier has rate limits that will surprise you under real load. Always version your Xano API (v1, v2) so WeWeb can keep working while you iterate on the backend. Avoid giant monolithic endpoints; small, focused endpoints are easier to debug and reuse across WeWeb pages. Use Xano's environment variables for API keys and secrets rather than hardcoding them in function stacks.
What you can build
- Booking platforms
- B2B SaaS
- E-commerce
- Workflow dashboards
- Multi-tenant apps
Ready to build with WeWeb + Xano?
App Studio has built production apps on this exact stack. We can ship your project in 4–8 weeks and handle the full integration — architecture, setup, and launch.
Want expert help with this integration?
Book a free consultation →