Comparison with Other Static Site Generators

Astro Overview

Astro is a modern static site builder that supports multiple UI frameworks and ships zero JavaScript by default.

Comparison

When to Use Vitto

✅ Choose Vitto if:

• You prefer template-based development
• You want minimal configuration
• You need built-in search
• You don’t need component islands
• You want a simpler mental model
• You want to use vanilla JS libraries (HTMX, Alpine.js)
• You prefer direct Vite configuration

❌ Choose Astro if:

• You want to use React/Vue/Svelte components
• You need component-level hydration (islands)
• You want content collections out of the box
• You might need SSR in the future
• You want more framework flexibility

Library Integration Example

Vitto with HTMX + Alpine.js + Tailwind:

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
import vitto from 'vitto';

export default defineConfig({
  plugins: [
    vitto({
      metadata: { siteName: 'My App', title: 'My App' },
    }),
    tailwindcss(),
  ],
});

{{/* src/pages/index.vto */}}
{{ layout "layouts/base.vto" }}

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

<div hx-get="/api/data" hx-trigger="click">
  Load data
</div>

// src/main.ts
import 'htmx.org';
import Alpine from 'alpinejs';
import './style.css';

window.Alpine = Alpine;
Alpine.start();

Gatsby Overview

Gatsby is a React-based framework with GraphQL for data management and a rich plugin ecosystem.

Comparison

When to Use Vitto

✅ Choose Vitto if:

• You want fast build times with Vite
• You don’t need GraphQL complexity
• You prefer simplicity over features
• You’re building a small to medium site
• You want built-in search
• You want easy library integration (Tailwind, HTMX, etc.)
• You prefer direct configuration over plugins

❌ Choose Gatsby if:

• You need GraphQL for data management
• You want extensive plugin ecosystem
• You need advanced image optimization
• You’re building a large, complex site
• Your team knows React and GraphQL well

Docusaurus Overview

Docusaurus is a documentation-focused static site generator built with React.

Comparison

When to Use Vitto

✅ Choose Vitto if:

• You need flexibility beyond documentation
• You want faster builds with Vite
• You prefer template-based development
• You don’t need doc versioning
• You want minimal JavaScript
• You want to use vanilla JS libraries
• You prefer full control over theming

❌ Choose Docusaurus if:

• You’re building documentation specifically
• You need doc versioning
• You need i18n out of the box
• You want pre-built doc themes
• You need Algolia search integration
• You want MDX support

VitePress Overview

VitePress is a Vite-powered static site generator optimized for documentation, successor to VuePress.

Comparison

When to Use Vitto

✅ Choose Vitto if:

• You need more than just documentation
• You prefer template syntax over Vue
• You want more flexibility in structure
• You need custom data sources
• You don’t need Vue components
• You want to use HTMX, Alpine.js, or vanilla JS
• You prefer complete control over markup

❌ Choose VitePress if:

• You’re building documentation primarily
• You want pre-built doc themes
• You like Vue and want to use Vue components
• You need automatic sidebar generation
• You want markdown-centric workflow

Both Use Vite!

Since both use Vite, they share similar benefits:

// Both can use Vite plugins the same way
import { defineConfig } from 'vite';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    vitto({/* ... */}), // or VitePress
    UnoCSS(),
  ],
});

But Vitto gives you more flexibility:

{{/* Use any library without Vue wrapper */}}
<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
</div>

<div hx-get="/api/data" hx-trigger="click">
  Click to load
</div>

Eleventy Overview

Eleventy is a simpler static site generator with multiple template language support.

Comparison

When to Use Vitto

✅ Choose Vitto if:

• You want Vite’s modern dev experience
• You need built-in search
• You prefer TypeScript configuration
• You want faster builds with HMR
• You like the hook system for data
• You want easy CSS framework integration
• You need modern JavaScript tooling
• You want simple library integration (HTMX, Alpine.js, etc.)

❌ Choose Eleventy if:

• You need multiple template languages
• You want maximum flexibility
• You prefer convention over configuration
• You have existing Eleventy plugins
• You don’t need modern build tooling :::

Feature Comparison Matrix

Legend:

• ✅ Built-in support / Easy integration
• ⚠️ Requires plugins/manual setup
• ❌ Not supported

When to Choose Vitto

[!TIP] If you’re migrating from another SSG, check the migration guides below for step-by-step instructions.

Ideal Use Cases

Vitto is perfect for:

1. Blogs

   • Personal blogs
   • Tech blogs
   • Content-heavy sites

2. Documentation

   • Project documentation
   • API documentation
   • Internal wiki

3. Landing Pages

   • Product pages
   • Marketing sites
   • Portfolio sites

4. Small to Medium Sites

   • Company websites
   • Event websites
   • Community sites

5. Sites Using Vanilla JS Libraries

   • HTMX-powered applications
   • Alpine.js interactive sites
   • Tailwind CSS designs

Vitto Strengths

✅ Vite-Powered

• Lightning-fast HMR (Hot Module Replacement)
• Modern build tooling out of the box
• Optimized production builds
• Plugin ecosystem access

✅ Easy Library Integration

• Use any library via Vite bundler (npm install)
• Or use CDN for quick prototyping
• HTMX, Alpine.js, Tailwind CSS work seamlessly
• No framework lock-in

✅ Simplicity

• Minimal configuration
• Easy to understand
• Quick to set up
• Template-based approach

✅ Built-in Search

• Pagefind integration included
• No external services required
• Works offline

✅ Developer Experience

• TypeScript-first configuration
• Great error messages
• Modern tooling (Vite, Vento)
• Fast feedback loop

✅ Flexibility

• Custom data sources via hooks
• Template-based approach
• Direct Vite configuration
• No lock-in to specific framework

Integration Examples

Using Tailwind CSS:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
import vitto from 'vitto';

export default defineConfig({
  plugins: [
    vitto({
      metadata: { siteName: 'My Site', title: 'My Site' },
    }),
    tailwindcss(),
  ],
});

Using HTMX + Alpine.js:

npm install htmx.org alpinejs

// src/main.ts
import 'htmx.org';
import Alpine from 'alpinejs';
import './style.css';

window.Alpine = Alpine;
Alpine.start();

{{/* src/pages/index.vto */}}
{{ layout "layouts/base.vto" }}

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

<div hx-get="/api/data" hx-trigger="click">
  Load data
</div>

Or use CDN for quick setup:

<!DOCTYPE html>
<html>
<head>
  {{ renderAssets() |> safe }}
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  {{/* Your content */}}
</body>
</html>

When NOT to Use Vitto

❌ Complex Web Applications

• Use Next.js or Remix instead

❌ Need Server-Side Rendering

• Use Next.js, Astro (SSR mode), or Remix

❌ Large E-commerce Sites

• Use Next.js with a CMS

❌ Need React/Vue/Svelte Components

• Use Astro, Next.js, or Gatsby

❌ Extensive Plugin Ecosystem Needed

• Use Gatsby or Eleventy

Migration Guides

[!IMPORTANT] When choosing Vitto, consider that it excels at static site generation with a simple, template-based approach. For SSR or complex web apps, other tools may be more suitable.

From Next.js to Vitto

Before (Next.js):

// pages/blog/[slug].tsx
import { GetStaticPaths, GetStaticProps } from 'next';

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getPosts();
  return {
    paths: posts.map((p) => ({ params: { slug: p.slug } })),
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await getPost(params.slug);
  return { props: { post } };
};

export default function Post({ post }) {
  return <article>{/* ... */}</article>;
}

After (Vitto):

// hooks/posts.ts
export const postsHook = defineHooks('posts', async () => {
  return await getPosts();
});

export const postHook = defineHooks('post', async (params) => {
  return await getPost(params.slug);
});

{{/* src/pages/post.vto */}}
{{ layout "layouts/base.vto" }}
<article>{{/* ... */}}</article>

// vite.config.ts
vitto({
  metadata: { siteName: 'Blog', title: 'Blog' },
  hooks: { posts: postsHook, post: postHook },
  dynamicRoutes: [
    {
      template: 'post',
      dataSource: 'posts',
      getParams: (p) => ({ slug: p.slug }),
      getPath: (p) => `blog/${p.slug}.html`,
    },
  ],
});

From Astro to Vitto

Before (Astro):

---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
  const posts = await getPosts()
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }))
}

const { post } = Astro.props
---

<Layout>
  <article>
    <h1>{post.title}</h1>
  </article>
</Layout>

After (Vitto): Same as Next.js migration above.

From Gatsby to Vitto

Before (Gatsby):

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `);

  data.allMarkdownRemark.edges.forEach(({ node }) => {
    actions.createPage({
      path: node.fields.slug,
      component: './src/templates/post.js',
      context: { slug: node.fields.slug },
    });
  });
};

After (Vitto): Replace GraphQL with simple hooks:

// hooks/posts.ts
import fs from 'node:fs/promises';
import path from 'node:path';
import matter from 'gray-matter';

export default defineHooks('posts', async () => {
  const postsDir = path.join(process.cwd(), 'content/posts');
  const files = await fs.readdir(postsDir);

  return await Promise.all(
    files
      .filter((file) => file.endsWith('.md'))
      .map(async (file) => {
        const content = await fs.readFile(path.join(postsDir, file), 'utf-8');
        const { data, content: markdown } = matter(content);
        return { ...data, slug: file.replace('.md', ''), content: markdown };
      })
  );
});

From Eleventy to Vitto

Before (Eleventy):

// .eleventy.js
module.exports = function (eleventyConfig) {
  eleventyConfig.addCollection('posts', (api) => api.getFilteredByGlob('posts/*.md'));

  // Manual asset handling
  eleventyConfig.addPassthroughCopy('src/css');
  eleventyConfig.addPassthroughCopy('src/js');
};

After (Vitto):

// hooks/posts.ts
import { glob } from 'glob';
import fs from 'node:fs/promises';
import matter from 'gray-matter';

export default defineHooks('posts', async () => {
  const files = await glob('content/posts/*.md');
  return await Promise.all(
    files.map(async (file) => {
      const content = await fs.readFile(file, 'utf-8');
      const { data, content: markdown } = matter(content);
      return { ...data, content: markdown };
    })
  );
});

// vite.config.ts - Assets handled automatically by Vite!
import { defineConfig } from 'vite';
import vitto from 'vitto';
import { postsHook } from './hooks/posts';

export default defineConfig({
  plugins: [
    vitto({
      metadata: { siteName: 'My Site', title: 'My Site' },
      hooks: { posts: postsHook },
    }),
  ],
  // No need to configure CSS/JS - Vite handles it!
});

Summary

Choose Vitto When

• ✅ Building blogs, documentation, or content sites
• ✅ Speed and simplicity are priorities
• ✅ You want built-in search
• ✅ You prefer templates over components
• ✅ You need TypeScript support
• ✅ You want minimal JavaScript in the browser
• ✅ You want to use Vite’s powerful ecosystem
• ✅ You need easy integration with HTMX, Alpine.js, Tailwind CSS
• ✅ You want fast HMR and modern dev experience
• ✅ You prefer direct configuration over plugins

Choose Something Else When

• ❌ You need SSR or SSG + SSR hybrid
• ❌ You need React/Vue/Svelte component islands
• ❌ You’re building a complex web application
• ❌ You need extensive framework-specific plugin ecosystem
• ❌ You require advanced image optimization out of the box
• ❌ You need GraphQL data layer

Next Steps

• Getting Started - Set up your first Vitto project
• Configuration - Configure Vitto
• Examples - See real-world examples
• API Reference - Complete API documentation

Community

Have questions about choosing the right tool?

• 💬 GitHub Discussions
• 🐛 GitHub Issues
• 📖 Documentation