Astro + Preact Example

The Astro + Preact Example is a starter template that demonstrates how to add Preact components to an Astro project, scaffolded with a single npm command.

What is the Astro + Preact Example?

The Astro + Preact Example is a starter project from the official withastro/astro repository, located under examples/framework-preact. It shows how to write Preact components as .jsx or .tsx files inside an Astro site and have them automatically processed by Astro's build pipeline. The template takes a new project name as input through the npm init astro command and produces a working Astro site with Preact installed and configured. The live demo is hosted on a Vercel preview URL, and the project can be opened directly in StackBlitz.

Key Features

• Astro framework — Built as an example in the withastro/astro repository, the template is based on Astro and its component island architecture.
• One-command scaffold — npm init astro -- --template framework-preact creates a new project with the Preact integration already set up.
• Preact component support — Write UI components in .jsx or .tsx files; Preact is compiled and hydrated by Astro when needed.
• StackBlitz integration — A link on the page opens the full template in StackBlitz, letting you edit and run it in your browser without a local setup.
• Vercel deployment — The demo runs at a .vercel.app URL, confirming the template builds and deploys successfully on Vercel.
• CodeSandbox metadata — The repository metadata lists "Created with CodeSandbox", indicating the template was generated in a cloud development environment.

Who is it for?

• Developers learning Astro — Use this template to see how a third-party framework like Preact is integrated into Astro and how islands are hydrated.
• Preact enthusiasts — Get a ready-to-run Astro configuration for Preact so you can focus on building components instead of wiring up tooling.
• Static site builders — Scaffold a marketing page, blog, or portfolio with Astro and add Preact widgets for carousels, forms, or other interactive elements.

What can you do with it?

• Scaffold a new site — Run the npm command to generate a project that already supports Preact components.
• Experiment immediately — Open the StackBlitz link to modify the template online and see changes instantly.
• Deploy to Vercel — Push the project to a Git provider and import it into Vercel; the demo URL shows Astro output works there.

How does it work?

Run npm init astro -- --template framework-preact to create the project. Then add Preact components as .jsx or .tsx files in your project; Astro's Preact integration automatically compiles them and serves only the necessary JavaScript to the browser.

FAQ

Is the Astro Preact Example free to use?

Yes, the template is part of the public withastro/astro repository on GitHub, so you can view, copy, and modify it freely.

How do I create a new project from this template?

Use the command npm init astro -- --template framework-preact in your terminal. npm will prompt you for a project directory and then scaffold the template.

Can I write TypeScript with Preact?

Yes, the template explicitly supports .tsx files, so TypeScript syntax is allowed in your Preact components alongside .jsx.

Does this template work on Vercel?

The live demo is hosted on a Vercel preview domain, and Vercel automatically recognizes Astro projects, so you can deploy the template there without extra configuration.