Capri.build: Fast Static Site Generator with Islands
By SW HabitationIf you’re very beginners to web development and looking for an easy way to build fast, lightweight websites, you might have come across Capri.build. But what exactly is the Capri term ?
Capri is a static site generator (SSG) that lets you build websites using popular frontend frameworks like React, Vue, Svelte, Preact, or SolidJS—without sending unnecessary javascript to the browser.
Unlike the traditional SSGs that we have worked with, Capri follows an "Islands Architecture".
That means your site is static by default but allows selective interactivity only where needed.
By using capri, you can build a static website as if it was a single page app. If you already know how to build an SPA in your choice of frameworks you know everything it takes. You can see which frameworks capri is supported by here.
What is Capri?
Capri is a modern static site generator that build static sites with interactive islands.
- Uses React, Vue, Svelte, Preact, or SolidJS -Its your choice
- Generates fully static pages - zero JavaScript by default
- Supports interactive components called islands without making the entire page dynamic
- Integrates with Vite for a smooth developer experience
- Works with headless CMSs for easy content management
If you’ve used Next.js, Astro, or 11ty, Capri feels similar but forwards less JavaScript by default, that makes your site even faster.
Why use Capri ?
- Blazing Fast: Capri doesn’t load unnecessary JavaScript, your website loads super quickly.
- Eco-Friendly: Less JavaScript === Lower energy consumption, making Capri a great choice for sustainable web development.
- Easy to Use: You can write components in React, Vue, Svelte, Preact, or SolidJS, so no need to learn a new framework.
- Efficient Interactivity: Instead of making the whole page dynamic, you only add JavaScript where it's needed.
- SEO-Friendly: The pages are fully static, search engines can easily index them, improving your Google ranking and make your webiste seo in good state.
How to Install Capri ? A step-by-step guide
1. Install Capri
Open your terminal and run below command,
1
npm create capri my-projectReplace my-project with your favourite project name. This sets up a new Capri project.
2. Choose Your Framework
Capri supports multiple frameworks. You can select one during setup, like:
1
npm create capri my-project -- -e reactor
1
npm create capri my-project -- -e vue3. Install Dependencies
1
2
cd my-project
npm install4. Run the Development Server
1
npm run devThis starts a local server where you can preview your site.
How Capri Uses "Islands Architecture" for Interactivity ?
What is the "Islands" term?
Most static site generators either,
- Keep everything static means no interactivity
or
- Make everything dynamic (slow performance)
Capri solves this problem by letting you selectively add interactivity only where you need it. These interactive sections are called "Islands"
If you want a static site but need some interactivity, just name your component with .island.
For example: components/
- Header.tsx # Static component
- Counter.island.tsx # Interactive component
- Footer.tsx # Static component
Here, only Counter.island.tsx will have javaScript, while the rest of the page remains pure HTML/CSS.
Capri with Vite
Capri works flowlessly with Vite. Just add this to your vite.config.ts,
1
2
3
4
5
6
7
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import capri from '@capri-js/react';
export default defineConfig({
plugins: [react(), capri()],
});This ensures Capri integrates smoothly with Vite.
Who should use capri?
- Absolute Beginners: If you're new to web development and want to build a fast site without much complexity.
- Eco-Conscious Developers: If you care about sustainable web development, Capri is a great choice.
- Bloggers & Content Creators: Capri is great for blogs, portfolios, and documentation sites because of its SEO benefits.
- Frontend Developers: If you love React, Vue, or Svelte and want a simpler alternative to Next.js.
Conclusion
Capri is a turning point for static site generation[SSG]
It’s fast, lightweight, SEO-friendly, and lets you build interactive websites without unnecessary JavaScript.
If you're looking for an alternative to Next.js, Astro, or 11ty, Capri is worthy for all.
It’s simple enough for beginners yet powerful enough for advanced developers.
So, go ahead and give capri a shot today to build your first super fast website now.