Xano

Webflow handles design, content, and hosting well. But it does not include a backend database, server-side logic, or a built-in authentication system. When a site needs user logins, dynamic data from a relational database, or business logic that runs before a response is returned, those gaps become blockers. The Webflow CMS caps at 2,000 items on the CMS plan and 10,000 on Business. That limits sites with large or fast-growing datasets.

Connecting Xano with Webflow gives you a backend layer without managing servers or writing server-side code from scratch. Xano provides a managed PostgreSQL database, a visual API builder, token-based authentication, and background task scheduling. Together, the two tools let you build dynamic web applications. Webflow renders the frontend while Xano handles data storage, access control, API calls, and business logic.

Webflow designers use this setup to add backend features to client projects. Startup founders use it to ship MVPs without a backend team. Agencies use it to build repeatable application stacks. The project might be a membership site, a marketplace, a customer portal, or a large directory. The Webflow-Xano combination provides the architecture for each.

How to integrate Xano with Webflow

What is Xano? Xano is a backend-as-a-service platform that provides a managed PostgreSQL database, a visual REST API builder, token-based authentication, and background task scheduling. It generates standard REST endpoints that any frontend — including Webflow — can call via HTTP requests. Xano reports over 100,000 users and holds SOC 2, SOC 3, GDPR, ISO 27001, and ISO 27701 certifications.

Teams use Xano with Webflow when a project requires data that lives outside the CMS, user accounts with role-based permissions, or server-side processing like form enrichment and third-party API aggregation. The combination separates frontend design work in Webflow from backend data and logic work in Xano. Both can progress in parallel.

The Xano-Webflow integration supports 4 approaches:

• The Xano app connects your Xano account to Webflow via OAuth (a secure authorization protocol) and provides starter templates for common use cases like forms, CMS sync, and authentication.
• Code Embed elements with JavaScript let you fetch Xano data, submit forms to Xano endpoints, and build authenticated page experiences directly in Webflow.
• Make and n8n can be used for manual workflows where Webflow events trigger actions involving Xano.
• The Webflow and Xano APIs give you direct control over CMS sync, webhook processing, and custom data pipelines. They require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Install the Xano app

The Xano app on the Webflow Marketplace connects your Xano workspace to your Webflow site through OAuth. It is built and maintained by Xano directly, has over 1,000 installs, and is approved by Webflow. After installation, you get access to XanoSDK example templates covering authentication, form handling, CMS sync, and e-commerce automation. This is the fastest way to link the two platforms. It is the foundation for most other integration methods.

To set up the integration:

1. In Xano, open Account Settings and click "Connect with Webflow".
2. A pop-up appears — select your workspaces and sites, then click "Authorize" to complete the OAuth flow.
3. In Xano, go to the Connect Center in the left-hand menu — the Webflow connection appears as Inactive.
4. Click Enable to activate the connection.
5. Browse the provided XanoSDK example templates and select one matching your use case.

Once installed, the app provides:

• XanoSDK example templates for authentication, form handling, CMS sync, and e-commerce automation
• A built-in Webflow connector in Xano's visual API builder for calling Webflow's APIs directly
• OAuth-based account linking that keeps credentials secure between platforms

These features make the app the quickest starting point for most Webflow-Xano projects.

The app requests permissions to read and write CMS data, forms, site data, user accounts, and e-commerce store data. Once connected, Xano can call Webflow's APIs directly from its visual API builder using the built-in Webflow connector. The app itself is free to install. Publishing custom code on your Webflow site requires a paid site plan.

Connect Xano APIs with Code Embed elements

When you need more control than the app templates provide, you can call Xano's REST endpoints directly from Webflow using JavaScript. This approach works for displaying dynamic data, routing form submissions to Xano's database, and building authenticated page experiences. It requires a paid Webflow site plan to publish custom code.

Fetch and display Xano data

You can render data from Xano's database on any Webflow page. Use JavaScript inside a Code Embed element to fetch it. This is useful for product listings, directory results, or user-specific content that exceeds CMS item limits or changes frequently. Build a card or list item structure in Webflow, hide it with a CSS class, then clone it via JavaScript for each record returned by Xano.

To display Xano data on a Webflow page:

1. Create a GET endpoint in Xano that returns the data you need — Xano auto-generates CRUD endpoints when you select API > New API > CRUD Database Operations and choose your table.
2. In Webflow, add a Code Embed element to your page.
3. Write a fetch() call to your Xano endpoint URL. Iterate over the response and inject each record into the DOM (the page's document structure) by cloning your hidden template element.
4. Publish and test.

Webflow's native Collection List elements cannot be populated dynamically via JavaScript after page load. Use Code Embed elements as containers instead, or manipulate the DOM directly with your fetch response.

Route form submissions to Xano

Webflow forms can send data directly to a Xano POST endpoint — no JavaScript required for basic cases. Set the form's action URL to your Xano endpoint and Xano receives the submission as raw POST data. For more control, intercept the form submission with JavaScript and POST JSON to Xano.

To route a form using the action URL method:

1. In Xano, create a database table with fields matching your form (e.g., name, email, message).
2. Create a POST endpoint, add a Get All Raw Input function step, then add a Database Insert step to save the data.
3. Publish the endpoint and copy its URL.
4. In Webflow, select your form element, open form settings, and paste the Xano URL in the Action field. Set the method to POST.
5. Publish your Webflow site.

For the JavaScript approach, add a script to your custom code in the page body. The script listens for the form's submit event, prevents the default behavior, and sends a fetch() POST to your Xano endpoint. Note that intercepting submission this way means Webflow's native success state will not trigger. You need to show a success message manually in your script.

Implement client-side authentication

Xano provides pre-built signup, login, and session validation endpoints that return auth tokens. You can use these from Webflow to gate pages behind a login. The token is stored in localStorage and sent as an Authorization: Bearer header on subsequent API calls.

To add login to a Webflow page:

1. In Xano, go to API > + Add API Endpoint > Authentication to generate /auth/signup, /auth/login, and /auth/me endpoints.
2. Build a login form in Webflow with email and password fields.
3. Add a Code Embed element or page-level custom code. The script intercepts the form submission, POSTs credentials to Xano's /auth/login endpoint, and stores the returned token in localStorage.
4. On protected pages, add a script that calls /auth/me with the stored token. If the response is not OK, redirect to the login page.

Client-side gating — hiding DOM elements with JavaScript — is not sufficient security on its own. The Xano endpoint itself must enforce role checks in its function stack before returning sensitive data. A user who extracts the token from the browser's network tab can call the API directly. Mitigate this with short token expiration times and endpoint-level permission logic. Xano's authentication documentation covers the full setup.

Connect with Make or n8n

Manual workflows in Make or n8n can connect Webflow events with Xano actions without writing frontend code. This approach works well for event-driven automation like forwarding form submissions, syncing CMS changes, or triggering Xano processing from Webflow events.

Examples include:

• Make trigger: Webflow form submission → Make action: Xano create record
• n8n trigger: Webflow CMS item creation → n8n action: Xano validation logic
• n8n trigger: Webflow CMS item updated → n8n action: Xano Create Row or Get Many Rows
• Make or n8n trigger: Webflow e-commerce order event → Make or n8n action: Xano custom order processing, inventory updates, or third-party service calls

The n8n Xano node is built and maintained by Xano and verified by n8n. It supports table operations including Create Row, Create Row Bulk, Delete a Row, Get a Row, Get Many Rows, and Search Row. Make's Webflow module includes 40 modules covering CMS, e-commerce, assets, and pages.

Build with the Webflow and Xano APIs

For direct control over data flow between the two platforms, you can work with both APIs. This path is for developers building CMS sync pipelines, webhook receivers, or custom data processing that the app and Code Embed approaches do not cover. It requires understanding REST conventions, pagination, and authentication headers.

The relevant APIs are:

• Xano's API builder generates custom REST endpoints per workspace — each endpoint URL follows the pattern https://[instance].xano.io/api:[group]/[endpoint]
• Webflow's Data API v2 handles CMS collections, items, forms, products, orders, and site publishing
• Webflow webhooks (event-triggered HTTP notifications) fire real-time POST requests to Xano endpoints when events like form submissions or CMS changes occur

The Webflow Data API cannot be called from browser-side JavaScript due to CORS (Cross-Origin Resource Sharing) restrictions on Webflow's API server. Xano must act as the server-side proxy for any Webflow API calls. Make these requests from Xano's function stack, not from Code Embed scripts.

Sync Xano data to Webflow CMS

When Xano is the source of truth for a dataset that also needs to appear in Webflow CMS collections, you can push data from Xano to Webflow using the CMS items API. This is common for directories, product catalogs, or content pipelines where data originates outside Webflow.

To set up a sync pipeline:

1. In Xano, connect to Webflow via Account Settings > Connect with Webflow and enable the connection in the Connect Center.
2. Create a Xano endpoint that calls Webflow's GET /v2/collections/:collection_id/items to fetch existing items. The API returns a maximum of 100 items per request. Use limit and offset parameters to paginate through larger collections.
3. For each record in your Xano database, call POST /v2/collections/:collection_id/items to create new CMS items or PATCH to update existing ones. New items created via the API are drafts. Call POST /v2/collections/:collection_id/items/publish to push them live.
4. Schedule the sync as a background task in Xano using the Add or Edit Record pattern (upsert on Webflow item ID) to handle ongoing updates.

Webflow's API enforces per-plan request limits that batch sync operations can hit quickly. Xano's official CMS sync tutorial covers the full implementation including handling edits and deletions.

Set up webhook receivers in Xano

Webflow can send real-time event notifications to Xano whenever a form is submitted, a CMS item changes, or an e-commerce order is placed. Xano receives these as standard POST requests.

To create a webhook receiver:

1. In Xano, create a POST endpoint and add a Get All Raw Input function step with JSON encoding.
2. Register the webhook via the Webflow API: send a POST /v2/sites/:site_id/webhooks request with your Xano endpoint URL and the desired triggerType (e.g., form_submission, collection_item_created, ecomm_new_order).
3. Validate incoming requests by checking the x-webflow-signature header using hmac_sha256. If the timestamp difference exceeds 5 minutes, treat the request as potentially compromised.
4. Process the payload data and write it to your Xano database.

Webflow sends form_submission webhooks for every form on the site. Check payload.name in your Xano function stack to route submissions to the correct handler. The full list of webhook event types is documented in the Webflow webhook events reference.

What can you build with the Xano Webflow integration?

Integrating Xano with Webflow lets you build full-stack web applications without managing servers or rewriting your frontend in a JavaScript framework.

• Membership sites with role-based access: Build gated content platforms where different user tiers see different data — all enforced at the API level in Xano, not just hidden in the DOM. The WMX Stack (Webflow + Memberstack + Xano) is a documented pattern with an official multi-part tutorial covering signup, login, and tiered content delivery.
• Dynamic marketplaces and directories: Create multi-vendor platforms where users submit listings, filter results, and leave reviews. Xano's PostgreSQL database handles unlimited records on paid plans, removing the CMS item ceiling. The PropVest real estate filtering platform is a production example of this pattern.
• SaaS customer portals: Build authenticated dashboards where logged-in users see personalized analytics, account data, and usage metrics. Xano handles data aggregation and filtering via its API builder. Webflow renders the frontend. Auth tokens manage session state across page loads.
• Form processing with data enrichment: Route Webflow form submissions to Xano for server-side validation, third-party API enrichment (e.g., appending company data from an enrichment service), and automated downstream workflows like email notifications or CRM updates. API keys stay in Xano's backend function stacks, not in client-side code.

If you need more control over CMS sync pipelines, complex webhook processing, or multi-step transaction logic, the API integration path covers those cases with full flexibility.