Choose and Use Templates

Why templates matter

Templates give you:

• A working project structure
• Preconfigured tooling and dependencies
• A faster path to a production-ready site

If you want to ship quickly, start with a template.

Built-in starter templates

The App Builder includes 14 ready-to-use starter templates. Click any stack icon on the start screen to begin:

| Template | Description | |----------|-------------| | React + Vite | React with Vite and TypeScript for fast development | | Next.js with shadcn/ui | Full-stack Next.js with shadcn/ui components and Tailwind | | Vue.js | Vue starter with modern tooling | | Angular | Angular with TypeScript and best practices | | Astro | Lightweight static site generator for fast pages | | SvelteKit | SvelteKit for efficient web applications | | Remix | Remix framework with TypeScript for full-stack apps | | Qwik | Qwik framework for resumable applications | | SolidJS | SolidJS with Tailwind for reactive UIs | | Expo | Expo for cross-platform mobile apps (React Native) | | Slidev | Developer-friendly presentations using Markdown | | Vite + shadcn/ui | Vite with shadcn/ui components | | Vite + TypeScript | Minimal Vite setup with TypeScript | | Vanilla + Vite | Minimal Vite for vanilla JavaScript projects |

Pick the stack that matches your goals and hosting preference.

How to choose the right template

Ask:

• Do I need routing or dynamic pages? → Next.js or Remix
• Do I want a fast static site? → Astro or Vanilla + Vite
• Am I building a mobile app? → Expo
• Do I need a presentation? → Slidev
• Does my team already know a framework? → Use that framework's template

Where to find templates

Authoritative sources for templates:

• Paid marketplaces: ThemeForest site templates, CodeCanyon React templates, Creative Market website templates
• Free sources: Vercel templates, Next.js examples, GitHub search for templates

Use GitHub for external templates

To use any purchased or third-party template in the App Builder, you need it in a GitHub repository. The builder imports projects from Git URLs.

• If the seller provides a GitHub repo, use that URL directly.
• If you receive a ZIP, upload the files to your own GitHub repo first.

For the full workflow, follow: Use a purchased template with GitHub

Customizing a template

After you choose a template:

1. Open the file tree
2. Update the homepage content
3. Adjust layout and styles
4. Preview changes

If you get stuck, ask the builder AI to refactor or restyle the layout.

Next steps

• Preview and run commands: web-builder-preview-terminal
• Export your project: web-builder-files-export