← All tools
W

Webstudio

Core tool
Site builder

Open-source visual builder with full CSS control, any-CMS data and edge hosting

How it connects to Webstudio

Hub of the stack. Reads data from any HTTP API through Resource variables (REST or GraphQL, GET/POST, headers for tokens), bound to Collections and dynamic pages (Baserow, Supabase, Directus, NocoDB, Airtable, Notion, Hygraph, WordPress guides in the docs). The new Form (Beta) component sends a submission to up to 10 REST, GraphQL or Email Resources in parallel (e.g. Baserow create-row, Listmonk subscribe, n8n webhook); the older Webhook Form is deprecated. Content Embed renders HTML from a CMS field. Sites export via the Webstudio CLI as a JS app or static site and deploy to Cloudflare Pages/Workers, Vercel, Netlify, Coolify or a VPS. CLI and MCP let AI agents edit projects.

How it connects

All stacks →
Webstudio → Baserow
REST API resourceEasy

Create a database token in Baserow. In Webstudio add a Resource variable (GET) to https://api.baserow.io/api/database/rows/table/<id>/?user_field_names=true with header Authorization: Token <token>; add filter/search params from URL system variables. Bind the result's .results to a Collection; use a dynamic page path (/blog/:slug) with a filter__field__equal param for detail pages. Resources run server-side, so the token is not exposed.

Webstudio → Baserow
REST API resourceMedium

Create a POST Resource on the Form to /api/database/rows/table/<id>/?user_field_names=true with the token header and a JSON body bound to formData fields (formData.name, formData.email). Add it as a Form action (up to 10 actions run in parallel). Use a token with create-only permission on that table.

Webstudio → Supabase
REST API resourceMedium

Enable Row Level Security with a public select policy, then add a Resource GET to https://<ref>.supabase.co/rest/v1/<table>?select=*&published=eq.true with headers apikey and Authorization: Bearer <anon key>. Bind to Collections and dynamic pages; PostgREST filters (eq, order, limit) map to query params.

Webstudio → Supabase
REST API resourceMedium

POST Resource to /rest/v1/<table> with anon key headers and Prefer: return=minimal, body from formData. Requires an RLS insert-only policy; for validation or spam checks route via an Edge Function or n8n instead.

Webstudio → Directus
REST API resourceMedium

Create a static token for a read-only role in Directus. Use a Resource on REST (/items/<collection>?filter[status][_eq]=published&fields=*,image.*) or GraphQL (/graphql with a query built in the Directus GraphQL playground). Images via /assets/<id>?width=... transformations.

Webstudio → NocoDB
REST API resourceMedium

Generate an API token in NocoDB, then Resource GET to /api/v2/tables/<tableId>/records?where=(Status,eq,Published) with header xc-token. Response list is in .list. If NocoDB sits on a Supabase/Postgres DB, the same data can alternatively be read via Supabase REST.

Webstudio → PocketBase
REST API resourceEasy

Set the collection's List/View API rule to public (or pass a token), then Resource GET to https://<host>/api/collections/<name>/records?filter=(published=true). Bind .items to a Collection.

Webstudio → n8n
WebhookEasy

Add an n8n Webhook node (POST), copy the production URL, and add it as a REST Resource action on the Webstudio Form (or as the action URL of a legacy Webhook Form). n8n receives formData and can branch to any number of tools. Return a JSON response for success messages.

Webstudio → Listmonk
REST API resourceEasy

Without n8n: POST Resource to Listmonk's public endpoint /api/public/subscription with JSON {email, name, list_uuids:[...]} (no API key needed; enable public subscription and the lists must be public). Listmonk sends the double opt-in mail itself.

Webstudio → Resend
REST API resourceEasy

Email action without automation: POST Resource to https://api.resend.com/emails with Authorization: Bearer <key>, body {from, to, subject, html} with formData bound in. Webstudio Cloud also has built-in Email to owner/visitor actions, so Resend is mainly for self-hosted exports or custom domains/templates.

Webstudio → Cloudflare Pages / Workers
NativeMedium

Export with the Webstudio CLI (webstudio link, sync, build --template cloudflare or static), then deploy with Wrangler or connect a Git repo to Pages. Static export loses server features (forms, dynamic resources at request time); the JS app keeps them on Workers.

Webstudio → Coolify
NativeMedium

Export the project with the CLI as a Docker-ready app, push to Git, and deploy as an application in Coolify on Hetzner or DigitalOcean; the same server can host Baserow, n8n and Listmonk.

2026-11-09Release
Webstudio opens Content mode to owners and adds cross-project token copy

Release 0.311.0 lets users copy and paste design tokens across projects and stops malformed styles from blocking publishing. Release 0.309.0 (30 Oct) let project owners use Content mode and allowed ES module asset uploads. Release 0.310.0 (6 Nov) improved advanced styles and CSS variables.

Why it matters: Reusing tokens across client projects makes it easier to keep a shared agency design system.

Webstudio (GitHub releases)
2026-10-14Release
Webstudio adds a native Form component and fixes an SSRF issue in the resource loader

Webstudio 0.306.0 introduced a new Form component and fixed a server-side request forgery (SSRF) issue in the resource loader. Follow-up releases 0.307.0 to 0.310.0 (24 Oct to 6 Nov) added customisable form progress feedback, field reset after submission, structured error codes and documentation for a self-hosted email API.

Why it matters: Contact and lead forms without a third-party form service are a common agency need; the SSRF fix is a reason to make sure self-hosted builds are updated.

Webstudio (GitHub releases)
2026-08-31Release
Webstudio gets a dark Builder theme and seat-based publishing allowances

Release 0.294.0 added a dark Builder theme, Content Block creation from MDX files and a review step for unused assets before deletion. Release 0.298.0 (11 Sep) made the publishing allowance scale with workspace seats and restored Cloudflare publishing with Wrangler 4.

Why it matters: Teams on workspace plans get more publishes as they add seats, and self-hosters who deploy to Cloudflare can publish again.

Webstudio (GitHub releases)
2026-08-21Opinion
Webstudio founder asks why people would use a visual builder if AI can build the site

Oleg Isonen admits that for some simple sites an agent alone may be enough. He argues that Webstudio's value is the workflow after the first version: content-only client access, workspace permissions, publish checks, hosting, and editing the same project through either the Builder or MCP. He also says the Content Engine is deliberately not an enterprise CMS.

Why it matters: This is a useful way to frame client conversations about AI-built sites compared with managed visual projects.

Webstudio Blog (Oleg Isonen)
2026-08-10Release
Webstudio Content Engine: Markdown and JSON-backed pages without a database

The Content Engine turns Markdown frontmatter and JSON files into queryable data with filtering, sorting, pagination, references and slug-based dynamic pages. Webstudio moved its own blog off Ghost onto it. Source files sit in R2 and only a compact metadata index is compiled at build time.

Why it matters: Blogs, docs and portfolios no longer need a separate headless CMS subscription, and the content stays as portable files.

Webstudio Blog (Oleg Isonen)