A contact form or waitlist posts to
app/api/popcraft, and its answers are kept in the site's database.DESIGN TO
NEXT.JS!
Your page, as a Next.js project a developer would actually keep. A route per screen, typed metadata, next/font, next/image, strict TypeScript, and the prototype's logic as React you can read. Unzip, install, run.
The website template on the canvas. The web export is opened and Website (Next.js project) is picked; Export downloads a zip. The zip is unzipped, its packages installed and the project built and started with Next.js, outside PopCraft: the landing page appears at the site's root, and its Pricing link opens the pricing page at /pricing.
SHIP IT!
THE HANDOFF
Stop rebuilding the same page twice
The classic handoff goes like this. The designer finishes the page. The developer opens it in one window and an empty editor in the other, and starts typing it out again, pixel by pixel, guessing at the easing and the breakpoints. Two weeks later the page ships, almost like the design.
We think the design should be the first commit, not a picture of it. Export as web code › Website (Next.js project) writes every screen of a page as a Next.js app, written the way a Next.js team writes one today. Not a blob of absolutely-positioned divs. Real elements, real links, real metadata, a README.
1
route per screen, at its address
0
lint or type errors, as it comes
20.9
Node.js or newer is all you need
2
flavours: CSS or Tailwind
PROOF
Exported, built, running
Here is the SaaS developer tool landing page from the gallery. Export as a Next.js project, then outside PopCraft: install, build, start. That is next start serving the page in a browser, not the editor.
We hold it to that: the packages are checked against npm every week, and a new version only reaches your zip once sample projects install, lint, type-check and build with it.
The website template on the canvas. The web export is opened and Website (Next.js project) is picked; Export downloads a zip. The zip is unzipped, its packages installed and the project built and started with Next.js, outside PopCraft: the landing page appears at the site's root, and its Pricing link opens the pricing page at /pricing.
X-RAY
What is in the zip
The project, file by file. Every path below comes from the exporter. If your page has forms, accounts or GPU layers, a few more files join the party.
my-landing-next/
app/└ layout.tsxLanguage, fonts through next/font, title template, Open Graph└ page.tsxHome: a server component with typed Metadata└ screen.tsxThe screen as plain TSX: real elements, real links└ pricing/page.tsxA route per screen, at the address you gave it└ not-found.tsxYour 404 screen, if you made one└ globals.cssVariables and modes, breakpoints as media queries└ sitemap.ts · robots.tsMade from NEXT_PUBLIC_SITE_URLlib/popcraft.tsxYour variables as shared React state, overlays, who is signed incomponents/code/Your code components, as their sourcepublic/Pictures, served through next/imagenext.config.ts · tsconfig.json · eslint.config.mjsStrict TypeScript, Next.js's recommended lint rules.env.example · README.mdWhat to set, and how to run it
LOOK INSIDE
Server first, metadata typed
Each page.tsx is a server component that declares its title, description and canonical address as typed Metadata. A screen that has to run in the browser (motion waiting for a click, a prototype) is a client component in screen.tsx beside it, so the page keeps its metadata either way.
Google fonts go through next/font: downloaded at build time, served from the site, no request to Google from a visitor and no layout shift. Pictures go through next/image, as AVIF or WebP where the browser takes it.
A landing page in the editor. Dev in the top bar switches to the read-only handoff view. The hero’s button is clicked: the inspector shows its size, colours and type, and the CSS for it. With the button selected, the pointer rests on the headline above and the distance between the two is drawn on the canvas.
TAILWIND?
Same project, utility classes
Your team lives in Tailwind? Pick Next.js project with Tailwind. Same routes, same metadata, same behaviour, with Tailwind CSS classes in place of style objects.
The Bento SaaS landing page template. The web export is opened and Next.js project with Tailwind is picked; a zip downloads. The home screen's screen.tsx is then shown: plain elements with Tailwind CSS classes in place of style objects.
IT STILL WORKS
The prototype comes with it
What you built in Prototype is written as React a developer can read and change. Here is what carries, and the one thing that does not.
✓Variables and expressionsReact state every page shares
✓Go to page, back, open a linkLinks and router calls
✓Overlays, variants, theme modesOpen, swap and close overlays; change variants; switch modes
✓Play, pause or seek a timelineTimeline actions, started by click, hover, delay or key
✓State machinesThe same player PopCraft uses, from @popcraft/runtime
✓Forms, sign-up, sign-inapp/api/popcraft and Neon Auth, with DATABASE_URL
✓A shader or 3D scene that movesDrawn live by the GPU island in public/pc/
✗Transitions between screensNot in the project: links go straight to the next page
FROM ZERO
Design to deploy in six moves
- 1
Design the pages
Each top-level frame of a Web file is a screen. Give each one an address in Web › Page, and a title and description while you are there. - 2
Make it work
Prototype links, variables, overlays and forms. Check it in the web preview: it is what the export will do. - 3
Export as web code
⋯ › Export › Export as web code…, then Format: Website (Next.js project), or Next.js project with Tailwind. - 4
Run it
Unzip, npm install, npm run dev. Node.js 20.9 or newer. It lints and type-checks as it comes. - 5
Wire the backend
Forms or sign-in? Set DATABASE_URL (and NEON_AUTH_URL for accounts) in .env.local. Without them pages still work; nothing is kept. - 6
Deploy it
Push it to your repository and deploy anywhere Next.js runs: Vercel, a Node.js server, a container.
THE README SAYS
Four commands. No surprises.
$ npm install $ npm run dev # http://localhost:3000 $ npm run lint $ npm run typecheck $ npm run build && npm start # forms or sign-in? in .env.local DATABASE_URL=postgres://… # the site makes its two tables on first use NEON_AUTH_URL=https://… # for accounts NEXT_PUBLIC_SITE_URL=https://your.site
BACKEND INCLUDED
Forms, accounts and data
ACCOUNTS
HELLO!Sign-up, sign-in, sign-out, password resets and deleting an account go through Neon Auth, with a first-party cookie.
MEMBERS ONLY
SHH!Mark a page for signed-in visitors and
proxy.ts sends everyone else to the sign-in page.It is the same code PopCraft's own hosting answers a published site with, through @popcraft/runtime/server. Want it on a plain Node server instead? The handler runs there too, and our examples repo has one that keeps submissions in a JSON file.
The coming-soon page, published, with its email sign-up marked as a form and a Neon account connected. In the Publish dialog, under Database, New Neon database is clicked: a project named after the site is made in the Neon account and its database attached, and it is listed. Three visitors then sign up on the site (sent by the recording, as the site sends them). Submissions is clicked and a table shows the three, newest first, with when each was sent and its email.
A frame above the website template's first screen, made a component and selected. In the Design panel's Code section, New code module opens the editor with a starter React component that reads the component's size. With the editor closed, the canvas shows a picture of what the code draws in place of the component's layers.
THE OLD WAY
Handoff vs. export
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Rebuild every screen by hand from a picture | A route per screen, written for you |
| Guess the fonts, sizes and breakpoints | next/font, variables and media queries from the design |
| Re-implement the prototype's logic | Variables, actions and state machines as React |
| Wire a forms backend from scratch | app/api/popcraft with a database and Neon Auth |
| Fix lint and types before the first commit | Installs, lints, type-checks and builds as it comes |
SMALLER BITES
Just one component? Also fine
Not every job is a whole site. The same Export as web code dialog writes a single layer as React (inline styles or Tailwind), as HTML, or as email markup. And when you want the site online without a developer at all, skip the code: Publish puts it at a link in one click, and can send it to your GitHub or Vercel.
The website template with its Landing screen selected. The web export is opened and React is picked; Export downloads one .tsx file. The component is then compiled and rendered in a page of its own: the landing page shows, and clicking Pricing goes to the pricing screen.
The website template with its Landing screen selected. The web export is opened and React + Tailwind is picked; Export downloads one .tsx file whose elements carry Tailwind classes. The component is then compiled and rendered in a page with Tailwind: the landing page shows, and clicking Pricing goes to the pricing screen.
A website that is published as Version 1, with a GitHub account connected. In the Publish dialog, under Also send to, New GitHub repository is clicked: a private repository named after the site is made in the account, added to the list, and the site is pushed to it at once. The row shows a link to the commit.
ASKED & ANSWERED
Questions, answered
Is it really a normal Next.js app?
Yes. App Router, a page.tsx per route with typed Metadata, next/font, next/image, strict TypeScript and Next.js's recommended ESLint rules. It installs, lints, type-checks and builds as it comes. The only PopCraft package is @popcraft/runtime, a small published package for expressions, players and the site's forms server.
Which versions does it use?
Next.js, React, TypeScript, ESLint and Tailwind CSS are pinned to the versions PopCraft last built exported projects with. They are checked against npm every week, and a new version only reaches an export once sample projects install, lint, type-check and build with it.
Can I keep exporting after a developer edits it?
Exporting again writes the files again. Keep changes that must survive in files of your own, or treat the project as yours from then on and stop exporting.
Does it push to GitHub or deploy to Vercel for me?
Not the Next.js project, today. PopCraft's GitHub and Vercel destinations, in the Publish dialog, send the published static site. The Next.js project is a zip you push and deploy like any other repository.
What about Tailwind?
Pick Next.js project with Tailwind and you get the same project with Tailwind CSS classes in place of style objects.
Only need one component?
Export as web code also writes a single layer as React (with inline styles or Tailwind), HTML or email markup. The Next.js project is for whole pages.
THE MANUAL, FOR THE DETAILS
SHIP IT! YOUR TURN.
A real Next.js project that installs, lints and builds as it comes. Free to start, in your browser or on your Mac.