The Open Source Power Stack: Connecting Baserow to Webstudio

By Philipp Marxen

If you are building an open-source web stack, you eventually hit the database problem.

Webflow users have their built-in CMS. WordPress users have... WordPress. But for those of us in the Webstudio ecosystem, we need something headless, powerful, and ideally, open-source.

Enter Baserow.

It is the open-source alternative to Airtable. When paired with Webstudio, you get a fully visual frontend powered by a relational database—without a single monthly subscription fee if you self-host.

Here is how to bridge the gap using Webstudio’s Resource system.

The Architecture

We aren't just embedding a form. We are fetching data (CMS items) from Baserow and rendering them dynamically in Webstudio.

• Backend: Baserow (Holds the data: Blog posts, Real Estate listings, Team members).

• Connector: REST API.

• Frontend: Webstudio (Renders the design).

Step 1: Prepare Your Data in Baserow

Before you touch Webstudio, your data needs to be accessible.

1. Create your Table: Let's assume you have a table called "Blog Posts" with fields for Title, Slug, Image, and Content.

2. Get your Table ID: Open your table. The URL looks like baserow.io/database/12345/table/98765/. Your Table ID is 98765.

3. Create an API Token:

   • Go to Settings > Database Tokens.

   • Create a new token. Select the specific workspace.

   • Crucial: Give it "Read" permissions (unless you plan to post data back).

   • Copy this token. You will need it once.

Step 2: Configure the Webstudio Resource

Webstudio doesn't have a "native" Baserow integration yet. We use the generic REST API resource. This is actually better because it gives you full control over the parameters.

1. Open your Webstudio project.

2. Click the Database/Resources Icon (the cylinder) on the left sidebar.

3. Click + New Resource and select REST API.

4. Name it: Baserow - Blog Posts.

5. Method: GET.

6. URL:

   https://api.baserow.io/api/database/rows/table/{YOUR_TABLE_ID}/?user_field_names=true
   
   

   Note: Adding ?user_field_names=true is a lifesaver. It returns your data using the actual column names (e.g., "Title") instead of obscure IDs (e.g., "field_234").

7. Headers:

   • Key: Authorization

   • Value: Token YOUR_API_TOKEN_HERE

Hit Send to test. If you see a JSON response with your data in the preview window, you are connected.

Step 3: Binding Data to the Canvas

Now for the magic. We need to turn that JSON into HTML.

1. Add the Structure: Drag a List component (or a Div that you will repeat) onto your canvas.

2. Select the Parent Element: Select the List component.

3. Bind the Resource:

   • Go to the Settings panel (right side).

   • Look for the Variable / Iterate section.

   • Select your Baserow - Blog Posts resource.

   • Important: You usually need to bind to the results array inside the response, not the root object. It should look like Baserow - Blog Posts.results.

Step 4: Mapping the Fields

Now your list is repeating, but every item looks the same. You need to map the internal content.

1. Select a Heading inside your list item.

2. In the text settings, click the Plus (+) icon to bind dynamic data.

3. Select Current Item > Title.

4. Select an Image component.

5. In the Source (Src) field, bind it to Current Item > Image > 0 > url.

   • Note: Baserow stores images as an array (because a cell can hold multiple files). You usually want the first one, hence index 0.

Pro-Tip: Filtering and Sorting

You don't want to fetch your entire database every time. Baserow handles filtering on the server side via query parameters.

Back in your Webstudio Resource settings, you can append parameters to the URL:

• To Sort: &order_by=-Date (Newest first).

• To Filter: &filter__field_Active__boolean=true (Only show active posts).

Troubleshooting Common Issues

"I don't see my images." Baserow images are arrays. If you bind Current Item > Image, it won't work. You must drill down to the URL. Use the Variable inspector in Webstudio to check the data structure.

"The data isn't updating." Webstudio creates static builds. If you change data in Baserow, you must republish your Webstudio site to fetch the new data (unless you are using client-side fetching, but for SEO, static build time fetching is preferred).