Websites: export and publish

A page of a Web file is a website: every top-level frame is a page at its own address. There are three ways to get it out, and they are easy to mix up.

You want	Use	You get
The site online, hosted for you	Publish website…	A live address. Every publish is kept as a version.
The site's files, to host yourself	Export as web code… → Website (static files)	A zip. Upload the folder to any static host.
A codebase for a developer	Export as web code… → Website (Next.js project)	A zip with a Next.js app to edit.

Publish and Website (static files) make the same site: the same pages, the same script that plays them. The difference is where the files go. Export hands them to you; Publish uploads them and serves them.

The two exports are in ⋯ → Export; Publish is in the top bar and in ⋯. To export one layer as HTML, React or email markup instead, see Code and web export.

Export a website to host yourself

Export a whole website, then open what you got · 0:10

Description

The website template on the canvas. From the ⋯ menu, Export and Export as web code… open the web export; Website (static files) is picked and Export downloads a zip. The zip is then unzipped and opened in a browser on its own, outside PopCraft: the landing page appears, and clicking Pricing in its navigation goes to the pricing page without a reload.

Open ⋯ → Export → Export as web code….
Set Format to Website (static files).
Click Export site. A zip downloads, named for the file.
Unzip it. Open index.html through any web server, or upload the folder to a static host. It works at a site's root or inside a folder.

What is in the zip:

File	What it is
`index.html`, `pricing/index.html`, …	A page per screen, at its address. Each is written out as plain markup, so it reads before any script loads and to a search engine.
`404.html`	The screen marked as the page for addresses the site does not have, when there is one.
`site.json`	The site as data: what the script plays.
`pc/site.js`	The script that plays it. `pc/island.js` and `pc/code.js` are added when the site has GPU-drawn layers or code components.
`assets/`	The site's pictures.
`share/og.png`	The share image link previews show. Every page names it in its `og:image` and `twitter:image` tags.

The share tags are written from the site's root (/share/og.png, /pricing), because the zip does not know where it will be served. Link previews need absolute addresses: give the export the site's address (Site address in the Export dialog, or popcraft run site.popcraft export.web --format site --siteUrl https://example.com) and they are written absolute, or replace the leading / in those tags with your domain. A site served inside a folder needs the folder in them too.

The exported site plays everything the web preview plays: links between screens without a reload (the address bar follows), prototype actions and variables, motion, forms, collections, GPU-drawn layers and code components. What you see in the preview is what you get in the zip.

Export a Next.js project

Pick Website (Next.js project) (or Next.js project with Tailwind) in the same dialog. The zip is a Next.js app a developer owns from here on, on current versions, that installs, lints and builds as it comes:

npm install
npm run dev

It does not carry everything the static site does: prototype actions beyond links, state machines and GPU-drawn layers need the site's own script. The share image is in public/share/, and each page's metadata names it in openGraph and twitter; set NEXT_PUBLIC_SITE_URL so Next.js makes the addresses absolute. Next.js projects says what is in the zip, how it is written and how to deploy it.

Publish

Publish in the top bar (or ⋯ → Publish website…) puts the page online without leaving PopCraft: choose an address, click Publish, and the site is live. Every publish is kept as a version you can go back to.

Publish a website has the steps, the videos, and how to publish from the command palette, the AI agent, the command line and the API.

Which one should I use?

You want it online now and do not want to think about hosting: Publish.
You have a host, or the site has to live under your own domain today: Website (static files).
A developer will keep building it: Website (Next.js project).
You only need one component or one screen's markup: Code and web export.