This guide covers multiple ways to connect a Xano backend to your frontend of choice, whether you’re using no-code tools, AI builders, or traditional development.

​
Prerequisites & Best Practices

  • Swagger/OpenAPI Documentation
    Every Xano API group automatically provides a Swagger/OpenAPI specification.
    Use this as your single source of truth for endpoints, headers, and request/response schemas.
  • Personal Access Tokens (PATs)
    Many platforms with a native Xano integration require a PAT (personal access token) for authentication. PATs are managed through the Metadata API in Xano, which is where you generate and maintain them.
  • Platform Docs First
    For frontend-specific instructions, always start with the platform’s own documentation. Links to key platform docs are included in each section below.

​
WeWeb + Xano

WeWeb provides dedicated plugins for connecting to Xano.

​
Data Source Plugin

  1. In WeWeb, navigate to Plugins → Data Sources → Xano.
  2. Add your Xano connection and supply your Personal Access Token (from the Metadata API).
  3. Create Collections to fetch data and optionally set global headers at the plugin or collection level.
  4. If you also use the Auth plugin, tokens are forwarded automatically.
WeWeb Xano Data Source Docs

​
Auth Plugin

Use the WeWeb Xano Auth Plugin to handle signup/login flows, gated content, and role-based redirects.

​
Bubble + Xano

Bubble can integrate with Xano in two primary ways:

​
Xano Connector Plugin

Community-driven plugin built around the official JS SDK. It simplifies authentication and supports real-time features.
Bubble Xano Connector Guide

​
Bubble API Connector

Use Bubble’s native API Connector to configure endpoints manually. Copy endpoint URLs, headers, and payloads directly from your Swagger docs. Bubble API Connector Guide

​
AI Builders (e.g. Lovable)

AI app builders like Lovable can ingest your OpenAPI specification to generate an entire frontend with connected API calls.
  1. In Xano, open your API group and click Swagger (OpenAPI Documentation).
  2. Copy the OpenAPI/JSON link.
  3. In Lovable (or a similar AI builder), import the spec to auto-generate endpoints, forms, and API actions.

​
Using Swagger with IDE Copilots

Provide the OpenAPI file to your IDE’s AI assistant (e.g. Cursor, GitHub Copilot Chat) to generate accurate code and types.
  1. In Xano, open your API group and click Swagger (OpenAPI Documentation).
  2. Copy the OpenAPI/JSON link.
  3. In your IDE of choice, either provide the link to the OpenAPI spec for your API groups, or download them and store them as a part of your project.

​
Traditional Development (TypeScript / JavaScript)

You can connect to Xano with plain fetch/axios or use the offical JS SDK.

​
Fetch Example

const XANO_BASE = "https://your-instance.xanoapi.com/api:x123";
const token = "<USER_JWT_OR_PAT>";

async function getMe() {
  const res = await fetch(`${XANO_BASE}/auth/me`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  if (!res.ok) throw new Error(`Xano error ${res.status}`);
  return res.json();
}

​
JS SDK

The Xano JS SDK provides helpers for authentication and API calls and powers several third-party plugins.

​
Environment & Troubleshooting Tips

  • Branching: Use branches for backend logic changes, but keep schemas consistent across branches to avoid frontend mismatches. Read more about Branching & Merging.
  • Data Sources: In WeWeb, you can set different data sources for editor, staging, and production environments. Read more about WeWeb Xano Data Source.
  • Platform Docs: For details like real-time features, caching, or auth strategies, always refer to the frontend platform’s official documentation.
💡 Reminder: For frontend-specific configuration (authentication flows, deployment steps, plugin settings, etc.), the best source of truth is the documentation provided by the frontend platform itself.