📤Self-Hosting

Webstudio can be self-hosted, putting you in control of your hosting, pricing, security, and compliance.

The Builder and Projects are hosted separately. The Builder is used to create Projects, and when a Project is published or exported, the site/app is deployed independently.

Builder

While both the Builder and the generated site are open-source, self-hosting the Builder in production is more difficult and currently not recommended. You can still self-host the Builder for development, and of course, you can self-host the sites for production.

Projects

After building, export your Projects and host them on your own server or preferred platform.

Export methods

There are two ways to export Projects:

1. Webstudio CLI – Allows you to interact with and export your Projects. Supports static and dynamic (see below).

2. Download button in the Builder – Click a button in the Webstudio Builder, and the Project will be downloaded as a zip. Supports static only (see below).

If you are self-hosting the Builder, then please use the Webstudio CLI to export your project.

Export types

There are two types of exports:

• JavaScript application – Builds a dynamic Remix app. This is the default behavior of Webstudio Cloud and provides the most functionality, but it requires hosting that works with apps.

• Static site – Outputs a static site (HTML/CSS/JS) with limited functionality, but has more versatile hosting options.

If you want the export to contain human-readable class names, disable atomic CSS. See Atomic CSS for more information.

JavaScript application

This is the default behavior if you were to publish to Webstudio Cloud.

The JavaScript application supports dynamic functionality like CMS integrations, Webhook forms, image optimization, redirects, and more.

JavaScript applications require a hosting environment that handles server-side code execution, fetching data from CMS integrations, and more.

Platforms for JavaScript applications

Here are the platforms we have documented.

Serverless:

Serverless platforms enable you to push code, and they handle the rest, from infrastructure to scaling.

This self-hosting option is the easiest to use, though there is less flexibility in platform choice.

▶️Netlify▶️Vercel

Servers:

Webstudio provides a Dockerfile, which enables your site to run on any server that supports containers.

This self-hosting option is more technical compared to others, but it offers a higher degree of flexibility regarding its deployment location.

The Docker build requires a minimum of 1 GB of memory and 1 core CPU, though more is recommended.

▶️AWS with Flightcontrol (Docker)▶️Digital Ocean with Coolify (Docker)▶️Hetzner with Coolify (Docker)

Static site

You can optionally export your Webstudio Project as a static site, i.e., a collection of HTML, CSS, JavaScript, and image files. This allows you to host your site on traditional hosting providers or, better yet, on dedicated static site hosting and deployment platforms.

Static site limitations

While static site exporting and hosting are less technical, this comes at the cost of functionality.

The following are not supported:

• Dynamic pages

• Redirects

• Statuses

• Client navigation

• Webhook form

• Image optimization

• No robots.txt

• No sitemap.xml

Local

To run a project locally, you must run a simple local server. Use the command npx serve . to spin one up. This is required because the static files use absolute URLs.

Platforms for static sites

Here are the platforms we have documented:

▶️Cloudflare Pages▶️GitHub Pages▶️Netlify▶️Vercel