DocsWeb Builder

Open documentation actions

Stack Builder

Compose, preview, run, share, and download Better Fullstack projects in the browser.

The Stack Builder uses the same stack schemas, compatibility rules, and template generator as the CLI. Changes update the reproducible command and shareable URL.

Views

ViewBehavior
BuildSelect compatible stack options and copy the generated CLI command.
PreviewInspect the generated virtual file tree without writing to disk.
Edit & RunGenerate, edit, install, and run supported TypeScript web stacks in a WebContainer.
PresetsApply curated stack selections. Solo-mode only.
SavedStore named stack configurations in this browser. Solo-mode only.

Solo and Multi-Ecosystem modes

Solo mode exposes one ecosystem's complete category surface. Multi-Ecosystem mode composes primary frontend, backend, database, and mobile parts, then attaches capabilities to their owners. The generated command preserves this graph with repeated --part role:ecosystem:tool flags. See Multi-Ecosystem for how Stack Parts and ownership work.

Builder state is encoded in the URL, so a shared link restores the selection. Saved stacks remain in browser storage; they are not uploaded as projects.

Compatibility adjustments

The builder analyzes each selection using the shared compatibility engine. When a choice requires another option or conflicts with the current stack, it explains or applies the compatible state before generating files. Always review the final command when accepting an adjustment.

Edit & Run

Edit & Run creates a disposable generated project and executes it inside a browser WebContainer. It does not deploy the project or send edited source files to Better Fullstack.

The Run view requires Solo mode, the TypeScript ecosystem, at least one web frontend, and a browser that supports the WebContainer runtime. Redwood is excluded because its generated layout does not expose the root development script the runner needs. Native and multi-ecosystem projects can still use Preview and ZIP download, then run with their native toolchains after download.

Runtime flow

  1. The browser generates the project from the selected stack.
  2. The execution copy uses npm because WebContainers provide Node and npm. This does not change the package manager selected for downloads or CLI scaffolds.
  3. Files are mounted in the WebContainer and dependencies are installed.
  4. The generated dev:web or dev script starts and its preview URL appears in the panel.

Dependency installation requires network access from the browser runtime and can take longer on the first run. Runtime logs stay in the browser panel.

Editing and rerunning

Select a text file from the generated file tree and edit it in the code pane. Binary template assets are view-only. Changes live in the disposable browser workspace; choose Save & rerun to sync them to the running project. Editing package.json triggers another dependency install.

When the status becomes Ready, the preview frame shows the generated application. After a Save & rerun, the status cycles through startup again and the preview shows the saved change. Discard restores the last contents successfully synced to the runtime. Stop terminates the current development server. Reloading or leaving the page destroys the WebContainer and unsaved edits.

Troubleshooting

  • If the browser reports that the stack or runtime is unsupported, download the ZIP and run the project with its local toolchain instead.
  • If dependency installation fails, check browser network access and the console output, then retry. Corporate proxies, content blockers, and transient registry failures can prevent WebContainer package downloads.
  • If a source edit fails to compile, use Discard edits to restore the last successfully synced contents, or correct the file and choose Save & rerun again.
  • If the development server stops responding, choose Stop, then start it again. Reloading the page is the final reset, but it discards the disposable workspace and all unsaved edits.
  • If an experiment must be kept, copy it out before reloading or leaving.

Download a ZIP

Choose Download ZIP in the builder. The browser regenerates the selected stack with the shared template generator, loads text and binary template assets, and creates an archive locally.

  • The archive has one sanitized top-level project directory.
  • Generated executable scripts retain executable file metadata.
  • The selected package manager is preserved.
  • bts.jsonc contains the schema-validated current stack configuration.
  • bts.lock.json v2 records generator/template provenance and hashes the exact bytes of template-comparable archived files. It keeps structured package.json and *.env.example baselines used by three-way updates. Hashing excludes bts.jsonc, bts.lock.json, and install-generated lock artifacts (bun.lock, bun.lockb, package-lock.json, pnpm-lock.yaml, yarn.lock, Cargo.lock, uv.lock, poetry.lock, go.sum, and mix.lock).
  • No server-side project workspace is created.

After extraction, follow the generated README and use the matching ecosystem install command. ZIP download does not install dependencies, initialize Git, provision providers, or run checks.

Share or import builder state

Copy the builder URL to share the current stack selection. Opening that URL imports the encoded state back into the builder, where it can be reviewed, adjusted, downloaded, or converted to a command. The URL describes option identifiers, not project source files.

Saved stacks are a separate browser-local feature. They can be reopened, renamed, and updated on the same browser, but are not a cloud project store.

Move to the CLI

For reproducible automation, copy the generated command instead of treating the ZIP as the only record. Browser ZIPs and CLI scaffolds both include bts.jsonc plus the current bts.lock.json, enabling later add, update, and check workflows.

Privacy

Better Fullstack records bounded anonymous run outcomes such as started, ready, failed stage, duration, retry, ecosystem, and capability IDs. It never records edited source, filenames, runtime logs, URLs, env values, or raw errors. One browser-local preference gates both Vercel and Convex analytics, and Do Not Track disables both. Review or change the preference in Anonymous Telemetry.

GitHub Sponsors