| 
 | 1 | +<!doctype html>  | 
 | 2 | +<html lang="en">  | 
 | 3 | +  <head>  | 
 | 4 | +    <meta charset="UTF-8" />  | 
 | 5 | +    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  | 
 | 6 | +    <meta  | 
 | 7 | +      name="description"  | 
 | 8 | +      content="0http-bun - A high-performance, minimalist HTTP framework for Bun"  | 
 | 9 | +    />  | 
 | 10 | +    <meta  | 
 | 11 | +      name="keywords"  | 
 | 12 | +      content="bun, http, framework, performance, typescript, minimalist"  | 
 | 13 | +    />  | 
 | 14 | +    <meta name="theme-color" content="#1f2937" />  | 
 | 15 | +    <meta  | 
 | 16 | +      property="og:title"  | 
 | 17 | +      content="0http-bun - High-Performance HTTP Framework for Bun"  | 
 | 18 | +    />  | 
 | 19 | +    <meta  | 
 | 20 | +      property="og:description"  | 
 | 21 | +      content="Build blazing-fast HTTP services with Bun's native performance"  | 
 | 22 | +    />  | 
 | 23 | +    <meta property="og:type" content="website" />  | 
 | 24 | +    <title>0http-bun - High-Performance HTTP Framework for Bun</title>  | 
 | 25 | + | 
 | 26 | +    <!-- Google Fonts - Outfit -->  | 
 | 27 | +    <link rel="preconnect" href="https://fonts.googleapis.com" />  | 
 | 28 | +    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />  | 
 | 29 | +    <link  | 
 | 30 | +      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap"  | 
 | 31 | +      rel="stylesheet"  | 
 | 32 | +    />  | 
 | 33 | + | 
 | 34 | +    <!-- Styles -->  | 
 | 35 | +    <link rel="stylesheet" href="styles.css" />  | 
 | 36 | +  </head>  | 
 | 37 | +  <body>  | 
 | 38 | +    <!-- Header -->  | 
 | 39 | +    <header>  | 
 | 40 | +      <div class="container">  | 
 | 41 | +        <div class="hero-badge">Powered by Bun's Native Performance</div>  | 
 | 42 | +        <h1 class="logo">0http-bun</h1>  | 
 | 43 | +        <p class="tagline">  | 
 | 44 | +          The fastest way to build HTTP services with Bun. Zero config, maximum  | 
 | 45 | +          performance.  | 
 | 46 | +        </p>  | 
 | 47 | +        <ul class="hero-meta">  | 
 | 48 | +          <li>⚡ Sub-millisecond routing</li>  | 
 | 49 | +          <li>🔒 Built-in JWT & CORS</li>  | 
 | 50 | +          <li>📊 Prometheus metrics</li>  | 
 | 51 | +          <li>🎯 TypeScript-first</li>  | 
 | 52 | +        </ul>  | 
 | 53 | +        <div class="header-buttons">  | 
 | 54 | +          <a  | 
 | 55 | +            href="https://github.com/BackendStack21/0http-bun"  | 
 | 56 | +            class="btn btn-primary"  | 
 | 57 | +            >View on GitHub</a  | 
 | 58 | +          >  | 
 | 59 | +          <a href="#quickstart" class="btn btn-secondary">Get Started</a>  | 
 | 60 | +        </div>  | 
 | 61 | +      </div>  | 
 | 62 | +    </header>  | 
 | 63 | + | 
 | 64 | +    <!-- Features Section -->  | 
 | 65 | +    <section class="features" id="features">  | 
 | 66 | +      <div class="container">  | 
 | 67 | +        <h2 class="section-title">Why Choose 0http-bun?</h2>  | 
 | 68 | +        <p class="section-subtitle">  | 
 | 69 | +          Built for developers who demand performance without sacrificing  | 
 | 70 | +          developer experience  | 
 | 71 | +        </p>  | 
 | 72 | +        <div class="features-grid">  | 
 | 73 | +          <div class="feature-card fade-in">  | 
 | 74 | +            <div class="feature-icon">🚀</div>  | 
 | 75 | +            <h3 class="feature-title">Bun-Native Performance</h3>  | 
 | 76 | +            <p class="feature-description">  | 
 | 77 | +              Optimized specifically for Bun's runtime with minimal overhead.  | 
 | 78 | +              Direct use of Web APIs and efficient routing based on the proven  | 
 | 79 | +              trouter library delivers sub-millisecond request handling.  | 
 | 80 | +            </p>  | 
 | 81 | +          </div>  | 
 | 82 | + | 
 | 83 | +          <div class="feature-card fade-in">  | 
 | 84 | +            <div class="feature-icon">🔧</div>  | 
 | 85 | +            <h3 class="feature-title">TypeScript First</h3>  | 
 | 86 | +            <p class="feature-description">  | 
 | 87 | +              Full TypeScript support with comprehensive type definitions for  | 
 | 88 | +              all APIs. Enjoy excellent IDE autocomplete, type safety, and  | 
 | 89 | +              inline documentation as you build.  | 
 | 90 | +            </p>  | 
 | 91 | +          </div>  | 
 | 92 | + | 
 | 93 | +          <div class="feature-card fade-in">  | 
 | 94 | +            <div class="feature-icon">🎯</div>  | 
 | 95 | +            <h3 class="feature-title">Minimalist API</h3>  | 
 | 96 | +            <p class="feature-description">  | 
 | 97 | +              Clean, intuitive API inspired by Express but built for modern  | 
 | 98 | +              runtimes. Get started in seconds without sacrificing power,  | 
 | 99 | +              flexibility, or performance.  | 
 | 100 | +            </p>  | 
 | 101 | +          </div>  | 
 | 102 | + | 
 | 103 | +          <div class="feature-card fade-in">  | 
 | 104 | +            <div class="feature-icon">🔄</div>  | 
 | 105 | +            <h3 class="feature-title">Rich Middleware Ecosystem</h3>  | 
 | 106 | +            <p class="feature-description">  | 
 | 107 | +              Flexible async/await middleware system. Built-in support for CORS,  | 
 | 108 | +              JWT auth, rate limiting, body parsing, Prometheus metrics, and  | 
 | 109 | +              structured logging. Optional dependencies keep your bundle lean.  | 
 | 110 | +            </p>  | 
 | 111 | +          </div>  | 
 | 112 | + | 
 | 113 | +          <div class="feature-card fade-in">  | 
 | 114 | +            <div class="feature-icon">📦</div>  | 
 | 115 | +            <h3 class="feature-title">Tiny Footprint</h3>  | 
 | 116 | +            <p class="feature-description">  | 
 | 117 | +              Lightweight framework with minimal dependencies and intelligent  | 
 | 118 | +              caching. Memory-efficient design with route caching and object  | 
 | 119 | +              reuse to minimize allocations and maximize throughput.  | 
 | 120 | +            </p>  | 
 | 121 | +          </div>  | 
 | 122 | + | 
 | 123 | +          <div class="feature-card fade-in">  | 
 | 124 | +            <div class="feature-icon">🛡️</div>  | 
 | 125 | +            <h3 class="feature-title">Web Standards Built-in</h3>  | 
 | 126 | +            <p class="feature-description">  | 
 | 127 | +              Built entirely on standard Web APIs (Request/Response). Write  | 
 | 128 | +              portable code that works across Bun, Deno, Cloudflare Workers, and  | 
 | 129 | +              other modern runtimes. No vendor lock-in.  | 
 | 130 | +            </p>  | 
 | 131 | +          </div>  | 
 | 132 | +        </div>  | 
 | 133 | +      </div>  | 
 | 134 | +    </section>  | 
 | 135 | + | 
 | 136 | +    <!-- Code Example Section -->  | 
 | 137 | +    <section class="code-section" id="quickstart">  | 
 | 138 | +      <div class="container">  | 
 | 139 | +        <h2 class="section-title">Get Started in Seconds</h2>  | 
 | 140 | +        <p class="section-subtitle">  | 
 | 141 | +          Production-ready HTTP server with full TypeScript support and  | 
 | 142 | +          middleware  | 
 | 143 | +        </p>  | 
 | 144 | +        <div class="code-container">  | 
 | 145 | +          <div class="code-wrapper">  | 
 | 146 | +            <div class="code-header">  | 
 | 147 | +              <div class="code-dots">  | 
 | 148 | +                <span class="code-dot"></span>  | 
 | 149 | +                <span class="code-dot"></span>  | 
 | 150 | +                <span class="code-dot"></span>  | 
 | 151 | +              </div>  | 
 | 152 | +              <span class="code-title">server.ts</span>  | 
 | 153 | +            </div>  | 
 | 154 | +            <pre  | 
 | 155 | +              class="code-block"  | 
 | 156 | +            ><code><span class="code-comment">// Install: bun add 0http-bun</span>  | 
 | 157 | +<span class="code-keyword">import</span> http, { ZeroRequest, StepFunction } <span class="code-keyword">from</span> <span class="code-string">'0http-bun'</span>  | 
 | 158 | +<span class="code-keyword">import</span> { createCORS, createLogger, createRateLimit } <span class="code-keyword">from</span> <span class="code-string">'0http-bun/lib/middleware'</span>  | 
 | 159 | + | 
 | 160 | +<span class="code-comment">// Create router with error handling</span>  | 
 | 161 | +<span class="code-keyword">const</span> {router} = <span class="code-function">http</span>({  | 
 | 162 | +  errorHandler: (err: Error) => Response.<span class="code-function">json</span>({error: err.message}, {status: <span class="code-number">500</span>})  | 
 | 163 | +})  | 
 | 164 | + | 
 | 165 | +<span class="code-comment">// Apply middleware stack</span>  | 
 | 166 | +router.<span class="code-function">use</span>(<span class="code-function">createCORS</span>())          <span class="code-comment">// CORS support</span>  | 
 | 167 | +router.<span class="code-function">use</span>(<span class="code-function">createLogger</span>())        <span class="code-comment">// Request logging</span>  | 
 | 168 | +router.<span class="code-function">use</span>(<span class="code-function">createRateLimit</span>({max: <span class="code-number">100</span>}))  <span class="code-comment">// Rate limiting</span>  | 
 | 169 | + | 
 | 170 | +<span class="code-comment">// Define routes with full type safety</span>  | 
 | 171 | +router.<span class="code-function">get</span>(<span class="code-string">'/api/users/:id'</span>, <span class="code-keyword">async</span> (req: ZeroRequest) => {  | 
 | 172 | +  <span class="code-keyword">return</span> Response.<span class="code-function">json</span>({   | 
 | 173 | +    id: req.params.id,  | 
 | 174 | +    name: <span class="code-string">'John Doe'</span>  | 
 | 175 | +  })  | 
 | 176 | +})  | 
 | 177 | + | 
 | 178 | +router.<span class="code-function">post</span>(<span class="code-string">'/api/users'</span>, <span class="code-keyword">async</span> (req: ZeroRequest) => {  | 
 | 179 | +  <span class="code-keyword">const</span> body = <span class="code-keyword">await</span> req.<span class="code-function">json</span>()  | 
 | 180 | +  <span class="code-keyword">return</span> Response.<span class="code-function">json</span>({created: <span class="code-keyword">true</span>, data: body}, {status: <span class="code-number">201</span>})  | 
 | 181 | +})  | 
 | 182 | + | 
 | 183 | +<span class="code-comment">// Start server</span>  | 
 | 184 | +Bun.<span class="code-function">serve</span>({ port: <span class="code-number">3000</span>, fetch: router.fetch })</code></pre>  | 
 | 185 | +          </div>  | 
 | 186 | +        </div>  | 
 | 187 | +      </div>  | 
 | 188 | +    </section>  | 
 | 189 | + | 
 | 190 | +    <!-- Middleware Section -->  | 
 | 191 | +    <section class="features" style="background: var(--bg)">  | 
 | 192 | +      <div class="container">  | 
 | 193 | +        <h2 class="section-title">Comprehensive Middleware Suite</h2>  | 
 | 194 | +        <p class="section-subtitle">  | 
 | 195 | +          Production-ready middleware for common use cases. Install only what  | 
 | 196 | +          you need.  | 
 | 197 | +        </p>  | 
 | 198 | +        <div class="features-grid">  | 
 | 199 | +          <div class="feature-card fade-in">  | 
 | 200 | +            <div class="feature-icon">📝</div>  | 
 | 201 | +            <h3 class="feature-title">Body Parser</h3>  | 
 | 202 | +            <p class="feature-description">  | 
 | 203 | +              Automatic parsing of JSON, form data, and text payloads with  | 
 | 204 | +              configurable size limits and error handling.  | 
 | 205 | +            </p>  | 
 | 206 | +          </div>  | 
 | 207 | + | 
 | 208 | +          <div class="feature-card fade-in">  | 
 | 209 | +            <div class="feature-icon">🌐</div>  | 
 | 210 | +            <h3 class="feature-title">CORS</h3>  | 
 | 211 | +            <p class="feature-description">  | 
 | 212 | +              Flexible Cross-Origin Resource Sharing with support for  | 
 | 213 | +              credentials, custom headers, and preflight caching.  | 
 | 214 | +            </p>  | 
 | 215 | +          </div>  | 
 | 216 | + | 
 | 217 | +          <div class="feature-card fade-in">  | 
 | 218 | +            <div class="feature-icon">🔐</div>  | 
 | 219 | +            <h3 class="feature-title">JWT Authentication</h3>  | 
 | 220 | +            <p class="feature-description">  | 
 | 221 | +              Secure JSON Web Token authentication with role-based  | 
 | 222 | +              authorization, token validation, and custom claims support.  | 
 | 223 | +            </p>  | 
 | 224 | +          </div>  | 
 | 225 | + | 
 | 226 | +          <div class="feature-card fade-in">  | 
 | 227 | +            <div class="feature-icon">📊</div>  | 
 | 228 | +            <h3 class="feature-title">Prometheus Metrics</h3>  | 
 | 229 | +            <p class="feature-description">  | 
 | 230 | +              Export HTTP metrics for monitoring and alerting. Track request  | 
 | 231 | +              rates, latencies, and error rates out of the box.  | 
 | 232 | +            </p>  | 
 | 233 | +          </div>  | 
 | 234 | + | 
 | 235 | +          <div class="feature-card fade-in">  | 
 | 236 | +            <div class="feature-icon">⏱️</div>  | 
 | 237 | +            <h3 class="feature-title">Rate Limiting</h3>  | 
 | 238 | +            <p class="feature-description">  | 
 | 239 | +              Flexible rate limiting with sliding window support. Protect your  | 
 | 240 | +              APIs from abuse with customizable limits per IP or key.  | 
 | 241 | +            </p>  | 
 | 242 | +          </div>  | 
 | 243 | + | 
 | 244 | +          <div class="feature-card fade-in">  | 
 | 245 | +            <div class="feature-icon">📋</div>  | 
 | 246 | +            <h3 class="feature-title">Logger</h3>  | 
 | 247 | +            <p class="feature-description">  | 
 | 248 | +              Structured request logging with multiple output formats. Built on  | 
 | 249 | +              Pino for high-performance logging in production.  | 
 | 250 | +            </p>  | 
 | 251 | +          </div>  | 
 | 252 | +        </div>  | 
 | 253 | +      </div>  | 
 | 254 | +    </section>  | 
 | 255 | + | 
 | 256 | +    <!-- Stats Section -->  | 
 | 257 | +    <section class="stats">  | 
 | 258 | +      <div class="container">  | 
 | 259 | +        <h2 class="section-title">Built for Modern Web</h2>  | 
 | 260 | +        <p class="section-subtitle">  | 
 | 261 | +          Leveraging Bun's speed with developer-friendly APIs  | 
 | 262 | +        </p>  | 
 | 263 | +        <div class="stats-grid">  | 
 | 264 | +          <div class="stat-item">  | 
 | 265 | +            <div class="stat-number">⚡</div>  | 
 | 266 | +            <div class="stat-label">Sub-ms Routing</div>  | 
 | 267 | +          </div>  | 
 | 268 | +          <div class="stat-item">  | 
 | 269 | +            <div class="stat-number">🎯</div>  | 
 | 270 | +            <div class="stat-label">Zero Config</div>  | 
 | 271 | +          </div>  | 
 | 272 | +          <div class="stat-item">  | 
 | 273 | +            <div class="stat-number">💯</div>  | 
 | 274 | +            <div class="stat-label">100% TypeScript</div>  | 
 | 275 | +          </div>  | 
 | 276 | +          <div class="stat-item">  | 
 | 277 | +            <div class="stat-number">🌐</div>  | 
 | 278 | +            <div class="stat-label">Web Standards</div>  | 
 | 279 | +          </div>  | 
 | 280 | +        </div>  | 
 | 281 | +      </div>  | 
 | 282 | +    </section>  | 
 | 283 | + | 
 | 284 | +    <!-- CTA Section -->  | 
 | 285 | +    <section class="cta">  | 
 | 286 | +      <div class="container">  | 
 | 287 | +        <h2 class="cta-title">Ready to Get Started?</h2>  | 
 | 288 | +        <p class="cta-subtitle">  | 
 | 289 | +          Build high-performance HTTP services with Bun today  | 
 | 290 | +        </p>  | 
 | 291 | +        <a  | 
 | 292 | +          href="https://github.com/BackendStack21/0http-bun/blob/main/README.md"  | 
 | 293 | +          class="btn btn-accent"  | 
 | 294 | +          >Read the Documentation</a  | 
 | 295 | +        >  | 
 | 296 | +      </div>  | 
 | 297 | +    </section>  | 
 | 298 | + | 
 | 299 | +    <!-- Footer -->  | 
 | 300 | +    <footer>  | 
 | 301 | +      <div class="container">  | 
 | 302 | +        <p>  | 
 | 303 | +          © 2025  | 
 | 304 | +          <a href="https://21no.de" target="_blank" rel="noopener noreferrer"  | 
 | 305 | +            >21no.de</a  | 
 | 306 | +          >  | 
 | 307 | +          <br />  | 
 | 308 | +          Open source under the MIT License.  | 
 | 309 | +        </p>  | 
 | 310 | +        <div class="footer-links">  | 
 | 311 | +          <a  | 
 | 312 | +            href="https://github.com/BackendStack21/0http-bun"  | 
 | 313 | +            target="_blank"  | 
 | 314 | +            rel="noopener noreferrer"  | 
 | 315 | +            >GitHub</a  | 
 | 316 | +          >  | 
 | 317 | +          <a  | 
 | 318 | +            href="https://github.com/BackendStack21/0http-bun/issues"  | 
 | 319 | +            target="_blank"  | 
 | 320 | +            rel="noopener noreferrer"  | 
 | 321 | +            >Report Issues</a  | 
 | 322 | +          >  | 
 | 323 | +          <a  | 
 | 324 | +            href="https://www.npmjs.com/package/0http-bun"  | 
 | 325 | +            target="_blank"  | 
 | 326 | +            rel="noopener noreferrer"  | 
 | 327 | +            >npm</a  | 
 | 328 | +          >  | 
 | 329 | +        </div>  | 
 | 330 | +      </div>  | 
 | 331 | +    </footer>  | 
 | 332 | + | 
 | 333 | +    <!-- Scripts -->  | 
 | 334 | +    <script src="script.js"></script>  | 
 | 335 | +  </body>  | 
 | 336 | +</html>  | 
0 commit comments