Intro to the Data & API

Up until now, you've been building your Interface (the visual part of your app that users interact with). But a powerful application needs more than just a pretty face, it needs a brain and a memory.

This is where the Data & API tab comes in.

What is the Data & API tab?

The Data & API tab is WeWeb's built-in backend. It allows you to build full-stack applications without needing a separate tool like Supabase or Xano (though you can still use those if you prefer!).

In this tab, you can:

• Store Data — Create tables to save user information, products, orders, and more.
• Run Secure Logic — Create APIs that run safely on the server, hidden from users.
• Automate Tasks — Set up triggers to run logic automatically when things happen (like a user signing up).

The building blocks of the backend

Just like the Interface has Elements and Components, the Backend has its own core blocks:

1. Tables (Your Memory)

Tables are where your data lives. They look and feel like spreadsheets. You define columns (like Name, Email, Status) and store rows of data.

Learn more about Tables →

2. API Workflows (Your Secure Actions)

In the Interface, workflows run in the browser (the user's computer). In the Backend, API Workflows run on WeWeb's servers. This is crucial for security. You use these to handle sensitive tasks like "Create a Payment" or "Delete a User."

Learn more about API Workflows →

3. Event Triggers (Your Automation)

Triggers allow your app to react to events automatically. For example, you can set up an On after sign up trigger to automatically send a welcome email the moment a new user registers.

Learn more about Event Triggers →

4. Functions (Your Reusable Tools)

Functions are small pieces of logic you write once and use everywhere. Think of them like "Project Workflows" but for the backend. You might write a function to Format Phone Number and use it in multiple APIs.

Learn more about Functions →

5. Middleware (Your Security Guards)

Middleware are reusable rules that protect your data. You can attach them to APIs to ensure only the right people can run them (e.g., "Is the user an Admin?" or "Does the user own this record?").

Learn more about Middleware →

How data flows

Understanding how the pieces fit together is half the battle. Here is the typical journey of data in a WeWeb app:

InterfaceUser submits a form

Calls API

APIValidates & creates data

Updates

TableStores the record

Connecting Interface and Backend

The magic happens when you connect these two worlds.

1

You build a Table

Create a table to store 'Projects'.

2

You create a View

Create a filtered list (View) of that table.

3

You bind a list of items

Bind a list of items (like a list of cards) in the Interface to that View to display the projects.

4

You create an API

Create an API to 'Add a new Project'.

5

You connect an 'Add Project' Button

Add a Button in the Interface and add an 'On click' workflow to call the API.

This separation ensures your app is secure, scalable, and performant.

Why use the built-in Data & API?

You can connect WeWeb to any external backend (like Supabase, Xano, or Airtable), but using the built-in Data & API tab has some clear advantages:

• Everything in one place

  No need to switch between tools or manage multiple logins
• Seamless integration

  Your tables and APIs are instantly available in the Interface
• Faster development

  Debugging is easier when your frontend and backend live together
• Simplified security

  Access checks and auth are built right into the platform

Best practices

When you're working in the Data & API tab, keep these tips in mind:

• Name things clearly

  get_all_products is better than api_1
• Keep logic in the backend

  Don’t rely on the Interface for security, use secure APIs instead
• Reuse logic

  If you do something twice, turn it into a Function

DATA SOURCES

WeWeb allows you to connect to external data sources like Supabase, Xano, or REST APIs. If you have an existing backend, you can connect to it in the Integrations tab and use it alongside WeWeb's built-in features.

CONTINUE LEARNING

Ready to start working with real data? Let's look at how to fetch and display data in your app:

Working with data →