Brioche 🥖

The buttery‑smooth Svelte framework

Overview

Brioche is a full‑stack web framework that combines the best of SvelteKit’s developer experience with Bun’s exceptional performance. It features file‑based routing, server‑side rendering, static site generation, and hot module replacement—all optimized for speed and simplicity.

Key Features

• 🚀 Blazing Fast: Built on Bun for exceptional performance
• 🗂️ File‑based Routing: Intuitive routing system with page.svelte and layout.svelte
• ⚡ Hot Module Replacement: WebSocket‑based HMR with no page reloads
• 🎨 Built‑in Sass: Native Sass support with theme system
• 🔧 TypeScript First: Full TypeScript support out of the box
• 📦 ESM Only: Modern ES modules with bleeding‑edge JavaScript features
• 🎯 API Routes: Easy server‑side endpoints with server.ts files
• 🔄 SSR & SSG: Server‑side rendering and static site generation
• 🎭 Actions & Middleware: Form actions and middleware system

Quick Start

# Create a new Brioche project
bunx create-brioche my-app

# Navigate to your project
cd my-app

# Install dependencies
bun install

# Start development server
bun dev

Your app will be running at http://localhost:3000 with hot module replacement enabled.

Architecture

Brioche follows a convention‑over‑configuration approach with a clear project structure:

my-app/
├── src/
│   ├── routes/           # File‑based routing
│   │   ├── page.svelte   # Home page
│   │   ├── layout.svelte # Layout wrapper
│   │   └── about/
│   │       └── page.svelte
│   ├── lib/              # Shared components and utilities
│   └── app.html          # HTML template
├── static/               # Static assets
└── brioche.config.ts     # Configuration

Documentation

Getting Started

• Installation
• Project Structure
• Configuration

Core Concepts

• Routing
• Pages & Layouts
• Data Loading
• API Routes

Features

• Server‑Side Rendering
• Static Site Generation
• Hot Module Replacement
• Theme System
• Middleware
• Actions

Build & Deploy

• Building for Production
• Deployment

Advanced

• CLI Reference
• TypeScript
• Testing
• Migration from SvelteKit

Examples

// src/routes/page.svelte — Simple page component
<script lang="ts">
  let count = 0;
</script>

<h1>Welcome to Brioche!</h1>

<button on:click={() => count++}>
  Clicked {count} times
</button>

// src/routes/api/users/server.ts — API route
export async function GET() {
  const users = await db.users.findMany();

  return new Response(JSON.stringify(users), {
    headers: { "Content-Type": "application/json" }
  });
}

export async function POST({ request }) {
  const user = await request.json();
  const created = await db.users.create(user);

  return new Response(JSON.stringify(created), { status: 201 });
}

// src/routes/blog/[slug]/loader.ts — Data loading
export async function load({ params }) {
  const post = await getPost(params.slug);

  return {
    post,
    title: post.title
  };
}

Performance

Brioche leverages Bun’s performance advantages:

• Fast startup: Projects start in milliseconds
• Quick builds: Production builds are significantly faster than Vite‑based alternatives
• Efficient HMR: Updates reflect instantly without page reloads
• Small bundles: Optimized output with tree‑shaking and minification

Community

• GitHub Issues
• Discussions
• Discord

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © Brioche Framework Team

Note: Brioche is built for speed and modern development practices. It requires Bun 1.0+ and targets bleeding‑edge JavaScript features.