Framework

There is no state. There is no build process. There is no (or, at least, very little) client-side JavaScript.

You write JSX. Bun serves HTML. The browser renders it.

🛠

Write JSX

Author your components in JSX with imports, props, and composition.

//JSX is more modular, and easier to look at than HTML.

import { Header } from './components/Header';
import { Footer } from './components/Footer';
import { ProductCard } from './components/ProductCard';

const products = [
  { id: 1, name: 'Wireless Headphones', price: 99.99 },
  { id: 2, name: 'Smart Watch', price: 199.99 },
  { id: 3, name: 'Bluetooth Speaker', price: 79.99 },
  { id: 4, name: 'Laptop Stand', price: 49.99 },
];

const ProductsPage = () => (
  <div className="container">
    <Header title="TechShop" />
    
    <main>
      <h1>Featured Products</h1>
      <div className="product-grid">
        {products.map(product => (
          <ProductCard
            key={product.id}
            name={product.name}
            price={product.price}
          />
        ))}
      </div>
    </main>
    
    <Footer />
  </div>
);

export default ProductsPage;

⚡

Bun Serves Static HTML

Server-side rendering converts your JSX to pure HTML before sending to the client.

// Server-side rendering with Bun
import { renderToString } from 'react-dom/server';
import ProductsPage from './ProductsPage';

const server = Bun.serve({
  port: 3000,
  async fetch(req) {
    const url = new URL(req.url);
    
    if (url.pathname === '/' || url.pathname === '/products') {
      // Render the React component to HTML string
      const html = renderToString(<ProductsPage />);
      
      // Return the complete HTML document
      return new Response(
        `
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>TechShop - Featured Products</title>
            <link rel="stylesheet" href="/styles.css">
          </head>
          <body>
            ${html}
          </body>
        </html>`,
        {
          headers: {
            'Content-Type': 'text/html'
          }
        }
      );
    }
    
    return new Response('Not Found', { status: 404 });
  }
});

🖥

Browser Renders HTML

The browser receives and displays plain HTML with no JavaScript overhead.

/* What the browser actually receives */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechShop - Featured Products</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <div class="container">
      <header>
        <div class="logo">T</div>
        <h2>TechShop</h2>
        <nav>
          <a href="/">Home</a>
          <a href="/products">Products</a>
          <a href="/cart">Cart</a>
        </nav>
      </header>
      
      <main>
        <h1>Featured Products</h1>
        <div class="product-grid">
          <div class="product-card">
            <div class="product-image">Headphones</div>
            <div class="product-info">
              <h3 class="product-title">Wireless Headphones</h3>
              <div class="product-price">$99.99</div>
              <button class="product-button">Add to Cart</button>
            </div>
          </div>
          
        </div>
      </main>
      
      <footer>
        <p>© 2025 TechShop</p>
      </footer>
    </div>
  </body>
</html>

<div class="container">
  <header>
    <div class="logo">T</div>
    <h2>TechShop</h2>
    <nav>
      <a href="/">Home</a>
      <a href="/products">Products</a>
      <a href="/cart">Cart</a>
    </nav>
  </header>
  
  <main>
    <h1>Featured Products</h1>
    <div class="product-grid">
      <div class="product-card">
        <div class="product-image">Headphones</div>
        <div class="product-info">
          <h3 class="product-title">Wireless Headphones</h3>
          <div class="product-price">$99.99</div>
          <button class="product-button">Add to Cart</button>
        </div>
      </div>
      
    </div>
  </main>
  
  <footer>
    <p>© 2025 TechShop</p>
  </footer>
</div>