create-bertui

⚡ BertUI

The fastest React frontend framework. Now with Rust-powered image optimization.

Zero configuration. 494ms dev server. 265ms builds. Perfect SEO with Server Islands.
78% smaller images. 20x faster than Sharp. Zero Rust required.

Get Started

bunx create-bertui my-app && cd my-app && bun run dev

One command. Zero config. Instant speed.

🦀 New in v1.2.4 — Rust Image Optimization

BertUI now ships with a pre-compiled WASM image optimizer written in Rust. Users don't need Rust installed — it's pre-compiled to WASM and ships with BertUI.

Format	Before	After	Gain
PNG	❌ No optimization	✅ 78% smaller	3.6x
JPEG	❌ Just copy	✅ 75% smaller	4x
WebP	❌ Large images	✅ 70% smaller	3.3x
Speed	❌ Slow builds	✅ 20x faster than Sharp	2,000%

// This just works. No Rust. No configuration.
import { optimizeImage } from 'bertui/image-optimizer';

const buffer = await Bun.file('image.png').arrayBuffer();
const result = await optimizeImage(buffer, { format: 'png', quality: 80 });
// ✅ 78% smaller image in result.data

Automatic fallback: If WASM isn't available, BertUI silently falls back to copying. Your builds never break.

🎯 What BertUI Is

A frontend framework that gives you everything React should have had from day one:

• ⚡ Sub-500ms dev starts — Faster than Vite, Next.js, and everything else
• 🏗️ Sub-300ms builds — Production builds in the time others compile one file
• 🏝️ Server Islands — Optional SSG for perfect SEO with one line of code
• 🦀 Rust image optimization — 78% smaller PNGs, pre-compiled WASM, zero Rust required
• 📁 File-based routing — Create files in pages/, that's it
• 🗺️ Auto SEO — Sitemap and robots.txt generated automatically
• 📘 TypeScript ready — Full type definitions, zero setup required
• 🎨 CSS built-in — Global styles with LightningCSS optimization
• 🔥 30ms HMR — Instant hot reloading that actually works

No webpack config. No babel setup. No framework fatigue. Just React, done right.

⚡ Performance

Real benchmarks on a 7-year-old laptop (Intel i3-2348M, 7.6GB RAM).

Metric	BertUI 1.2.4	Vite	Next.js	Your Gain
Dev Server	494ms	713ms	2,100ms	1.4–4.3x faster
Prod Build	265ms	4,700ms	8,400ms	18–32x faster
Bundle Size	100KB	220KB	280KB	2.2–2.8x smaller
HMR Speed	30ms	85ms	120ms	2.8–4x faster
PNG Optimization	78% smaller	0%	0%	—
JPEG Optimization	75% smaller	0%	0%	—

If BertUI is this fast on old hardware, imagine what it does on yours. 🚀

🏝️ Server Islands — Perfect SEO, Zero Complexity

Every React framework makes you choose between speed and SEO. BertUI doesn't.

Framework	Dev Speed	SEO
Vite	✅ Fast	❌ Client-only
Next.js	❌ Slow builds	✅ Good
Gatsby	❌ 45s builds	✅ Perfect
BertUI	✅ 494ms	✅ Perfect

// src/pages/about.jsx

// 🏝️ Add ONE line to enable static generation
export const render = "server";

// 🎯 Optional SEO metadata
export const title = "About Us";
export const description = "Learn about our team";

// ⚛️ Write normal React (no hooks, no event handlers)
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This page is pre-rendered as static HTML!</p>
    </div>
  );
}

At build time, BertUI automatically generates static HTML for instant loading, adds the page to sitemap.xml, and delivers perfect SEO — all while still building in 265ms.

🦀 Image Optimization

No configuration. No Rust installation. Just smaller images.

bun run build

📦 Building with Rust image optimizer...
  ✓ logo.png:  245KB → 54KB  (78% saved)
  ✓ hero.jpg:  1.2MB → 312KB (75% saved)
  ✓ icon.webp: 89KB  → 26KB  (70% saved)
✅ Optimized 12 images, saved 3.4MB

Or use the API directly:

import { optimizeImage, optimizeImagesBatch } from 'bertui/image-optimizer';

// Single image
const result = await optimizeImage(buffer, {
  format: 'png',
  quality: 80  // 0-100, default 80
});

// Batch processing
const results = await optimizeImagesBatch(images, 'webp');

📦 Installation

# Scaffold a new app
bunx create-bertui my-app

# Start development
cd my-app
bun run dev

# Build for production
bun run build

30 seconds from zero to running.

📁 Project Structure

my-app/
├── src/
│   ├── pages/
│   │   ├── index.jsx           # Route: /
│   │   ├── about.jsx           # Route: /about
│   │   └── blog/[slug].jsx     # Route: /blog/:slug
│   ├── components/             # React components
│   ├── styles/
│   │   └── global.css          # Auto-imported
│   └── images/                 # 🦀 Auto-optimized at build
│       ├── logo.png
│       └── hero.jpg
├── public/                     # Static assets
└── dist/                       # Production output
    ├── sitemap.xml             # Auto-generated
    ├── robots.txt              # Auto-generated
    └── images/                 # Optimized images

🛣️ File-Based Routing

Just create files. BertUI handles the rest.

src/pages/index.jsx         →  /
src/pages/about.jsx         →  /about
src/pages/blog/index.jsx    →  /blog
src/pages/blog/[slug].jsx   →  /blog/:slug

Dynamic routes with TypeScript:

// src/pages/blog/[slug].tsx
import { useRouter } from 'bertui/router';

interface Params {
  slug: string;
}

export default function BlogPost() {
  const { params } = useRouter<Params>();
  return <h1>Post: {params.slug}</h1>;
}

⚙️ Configuration

Configuration is optional. BertUI works out of the box.

// bertui.config.js
export default {
  siteName: "My Site",
  baseUrl: "https://example.com",  // Required for sitemap

  imageOptimizer: {
    quality: 80,           // JPEG/PNG quality (0-100)
    webpQuality: 75,       // WebP quality (0-100)
    stripMetadata: true    // Remove EXIF data
  },

  robots: {
    disallow: ["/admin", "/api"],
    crawlDelay: 1
  }
};

📊 Framework Comparison

Feature	BertUI 1.2.4	Next.js	Vite	Remix
Dev Server	494ms	2.1s	713ms	1.8s
Prod Build	265ms	8.4s	4.7s	6.2s
Bundle Size	100KB	280KB	220KB	250KB
Image Optimization	✅ 78% smaller	❌	❌	❌
Server Islands	✅ Built-in	❌	❌	❌
Auto SEO	✅ Yes	⚠️ Manual	❌	⚠️ Manual
TypeScript	✅ Zero setup	⚠️ Config	⚠️ Config	⚠️ Config
Rust Required	❌ No	N/A	N/A	N/A

🚀 Coming Soon

• 🔄 bertui-elysia — Full-stack addon (API routes, auth, database)
• 🎨 bertui-animation — GPU-accelerated animations (Zig)
• 📊 bertui-charts — High-performance charts (Rust)

🙏 Credits

• Runtime: Bun — The fastest JavaScript runtime
• Server: Elysia — Fast and elegant web framework
• CSS: LightningCSS — Lightning-fast CSS processing
• Images: oxipng, mozjpeg, webp — Rust libraries compiled to WASM

Made with ⚡🦀🏝️ by the BertUI team

Website · GitHub · npm