> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Web app templates

> What ships in vibely-web and how to extend it

Every web app starts from the **`vibely-web`** template. The template provides a working Vite + React + Tailwind project so the dev server is up before the agent writes its first file. The agent extends the template — it doesn't generate one from scratch.

<Note>
  Looking for reusing **your own** project as a starting point for new projects? That is a different feature — see [Workspace templates](/features/design/workspace-templates).
</Note>

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/web-app-templates.webp" alt="vibely-web template" width="1200" height="675" />
</Frame>

## What's in the box

```
vibely-web/
├─ index.html
├─ package.json              # Vite, React, Tailwind, shadcn deps preinstalled
├─ vite.config.ts            # patched at runtime for Cloudflare proxy / HMR
├─ tailwind.config.ts        # design tokens + plugins
├─ postcss.config.cjs
├─ tsconfig.json
├─ src/
│  ├─ main.tsx               # React 19 root
│  ├─ App.tsx                # router + providers
│  ├─ index.css              # Tailwind layers + base styles
│  ├─ components/ui/         # shadcn primitives (Button, Input, Dialog, …)
│  ├─ lib/utils.ts           # `cn()` helper, etc.
│  └─ pages/                 # one starter route
└─ .mana/
   └─ memory.md              # durable agent memory (survives compaction)
```

## Default dependencies

| Category | Package |
| - | - |
| Framework | `react`, `react-dom`, `vite` |
| Routing | `react-router-dom` |
| Styling | `tailwindcss`, `clsx`, `tailwind-merge`, `class-variance-authority` |
| UI | `@radix-ui/*` primitives (under `components/ui/`) |
| Icons | `lucide-react` |
| Forms | `react-hook-form`, `zod`, `@hookform/resolvers` |
| Data | `@tanstack/react-query` |
| State | `zustand` |
| Dates | `date-fns` |
| Charts | `recharts` |
| Animation | `framer-motion` |

The agent has `add_dependency` available, so anything not in the box can be installed on demand. Common adds: `@supabase/supabase-js`, `stripe`, `resend`, `@radix-ui/react-*` extras.

## Template caching

Templates are pulled from GitHub via `git clone --depth 1` and cached on disk. The cache key is the template name + commit hash. To force a refresh in development:

```bash theme={"system"}
rm -rf /tmp/mana-templates/vibely-web
```

In production, templates are pre-baked into the sandbox image via `bun run bake:e2b` (see `scripts/bake-e2b-templates.ts`). That's why the first request to a fresh sandbox is fast — the template is already on disk in the image.

## Why the template ships pre-installed

Three reasons, all load-bearing:

1. **Preview-before-prompt.** The orchestrator can start the dev server before the agent runs. The first prompt's preview URL appears in seconds, not minutes.
2. **HMR without `npm install`.** With deps already on disk, the first `write` to a `.tsx` file triggers a hot reload immediately.
3. **Smaller agent context.** The agent doesn't have to write or know about boilerplate (entry point, providers, build config). It writes only the parts that vary.

## Customising the template

The shipped template is a starting point, not a contract. Anything in it can be replaced:

* Want a different router? Tell the agent "rewrite to use `@tanstack/router`."
* Want SSR? Tell the agent "convert to Next.js 16 App Router." (Note: this exits the SPA path; you'll lose some convenience around the dev server.)
* Want a different UI kit? Tell the agent "remove shadcn and use Mantine instead."

The template is what the agent starts from. After turn 1, it's just your codebase.

## Self-hosted template

To use your own template instead of `vibely-web`, set:

```bash theme={"system"}
E2B_TEMPLATE_WEB=your-org/your-template
```

The repo must include a `package.json` with `dev`, `build`, and `start` scripts, and the dev server must bind to a port that `PreviewManager.detectPort()` can find (defaults to 8080; falls back to a port scan).


## Related topics

- [Workspace templates](/features/design/workspace-templates.md)
- [Mobile app templates](/features/mobile-apps/templates.md)
- [Web App Mode](/features/web-apps/overview.md)
- [Build your first web app](/features/web-apps/quickstart.md)
- [Mobile App Mode](/features/mobile-apps/overview.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.