diff options
| -rw-r--r-- | packages/bun-landing/index.css | 52 | ||||
| -rw-r--r-- | packages/bun-landing/page.tsx | 244 | ||||
| -rw-r--r-- | packages/bun-landing/public/index.css | 52 | ||||
| -rw-r--r-- | packages/bun-landing/public/index.html | 19 | ||||
| -rw-r--r-- | packages/bun-landing/ssr.tsx | 4 |
5 files changed, 273 insertions, 98 deletions
diff --git a/packages/bun-landing/index.css b/packages/bun-landing/index.css index bd1b41e96..9bc802de0 100644 --- a/packages/bun-landing/index.css +++ b/packages/bun-landing/index.css @@ -302,7 +302,6 @@ header { align-items: center; width: min-content; white-space: nowrap; - gap: 2rem; } .Tab { @@ -312,6 +311,7 @@ header { padding-bottom: 8px; border-bottom: 1px solid #ccc; cursor: pointer; + padding: 16px 16px; } .Tab[data-tab="react"]:hover, @@ -321,6 +321,7 @@ header { .Tab[data-tab="ffi"]:hover, .Graphs--active-ffi .Tab[data-tab="ffi"] { border-bottom-color: aquamarine; + background-color: rgba(130, 216, 247, 0.1); border-right-color: aquamarine; border-left-color: aquamarine; } @@ -630,6 +631,11 @@ li { } } +#explain { + max-width: 650px; + margin: 0 auto; +} + @media (max-width: 930px) { header { padding: 24px 16px; @@ -872,3 +878,47 @@ li { border-top: 1px solid rgba(200, 200, 200, 0.1); } } + +#explain p > code { + white-space: pre; + padding: 1px 2px; +} + +.Group { + display: block; +} + +.Tag--Command { + display: block; + width: fit-content; + margin-bottom: 0.5rem; + padding: 8px 12px; +} + +.Label-replace { + font-weight: 500; +} + +.Label-text { + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +#batteries { + padding-left: 0; +} + +.Group { + margin-bottom: 2rem; +} + +.Group strong { + display: block; +} + +.Built { + text-align: center; + margin-top: 4rem; + margin-bottom: 2rem; + color: #333; +} diff --git a/packages/bun-landing/page.tsx b/packages/bun-landing/page.tsx index dba64517e..66590de79 100644 --- a/packages/bun-landing/page.tsx +++ b/packages/bun-landing/page.tsx @@ -48,6 +48,18 @@ const Bun = ({ children, href, Tag = href ? "a" : "span" }) => ( const fmt = new Intl.NumberFormat(); +const Label = ({ children, replace }) => { + if (replace) { + return ( + <div className="Label"> + <div className="Label-replace">{replace}</div> + <div className="Label-text">{children}</div> + </div> + ); + } + return <div className="Label">{children}</div>; +}; + const BarGraphItem = ({ type, amount = 0, label, max = 0 }) => ( <div className={`BarGraphItem BarGraphItem--${type}`} @@ -187,9 +199,17 @@ const InstallBox = ({ desktop = false }) => ( </div> ); +const Group = ({ children, ...props }) => ( + <div {...props} className="Group"> + {children} + </div> +); + export default () => ( <html> <head> + <meta charSet="UTF-8" /> + <link rel="stylesheet" href="/index.css" /> <script type="module" src="/index.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1" /> @@ -239,6 +259,7 @@ export default () => ( <InstallBox desktop /> </div> + <div className="Graphs Graphs--active-react"> <div className="Tabs"> <div data-tab="react" className="Tab"> @@ -412,42 +433,39 @@ export default () => ( </div> <section id="explain-section"> <div id="explain"> - <h1>🐚 All the tools</h1> + <h1>Tell me more about Bun</h1> + <p> + Bun is a modern JavaScript runtime like Node or Deno. It was built + from scratch to focus on three main things: + </p> <ul> - <li title="npm takes 160ms to run a script that does nothing"> - <Command>bun run</Command> start - <code className="mono">package.json "scripts"</code>{" "} - <PerformanceClaim href="https://twitter.com/jarredsumner/status/1454218996983623685"> - 30x faster than <code className="mono">npm run</code> - </PerformanceClaim> - </li> - - <li title="JavaScript package managers are not using the fastest system calls"> - <Command>bun install</Command> installs npm packages 2x - 100x - faster than npm, yarn or pnpm - </li> + <li>Extremely lightweight (it has the edge in mind).</li> <li> - <Command>bun dev</Command> bun's frontend dev server{" "} - <PerformanceClaim href="https://twitter.com/jarredsumner/status/1434396683861782530"> - boots 30x faster than Create React App - </PerformanceClaim> - </li> - - <li> - <Command>bun bun</Command> bundle node_modules into a single file + New levels of performance (extending JavaScriptCore, the engine). </li> - <li> - <Command>bun wiptest</Command>{" "} - <PerformanceClaim href="https://twitter.com/jarredsumner/status/1542824445810642946"> - you've never seen a JavaScript test runner this fast - </PerformanceClaim>{" "} - (or incomplete) + Being a great and complete tool (bundler, transpiler, package + manager). </li> </ul> - - <h1>🔋 Batteries included</h1> - <ul> + <p> + Bun is designed as a drop-in replacement for your current JavaScript + & TypeScript apps or scripts — on your local computer, server or + on the edge. Bun natively implements hundreds of Node.js and Web + APIs, including 90% of Node-API functions (native modules), fs, + path, Buffer and more. The goal of Bun is to run most of the worlds + JavaScript outside of browsers, bringing performance and complexity + enhancements to your future infrastructure, as well as developer + productivity through better, simpler tooling. + </p> + <p> + The goal of Bun is to run most of the worlds JavaScript outside of + browsers, bringing performance and complexity enhancements to your + future infrastructure, as well as developer productivity through + better, simpler tooling. + </p> + <h1>Batteries included</h1> + <ul id="batteries"> <li> Web APIs like{" "} <WebAPI href="https://developer.mozilla.org/en-US/docs/Web/API/fetch"> @@ -469,36 +487,43 @@ export default () => ( and CommonJS are supported, but Bun internally uses ESM. </li> <li> - <React>JSX</React> <TypeScript>TypeScript</TypeScript> in bun.js, - every file is transpiled. TypeScript & JSX just work. + In bun.js, every file is transpiled.{" "} + <TypeScript>TypeScript</TypeScript> & <React>JSX</React> just + work. </li> <li> - <TypeScript>tsconfig.json</TypeScript> bun supports{" "} - <code className="">"paths"</code>, <code>"jsxImportSource"</code> - and more from tsconfig.json + bun supports <code className="">"paths"</code>,{" "} + <code>"jsxImportSource"</code> + and more from <TypeScript>tsconfig.json</TypeScript> files </li> <li> <Bun>Bun.Transpiler</Bun> bun's JSX & TypeScript transpiler is available as an API in Bun.js </li> <li> - <Bun>Bun.write</Bun> use the fastest system calls available to - write, copy, pipe, send and clone files. + use the fastest system calls available with <Bun>Bun.write</Bun>{" "} + to write, copy, pipe, send and clone files. </li> <li> - <Bun>.env</Bun> bun.js automatically loads environment variables - from .env files. No more{" "} + bun.js automatically loads environment variables from{" "} + <Bun>.env</Bun> files. No more{" "} <code class="mono">require("dotenv").load()</code> </li> <li> - <Bun>bun:sqlite</Bun> fast SQLite3 client built-in + bun ships with a fast SQLite3 client builtin <Bun>bun:sqlite</Bun> </li> <li> <NodeJS href="https://github.com/Jarred-Sumner/bun/issues/158"> Node-API </NodeJS>{" "} - bun.js implements most of Node-API (NAPI). Many Node.js native - modules just work. + bun.js implements most of Node.js'{" "} + <a + href="https://nodejs.org/api/n-api.html#node-api" + target="_blank" + > + native addons API + </a> + , Node-API (NAPI). Many Node.js native modules just work. </li> <li> <Bun>bun:ffi</Bun> call native code from JavaScript with bun's @@ -511,8 +536,46 @@ export default () => ( </li> </ul> + <h1>How does Bun work?</h1> + <p> + Bun.js uses the{" "} + <a href="https://github.com/WebKit/WebKit/tree/main/Source/JavaScriptCore"> + JavaScriptCore + </a>{" "} + engine, which tends{" "} + <a + target="blank" + href="https://twitter.com/jarredsumner/status/1499225725492076544" + > + to start + </a>{" "} + and perform a little faster than more traditional choices like V8. + Bun is written in{" "} + <a href="https://ziglang.org/"> + <Zig></Zig> + </a> + , a low-level programming language with manual memory management. + <br /> + <br /> + Most of Bun is written from scratch including the JSX/TypeScript + transpiler, npm client, bundler, SQLite client, HTTP client, + WebSocket client and more. + </p> + <h1>Why is Bun fast?</h1> + <p> + An enourmous amount of time spent profiling, benchmarking and + optimizing things. The answer is different for every part of Bun, + but one general theme:{" "} + <a href="https://ziglang.org/"> + <Zig></Zig> + </a>{" "} + 's low-level control over memory and lack of hidden control flow + makes it much simpler to write fast software.{" "} + <a href="https://github.com/sponsors/ziglang"> + Sponsor the Zig Software Foundation + </a> + </p> <h1>Getting started</h1> - <p> To install bun, run this{" "} <a target="_blank" href="https://bun.sh/install"> @@ -520,11 +583,9 @@ export default () => ( </a>{" "} in your terminal. It downloads Bun from GitHub. </p> - <CodeBlock lang="shell">{` curl https://bun.sh/install | bash `}</CodeBlock> - <p> {" "} Bun's HTTP server is built on web standards like{" "} @@ -542,7 +603,6 @@ curl https://bun.sh/install | bash Response </a> </p> - <CodeBlock lang="js">{` // http.js export default { @@ -552,11 +612,8 @@ export default { }, }; `}</CodeBlock> - <p>Run it with bun:</p> - <CodeBlock lang="shell">{`bun run http.js`}</CodeBlock> - <p> Then open{" "} <a target="_blank" href="http://localhost:3000"> @@ -574,53 +631,61 @@ export default { <a href="https://bun.sh/discord">Bun's Discord</a> </p> - <h1>How does Bun work?</h1> - - <p> - Bun.js uses the{" "} - <a href="https://github.com/WebKit/WebKit/tree/main/Source/JavaScriptCore"> - JavaScriptCore - </a>{" "} - engine, which tends{" "} - <a - target="blank" - href="https://twitter.com/jarredsumner/status/1499225725492076544" - > - to start - </a>{" "} - and perform a little faster than more traditional choices like V8. - Bun is written in{" "} - <a href="https://ziglang.org/"> - <Zig></Zig> - </a> - , a low-level programming language with manual memory management. + <h1>Bun CLI</h1> + <Group title="npm takes 160ms to run a script that does nothing"> + <Command>bun run</Command> + <p> + The same command for running JavaScript & TypeScript files + with bun's JavaScript runtime also runs package.json{" "} + <code className="mono">"scripts"</code>. + </p> + <strong> + Replace <code className="mono">npm run</code> with{" "} + <code className="mono">bun run</code> and save 160ms on every run. + </strong> <br /> + <div> + bun runs package.json scripts{" "} + <PerformanceClaim href="https://twitter.com/jarredsumner/status/1454218996983623685"> + 30x faster than <code className="mono">npm run</code> + </PerformanceClaim> + </div>{" "} + </Group> + + <Group title="JavaScript package managers are not using the fastest system calls"> + <Command>bun install</Command> + <p> + bun install is an npm-compatible package manager. You probably + will be surprised by how much faster copying files can get. + </p> + <strong> + Replace <code className="mono">yarn</code> with{" "} + <code className="mono">bun install</code> and get 20x faster + package installs. + </strong> <br /> - Most of Bun is written from scratch including the JSX/TypeScript - transpiler, npm client, bundler, SQLite client, HTTP client, - WebSocket client and more. - </p> - - <h1>Why is Bun fast?</h1> - <p> - An enourmous amount of time spent profiling, benchmarking and - optimizing things. The answer is different for every part of Bun, - but one general theme:{" "} - <a href="https://ziglang.org/"> - <Zig></Zig> - </a>{" "} - 's low-level control over memory and lack of hidden control flow - makes it much simpler to write fast software.{" "} - <a href="https://github.com/sponsors/ziglang"> - Sponsor the Zig Software Foundation - </a> - </p> + <div> + bun install uses the fastest system calls available to copy files. + </div> + </Group> + <Group> + <Command>bun wiptest</Command> + <p> + A Jest-like test runner for JavaScript & TypeScript projects + builtin to bun + </p> + <Label> + <PerformanceClaim href="https://twitter.com/jarredsumner/status/1542824445810642946"> + You've never seen a JavaScript test runner this fast + </PerformanceClaim>{" "} + (or incomplete) + </Label> + </Group> <h1>What is the license?</h1> <p> MIT License, excluding dependencies which have various licenses. </p> - <h1>How do I see the source code?</h1> <p> Bun is on <a href="https://github.com/Jarred-Sumner/bun">GitHub</a> @@ -646,6 +711,7 @@ document.querySelector("#code-box-copy").addEventListener("click", async e => { `, }} /> + <div className="Built">Built with Bun {process.version}</div> </body> </html> ); diff --git a/packages/bun-landing/public/index.css b/packages/bun-landing/public/index.css index bd1b41e96..9bc802de0 100644 --- a/packages/bun-landing/public/index.css +++ b/packages/bun-landing/public/index.css @@ -302,7 +302,6 @@ header { align-items: center; width: min-content; white-space: nowrap; - gap: 2rem; } .Tab { @@ -312,6 +311,7 @@ header { padding-bottom: 8px; border-bottom: 1px solid #ccc; cursor: pointer; + padding: 16px 16px; } .Tab[data-tab="react"]:hover, @@ -321,6 +321,7 @@ header { .Tab[data-tab="ffi"]:hover, .Graphs--active-ffi .Tab[data-tab="ffi"] { border-bottom-color: aquamarine; + background-color: rgba(130, 216, 247, 0.1); border-right-color: aquamarine; border-left-color: aquamarine; } @@ -630,6 +631,11 @@ li { } } +#explain { + max-width: 650px; + margin: 0 auto; +} + @media (max-width: 930px) { header { padding: 24px 16px; @@ -872,3 +878,47 @@ li { border-top: 1px solid rgba(200, 200, 200, 0.1); } } + +#explain p > code { + white-space: pre; + padding: 1px 2px; +} + +.Group { + display: block; +} + +.Tag--Command { + display: block; + width: fit-content; + margin-bottom: 0.5rem; + padding: 8px 12px; +} + +.Label-replace { + font-weight: 500; +} + +.Label-text { + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +#batteries { + padding-left: 0; +} + +.Group { + margin-bottom: 2rem; +} + +.Group strong { + display: block; +} + +.Built { + text-align: center; + margin-top: 4rem; + margin-bottom: 2rem; + color: #333; +} diff --git a/packages/bun-landing/public/index.html b/packages/bun-landing/public/index.html index 5c2a8104b..487b95187 100644 --- a/packages/bun-landing/public/index.html +++ b/packages/bun-landing/public/index.html @@ -1,16 +1,21 @@ -<!DOCTYPE html><html><head><link rel="stylesheet" href="/index.css"/><script type="module" src="/index.js"></script><meta name="viewport" content="width=device-width, initial-scale=1"/></head><body><div id="header-wrap"><header><a href="/" id="logo-link"><img src="/logo@2x.png" alt="Bun" id="logo"/><img src="/Bun@2x.png" alt="Bun" id="logo-text"/></a><nav class="Navigation"><li><a class="NavText" href="/docs">Docs</a></li><li><a class="NavText" href="/discord">Discord</a></li><li><a class="NavText" href="/github">GitHub</a></li></nav></header></div><div id="pitch"><main><div id="pitch-content"><h1 class="tagline">Bun is a fast all-in-one JavaScript runtime</h1><p class="subtitle">Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.</p><div class="InstallBox InstallBox--desktop" id="install"><div id="install-label"><div class="unselectable" id="install-label-heading">Install Bun CLI v0.1.0 (beta)</div><div class="unselectable" id="install-label-subtitle">macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux</div></div><div id="code-box"><div id="curl">curl https://bun.sh/install | bash</div><div class="unselectable" id="code-box-copy">copy</div></div><a class="unselectable" id="view-source-link" target="_blank" href="https://bun.sh/install">Show script source</a></div></div><div class="Graphs Graphs--active-react"><div class="Tabs"><div data-tab="react" class="Tab">Bun.serve</div><div data-tab="sqlite" class="Tab">bun:sqlite</div><div data-tab="ffi" class="Tab">bun:ffi</div></div><div id="active-tab" class="ActiveTab"><div class="BarGraph BarGraph--react BarGraph--horizontal BarGraph--dark"><div class="BarGraph-heading">Server-side rendering React</div><div title="oha -z 5s" class="BarGraph-subheading">HTTP requests per second (Linux AMD64)</div><div style="--count:3" class="BarGraphList"><div class="BarGraphItem BarGraphItem--bun" style="--amount:48936;--max:61170"><div style="--amount:48936;--max:61170" title="48936 requests per second" class="BarGraphBar"><div style="--amount:48936;--max:61170" class="BarGraphBar-label">48,936</div></div></div><div class="BarGraphItem BarGraphItem--node" style="--amount:16288;--max:61170"><div style="--amount:16288;--max:61170" title="16288 requests per second" class="BarGraphBar"><div style="--amount:16288;--max:61170" class="BarGraphBar-label">16,288</div></div></div><div class="BarGraphItem BarGraphItem--deno" style="--amount:12289;--max:61170"><div style="--amount:12289;--max:61170" title="12289 requests per second" class="BarGraphBar"><div style="--amount:12289;--max:61170" class="BarGraphBar-label">12,289</div></div></div></div><div style="--count:3" class="BarGraphKey"><a href="https://github.com/Jarred-Sumner/bun/bench/react-hello-world.jsx" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">bun</div><div class="BarGraphKeyItem-value">v0.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/bench/react-hello-world.deno.jsx" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">node</div><div class="BarGraphKeyItem-value">v18.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/bench/react-hello-world.node.jsx" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">deno</div><div class="BarGraphKeyItem-value">v1.23.2</div><div class="BarGraphKeyItem-viewSource">View source</div></a></div></div><div class="BarGraph--sqlite BarGraph BarGraph--horizontal BarGraph--dark"><div class="BarGraph-heading">Average queries per second<!-- --> <!-- --></div><div class="BarGraph-subheading">SELECT * from "Orders" (Northwind Traders)</div><div style="--count:3" class="BarGraphList"><div class="BarGraphItem BarGraphItem--bun" style="--amount:60.24;--max:76"><div style="--amount:60.24;--max:76" title="60.24 queries per second" class="BarGraphBar"><div style="--amount:60.24;--max:76" class="BarGraphBar-label">60.24</div></div></div><div class="BarGraphItem BarGraphItem--better-sqlite3" style="--amount:23.28;--max:76"><div style="--amount:23.28;--max:76" title="23.28 queries per second" class="BarGraphBar"><div style="--amount:23.28;--max:76" class="BarGraphBar-label">23.28</div></div></div><div class="BarGraphItem BarGraphItem--deno" style="--amount:9.55;--max:76"><div style="--amount:9.55;--max:76" title="9.55 queries per second" class="BarGraphBar"><div style="--amount:9.55;--max:76" class="BarGraphBar-label">9.55</div></div></div></div><div style="--count:3" class="BarGraphKey"><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">bun:sqlite</div><div class="BarGraphKeyItem-value">v0.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.node.mjs" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">better-sqlite3</div><div class="BarGraphKeyItem-value">node v18.2.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.deno.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">deno (x/sqlite)</div><div class="BarGraphKeyItem-value">v1.23.2</div><div class="BarGraphKeyItem-viewSource">View source</div></a></div></div><div class="BarGraph BarGraph--ffi BarGraph--horizontal BarGraph--dark"><div class="BarGraph-heading">Operations per second</div><div class="BarGraph-subheading">Call add(1,2,3) from JavaScript</div><div style="--count:3" class="BarGraphList"><div class="BarGraphItem BarGraphItem--bun" style="--amount:115473441.00;--max:144341802"><div style="--amount:115473441.00;--max:144341802" title="115473441.00 operations per second" class="BarGraphBar"><div style="--amount:115473441.00;--max:144341802" class="BarGraphBar-label">115,473,441</div></div></div><div class="BarGraphItem BarGraphItem--Node-API" style="--amount:43478261.00;--max:144341802"><div style="--amount:43478261.00;--max:144341802" title="43478261.00 operations per second" class="BarGraphBar"><div style="--amount:43478261.00;--max:144341802" class="BarGraphBar-label">43,478,261</div></div></div><div class="BarGraphItem BarGraphItem--deno" style="--amount:2891761.00;--max:144341802"><div style="--amount:2891761.00;--max:144341802" title="2891761.00 oeprations per iteration" class="BarGraphBar"><div style="--amount:2891761.00;--max:144341802" class="BarGraphBar-label">2,891,761</div></div></div></div><div style="--count:3" class="BarGraphKey"><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">bun:ffi</div><div class="BarGraphKeyItem-value">v0.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.node.mjs" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">node (napi)</div><div class="BarGraphKeyItem-value">node v18.2.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.deno.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">deno (ffi)</div><div class="BarGraphKeyItem-value">v1.23.2</div><div class="BarGraphKeyItem-viewSource">View source</div></a></div></div></div></div><div class="InstallBox InstallBox--mobile" id="install"><div id="install-label"><div class="unselectable" id="install-label-heading">Install Bun CLI v0.1.0 (beta)</div><div class="unselectable" id="install-label-subtitle">macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux</div></div><div id="code-box"><div id="curl">curl https://bun.sh/install | bash</div><div class="unselectable" id="code-box-copy">copy</div></div><a class="unselectable" id="view-source-link" target="_blank" href="https://bun.sh/install">Show script source</a></div></main></div><section id="explain-section"><div id="explain"><h1>🐚 All the tools</h1><ul><li title="npm takes 160ms to run a script that does nothing"><span target="_blank" class="Tag Tag--Command">bun run</span> start <!-- --><code class="mono">package.json "scripts"</code> <!-- --><a href="https://twitter.com/jarredsumner/status/1454218996983623685" target="_blank" class="PerformanceClaim">30x faster than <!-- --><code class="mono">npm run</code></a></li><li title="JavaScript package managers are not using the fastest system calls"><span target="_blank" class="Tag Tag--Command">bun install</span> installs npm packages 2x - 100x faster than npm, yarn or pnpm<!-- --></li><li><span target="_blank" class="Tag Tag--Command">bun dev</span> bun's frontend dev server<!-- --> <!-- --><a href="https://twitter.com/jarredsumner/status/1434396683861782530" target="_blank" class="PerformanceClaim">boots 30x faster than Create React App</a></li><li><span target="_blank" class="Tag Tag--Command">bun bun</span> bundle node_modules into a single file<!-- --></li><li><span target="_blank" class="Tag Tag--Command">bun wiptest</span> <!-- --><a href="https://twitter.com/jarredsumner/status/1542824445810642946" target="_blank" class="PerformanceClaim">you've never seen a JavaScript test runner this fast</a> <!-- -->(or incomplete)<!-- --></li></ul><h1>🔋 Batteries included</h1><ul><li>Web APIs like<!-- --> <!-- --><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/fetch" class="Tag Tag--WebAPI">fetch</a>,<!-- --> <!-- --><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" class="Tag Tag--WebAPI">WebSocket</a>, and<!-- --> <!-- --><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" class="Tag Tag--WebAPI">ReadableStream</a> <!-- -->are builtin<!-- --></li><li><span target="_blank" class="Tag Tag--NodeJS">node_modules</span> bun implements Node.js' module resolution algorithm, so you can use npm packages in bun.js. ESM and CommonJS are supported, but Bun internally uses ESM.<!-- --></li><li><span target="_blank" class="Tag Tag--React">JSX</span> <!-- --><span target="_blank" class="Tag Tag--TypeScript">TypeScript</span> in bun.js, every file is transpiled. TypeScript & JSX just work.<!-- --></li><li><span target="_blank" class="Tag Tag--TypeScript">tsconfig.json</span> bun supports<!-- --> <!-- --><code class="">"paths"</code>, <!-- --><code>"jsxImportSource"</code>and more from tsconfig.json<!-- --></li><li><span target="_blank" class="Tag Tag--Bun">Bun.Transpiler</span> bun's JSX & TypeScript transpiler is available as an API in Bun.js<!-- --></li><li><span target="_blank" class="Tag Tag--Bun">Bun.write</span> use the fastest system calls available to write, copy, pipe, send and clone files.<!-- --></li><li><span target="_blank" class="Tag Tag--Bun">.env</span> bun.js automatically loads environment variables from .env files. No more<!-- --> <!-- --><code class="mono">require("dotenv").load()</code></li><li><span target="_blank" class="Tag Tag--Bun">bun:sqlite</span> fast SQLite3 client built-in<!-- --></li><li><a target="_blank" href="https://github.com/Jarred-Sumner/bun/issues/158" class="Tag Tag--NodeJS">Node-API</a> <!-- -->bun.js implements most of Node-API (NAPI). Many Node.js native modules just work.<!-- --></li><li><span target="_blank" class="Tag Tag--Bun">bun:ffi</span> call native code from JavaScript with bun's low-overhead foreign function interface<!-- --></li><li><span target="_blank" class="Tag Tag--NodeJS">node:fs</span> <!-- --><span target="_blank" class="Tag Tag--NodeJS">node:path</span> bun.js natively supports a growing list of Node.js core modules along with globals like Buffer and process.<!-- --></li></ul><h1>Getting started</h1><p>To install bun, run this<!-- --> <!-- --><a target="_blank" href="https://bun.sh/install">install script</a> <!-- -->in your terminal. It downloads Bun from GitHub.<!-- --></p><div class="CodeBlock"><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #F8F8F2">curl https://bun.sh/install </span><span style="color: #FF79C6">|</span><span style="color: #F8F8F2"> bash</span></span></code></pre></div><p> <!-- -->Bun's HTTP server is built on web standards like<!-- --> <!-- --><a class="Identifier" href="https://developer.mozilla.org/en-US/docs/Web/API/Request">Request</a> <!-- -->and<!-- --> <!-- --><a class="Identifier" href="https://developer.mozilla.org/en-US/docs/Web/API/Response">Response</a></p><div class="CodeBlock"><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">// http.js</span></span> +<!DOCTYPE html><html><head><meta charSet="UTF-8"/><link rel="stylesheet" href="/index.css"/><script type="module" src="/index.js"></script><meta name="viewport" content="width=device-width, initial-scale=1"/></head><body><div id="header-wrap"><header><a href="/" id="logo-link"><img src="/logo@2x.png" alt="Bun" id="logo"/><img src="/Bun@2x.png" alt="Bun" id="logo-text"/></a><nav class="Navigation"><li><a class="NavText" href="https://bun.sh/docs">Docs</a></li><li><a class="NavText" href="https://bun.sh/discord">Discord</a></li><li><a class="NavText" href="https://github.com/Jarred-Sumner/bun">GitHub</a></li></nav></header></div><div id="pitch"><main><div id="pitch-content"><h1 class="tagline">Bun is a fast all-in-one JavaScript runtime</h1><p class="subtitle">Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.</p><div class="InstallBox InstallBox--desktop" id="install"><div id="install-label"><div class="unselectable" id="install-label-heading">Install Bun CLI v0.1.0 (beta)</div><div class="unselectable" id="install-label-subtitle">macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux</div></div><div id="code-box"><div id="curl">curl https://bun.sh/install | bash</div><div class="unselectable" id="code-box-copy">copy</div></div><a class="unselectable" id="view-source-link" target="_blank" href="https://bun.sh/install">Show script source</a></div></div><div class="Graphs Graphs--active-react"><div class="Tabs"><div data-tab="react" class="Tab">Bun.serve</div><div data-tab="sqlite" class="Tab">bun:sqlite</div><div data-tab="ffi" class="Tab">bun:ffi</div></div><div id="active-tab" class="ActiveTab"><div class="BarGraph BarGraph--react BarGraph--horizontal BarGraph--dark"><div class="BarGraph-heading">Server-side rendering React</div><div title="oha -z 5s" class="BarGraph-subheading">HTTP requests per second (Linux AMD64)</div><div style="--count:3" class="BarGraphList"><div class="BarGraphItem BarGraphItem--bun" style="--amount:48936;--max:61170"><div style="--amount:48936;--max:61170" title="48936 requests per second" class="BarGraphBar"><div style="--amount:48936;--max:61170" class="BarGraphBar-label">48,936</div></div></div><div class="BarGraphItem BarGraphItem--node" style="--amount:16288;--max:61170"><div style="--amount:16288;--max:61170" title="16288 requests per second" class="BarGraphBar"><div style="--amount:16288;--max:61170" class="BarGraphBar-label">16,288</div></div></div><div class="BarGraphItem BarGraphItem--deno" style="--amount:12289;--max:61170"><div style="--amount:12289;--max:61170" title="12289 requests per second" class="BarGraphBar"><div style="--amount:12289;--max:61170" class="BarGraphBar-label">12,289</div></div></div></div><div style="--count:3" class="BarGraphKey"><a href="https://github.com/Jarred-Sumner/bun/bench/react-hello-world.jsx" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">bun</div><div class="BarGraphKeyItem-value">v0.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/bench/react-hello-world.deno.jsx" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">node</div><div class="BarGraphKeyItem-value">v18.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/bench/react-hello-world.node.jsx" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">deno</div><div class="BarGraphKeyItem-value">v1.23.2</div><div class="BarGraphKeyItem-viewSource">View source</div></a></div></div><div class="BarGraph--sqlite BarGraph BarGraph--horizontal BarGraph--dark"><div class="BarGraph-heading">Average queries per second<!-- --> <!-- --></div><div class="BarGraph-subheading">SELECT * from "Orders" (Northwind Traders)</div><div style="--count:3" class="BarGraphList"><div class="BarGraphItem BarGraphItem--bun" style="--amount:60.24;--max:76"><div style="--amount:60.24;--max:76" title="60.24 queries per second" class="BarGraphBar"><div style="--amount:60.24;--max:76" class="BarGraphBar-label">60.24</div></div></div><div class="BarGraphItem BarGraphItem--better-sqlite3" style="--amount:23.28;--max:76"><div style="--amount:23.28;--max:76" title="23.28 queries per second" class="BarGraphBar"><div style="--amount:23.28;--max:76" class="BarGraphBar-label">23.28</div></div></div><div class="BarGraphItem BarGraphItem--deno" style="--amount:9.55;--max:76"><div style="--amount:9.55;--max:76" title="9.55 queries per second" class="BarGraphBar"><div style="--amount:9.55;--max:76" class="BarGraphBar-label">9.55</div></div></div></div><div style="--count:3" class="BarGraphKey"><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">bun:sqlite</div><div class="BarGraphKeyItem-value">v0.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.node.mjs" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">better-sqlite3</div><div class="BarGraphKeyItem-value">node v18.2.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/main/bench/sqlite/query.deno.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">deno (x/sqlite)</div><div class="BarGraphKeyItem-value">v1.23.2</div><div class="BarGraphKeyItem-viewSource">View source</div></a></div></div><div class="BarGraph BarGraph--ffi BarGraph--horizontal BarGraph--dark"><div class="BarGraph-heading">Operations per second</div><div class="BarGraph-subheading">Call add(1,2,3) from JavaScript</div><div style="--count:3" class="BarGraphList"><div class="BarGraphItem BarGraphItem--bun" style="--amount:115473441.00;--max:144341802"><div style="--amount:115473441.00;--max:144341802" title="115473441.00 operations per second" class="BarGraphBar"><div style="--amount:115473441.00;--max:144341802" class="BarGraphBar-label">115,473,441</div></div></div><div class="BarGraphItem BarGraphItem--Node-API" style="--amount:43478261.00;--max:144341802"><div style="--amount:43478261.00;--max:144341802" title="43478261.00 operations per second" class="BarGraphBar"><div style="--amount:43478261.00;--max:144341802" class="BarGraphBar-label">43,478,261</div></div></div><div class="BarGraphItem BarGraphItem--deno" style="--amount:2891761.00;--max:144341802"><div style="--amount:2891761.00;--max:144341802" title="2891761.00 oeprations per iteration" class="BarGraphBar"><div style="--amount:2891761.00;--max:144341802" class="BarGraphBar-label">2,891,761</div></div></div></div><div style="--count:3" class="BarGraphKey"><a href="https://github.com/Jarred-Sumner/bun/blob/f5527c976e20cb60b977cc1b21df079f3e388cc9/bench/ffi/plus100/add3.bun.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">bun:ffi</div><div class="BarGraphKeyItem-value">v0.1.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/f5527c976e20cb60b977cc1b21df079f3e388cc9/bench/ffi/plus100/add3.napi.mjs" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">node (napi)</div><div class="BarGraphKeyItem-value">node v18.2.0</div><div class="BarGraphKeyItem-viewSource">View source</div></a><a href="https://github.com/Jarred-Sumner/bun/blob/f5527c976e20cb60b977cc1b21df079f3e388cc9/bench/ffi/plus100/add3.deno.js" target="_blank" class="BarGraphKeyItem"><div class="BarGraphKeyItem-label">deno (ffi)</div><div class="BarGraphKeyItem-value">v1.23.2</div><div class="BarGraphKeyItem-viewSource">View source</div></a></div></div></div></div><div class="InstallBox InstallBox--mobile" id="install"><div id="install-label"><div class="unselectable" id="install-label-heading">Install Bun CLI v0.1.0 (beta)</div><div class="unselectable" id="install-label-subtitle">macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux</div></div><div id="code-box"><div id="curl">curl https://bun.sh/install | bash</div><div class="unselectable" id="code-box-copy">copy</div></div><a class="unselectable" id="view-source-link" target="_blank" href="https://bun.sh/install">Show script source</a></div></main></div><section id="explain-section"><div id="explain"><h1>Tell me more about Bun</h1><p>Bun is a modern JavaScript runtime like Node or Deno. It was built from scratch to focus on three main things:</p><ul><li>Extremely lightweight (it has the edge in mind).</li><li>New levels of performance (extending JavaScriptCore, the engine).</li><li>Being a great and complete tool (bundler, transpiler, package manager).</li></ul><p>Bun is designed as a drop-in replacement for your current JavaScript & TypeScript apps or scripts — on your local computer, server or on the edge. Bun natively implements hundreds of Node.js and Web APIs, including 90% of Node-API functions (native modules), fs, path, Buffer and more. The goal of Bun is to run most of the worlds JavaScript outside of browsers, bringing performance and complexity enhancements to your future infrastructure, as well as developer productivity through better, simpler tooling.</p><p>The goal of Bun is to run most of the worlds JavaScript outside of browsers, bringing performance and complexity enhancements to your future infrastructure, as well as developer productivity through better, simpler tooling.</p><h1>Batteries included</h1><ul id="batteries"><li>Web APIs like<!-- --> <!-- --><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/fetch" class="Tag Tag--WebAPI">fetch</a>,<!-- --> <!-- --><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" class="Tag Tag--WebAPI">WebSocket</a>, and<!-- --> <!-- --><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" class="Tag Tag--WebAPI">ReadableStream</a> <!-- -->are builtin<!-- --></li><li><span target="_blank" class="Tag Tag--NodeJS">node_modules</span> bun implements Node.js' module resolution algorithm, so you can use npm packages in bun.js. ESM and CommonJS are supported, but Bun internally uses ESM.<!-- --></li><li>In bun.js, every file is transpiled.<!-- --> <!-- --><span target="_blank" class="Tag Tag--TypeScript">TypeScript</span> & <!-- --><span target="_blank" class="Tag Tag--React">JSX</span> just work.<!-- --></li><li>bun supports <!-- --><code class="">"paths"</code>,<!-- --> <!-- --><code>"jsxImportSource"</code>and more from <!-- --><span target="_blank" class="Tag Tag--TypeScript">tsconfig.json</span> files<!-- --></li><li><span target="_blank" class="Tag Tag--Bun">Bun.Transpiler</span> bun's JSX & TypeScript transpiler is available as an API in Bun.js<!-- --></li><li>use the fastest system calls available with <!-- --><span target="_blank" class="Tag Tag--Bun">Bun.write</span> <!-- -->to write, copy, pipe, send and clone files.<!-- --></li><li>bun.js automatically loads environment variables from<!-- --> <!-- --><span target="_blank" class="Tag Tag--Bun">.env</span> files. No more<!-- --> <!-- --><code class="mono">require("dotenv").load()</code></li><li>bun ships with a fast SQLite3 client builtin <!-- --><span target="_blank" class="Tag Tag--Bun">bun:sqlite</span></li><li><a target="_blank" href="https://github.com/Jarred-Sumner/bun/issues/158" class="Tag Tag--NodeJS">Node-API</a> <!-- -->bun.js implements most of Node.jÀ'<!-- --> <!-- --><a href="https://nodejs.org/api/n-api.html#node-api" target="_blank">native addons API</a>, Node-API (NAPI). Many Node.js native modules just work.<!-- --></li><li><span target="_blank" class="Tag Tag--Bun">bun:ffi</span> call native code from JavaScript with bun's low-overhead foreign function interface<!-- --></li><li><span target="_blank" class="Tag Tag--NodeJS">node:fs</span> <!-- --><span target="_blank" class="Tag Tag--NodeJS">node:path</span> bun.js natively supports a growing list of Node.js core modules along with globals like Buffer and process.<!-- --></li></ul><h1>How does Bun work?</h1><p>Bun.js uses the<!-- --> <!-- --><a href="https://github.com/WebKit/WebKit/tree/main/Source/JavaScriptCore">JavaScriptCore</a> <!-- -->engine, which tends<!-- --> <!-- --><a target="blank" href="https://twitter.com/jarredsumner/status/1499225725492076544">to start</a> <!-- -->and perform a little faster than more traditional choices like V8. Bun is written in<!-- --> <!-- --><a href="https://ziglang.org/"><svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" class="Zig" viewBox="0 0 400 140"><g fill="#F7A41D"><g><polygon points="46,22 28,44 19,30"></polygon><polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"></polygon><polygon points="31,95 12,117 4,106"></polygon></g><g><polygon points="56,22 62,36 37,44"></polygon><polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"></polygon><polygon points="116,95 97,117 90,104"></polygon><polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"></polygon><polygon points="150,0 52,117 3,140 101,22"></polygon></g><g><polygon points="141,22 140,40 122,45"></polygon><polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"></polygon><polygon points="125,95 130,110 106,117"></polygon></g></g><g fill="#121212"><g><polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"></polygon><polygon points="260,37 207,99 207,103 176,103 229,40 229,37"></polygon><polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"></polygon></g><rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"></rect><g><polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"></polygon><polygon points="360,68 376,81 346,67"></polygon><path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1 + c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6 + c5.7,0,12.8-2.3,19-5.5L394,106z"></path></g></g></svg></a>, a low-level programming language with manual memory management.<!-- --><br/><br/>Most of Bun is written from scratch including the JSX/TypeScript transpiler, npm client, bundler, SQLite client, HTTP client, WebSocket client and more.<!-- --></p><h1>Why is Bun fast?</h1><p>An enourmous amount of time spent profiling, benchmarking and optimizing things. The answer is different for every part of Bun, but one general theme:<!-- --> <!-- --><a href="https://ziglang.org/"><svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" class="Zig" viewBox="0 0 400 140"><g fill="#F7A41D"><g><polygon points="46,22 28,44 19,30"></polygon><polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"></polygon><polygon points="31,95 12,117 4,106"></polygon></g><g><polygon points="56,22 62,36 37,44"></polygon><polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"></polygon><polygon points="116,95 97,117 90,104"></polygon><polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"></polygon><polygon points="150,0 52,117 3,140 101,22"></polygon></g><g><polygon points="141,22 140,40 122,45"></polygon><polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"></polygon><polygon points="125,95 130,110 106,117"></polygon></g></g><g fill="#121212"><g><polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"></polygon><polygon points="260,37 207,99 207,103 176,103 229,40 229,37"></polygon><polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"></polygon></g><rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"></rect><g><polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"></polygon><polygon points="360,68 376,81 346,67"></polygon><path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1 + c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6 + c5.7,0,12.8-2.3,19-5.5L394,106z"></path></g></g></svg></a> <!-- -->'s low-level control over memory and lack of hidden control flow makes it much simpler to write fast software.<!-- --> <!-- --><a href="https://github.com/sponsors/ziglang">Sponsor the Zig Software Foundation</a></p><h1>Getting started</h1><p>To install bun, run this<!-- --> <!-- --><a target="_blank" href="https://bun.sh/install">install script</a> <!-- -->in your terminal. It downloads Bun from GitHub.<!-- --></p><div class="CodeBlock"><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #F8F8F2">curl https://bun.sh/install </span><span style="color: #FF79C6">|</span><span style="color: #F8F8F2"> bash</span></span></code></pre></div><p> <!-- -->Bun's HTTP server is built on web standards like<!-- --> <!-- --><a class="Identifier" href="https://developer.mozilla.org/en-US/docs/Web/API/Request">Request</a> <!-- -->and<!-- --> <!-- --><a class="Identifier" href="https://developer.mozilla.org/en-US/docs/Web/API/Response">Response</a></p><div class="CodeBlock"><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">// http.js</span></span> <span class="line"><span style="color: #FF79C6">export</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">default</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> port</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">3000</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B">fetch</span><span style="color: #F8F8F2">(</span><span style="color: #FFB86C; font-style: italic">request</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">return</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6; font-weight: bold">new</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B">Response</span><span style="color: #F8F8F2">(</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Welcome to Bun!</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> },</span></span> -<span class="line"><span style="color: #F8F8F2">};</span></span></code></pre></div><p>Run it with bun:</p><div class="CodeBlock"><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #F8F8F2">bun run http.js</span></span></code></pre></div><p>Then open<!-- --> <!-- --><a target="_blank" href="http://localhost:3000">http://localhost:3000</a> <!-- -->in your browser<!-- --><br/><br/>See<!-- --> <!-- --><a href="https://github.com/Jarred-Sumner/bun/tree/main/examples">more examples</a> <!-- -->and check out <!-- --><a href="/docs">the docs</a>. If you have any questions or want help, join<!-- --> <!-- --><a href="https://bun.sh/discord">Bun's Discord</a></p><h1>How does Bun work?</h1><p>Bun.js uses the<!-- --> <!-- --><a href="https://github.com/WebKit/WebKit/tree/main/Source/JavaScriptCore">JavaScriptCore</a> <!-- -->engine, which tends<!-- --> <!-- --><a target="blank" href="https://twitter.com/jarredsumner/status/1499225725492076544">to start</a> <!-- -->and perform a little faster than more traditional choices like V8. Bun is written in<!-- --> <!-- --><a href="https://ziglang.org/"><svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" class="Zig" viewBox="0 0 400 140"><g fill="#F7A41D"><g><polygon points="46,22 28,44 19,30"></polygon><polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"></polygon><polygon points="31,95 12,117 4,106"></polygon></g><g><polygon points="56,22 62,36 37,44"></polygon><polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"></polygon><polygon points="116,95 97,117 90,104"></polygon><polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"></polygon><polygon points="150,0 52,117 3,140 101,22"></polygon></g><g><polygon points="141,22 140,40 122,45"></polygon><polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"></polygon><polygon points="125,95 130,110 106,117"></polygon></g></g><g fill="#121212"><g><polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"></polygon><polygon points="260,37 207,99 207,103 176,103 229,40 229,37"></polygon><polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"></polygon></g><rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"></rect><g><polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"></polygon><polygon points="360,68 376,81 346,67"></polygon><path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1 - c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6 - c5.7,0,12.8-2.3,19-5.5L394,106z"></path></g></g></svg></a>, a low-level programming language with manual memory management.<!-- --><br/><br/>Most of Bun is written from scratch including the JSX/TypeScript transpiler, npm client, bundler, SQLite client, HTTP client, WebSocket client and more.<!-- --></p><h1>Why is Bun fast?</h1><p>An enourmous amount of time spent profiling, benchmarking and optimizing things. The answer is different for every part of Bun, but one general theme:<!-- --> <!-- --><a href="https://ziglang.org/"><svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" class="Zig" viewBox="0 0 400 140"><g fill="#F7A41D"><g><polygon points="46,22 28,44 19,30"></polygon><polygon points="46,22 33,33 28,44 22,44 22,95 31,95 20,100 12,117 0,117 0,22" shape-rendering="crispEdges"></polygon><polygon points="31,95 12,117 4,106"></polygon></g><g><polygon points="56,22 62,36 37,44"></polygon><polygon points="56,22 111,22 111,44 37,44 56,32" shape-rendering="crispEdges"></polygon><polygon points="116,95 97,117 90,104"></polygon><polygon points="116,95 100,104 97,117 42,117 42,95" shape-rendering="crispEdges"></polygon><polygon points="150,0 52,117 3,140 101,22"></polygon></g><g><polygon points="141,22 140,40 122,45"></polygon><polygon points="153,22 153,117 106,117 120,105 125,95 131,95 131,45 122,45 132,36 141,22" shape-rendering="crispEdges"></polygon><polygon points="125,95 130,110 106,117"></polygon></g></g><g fill="#121212"><g><polygon points="260,22 260,37 229,40 177,40 177,22" shape-rendering="crispEdges"></polygon><polygon points="260,37 207,99 207,103 176,103 229,40 229,37"></polygon><polygon points="261,99 261,117 176,117 176,103 206,99" shape-rendering="crispEdges"></polygon></g><rect x="272" y="22" shape-rendering="crispEdges" width="22" height="95"></rect><g><polygon points="394,67 394,106 376,106 376,81 360,70 346,67" shape-rendering="crispEdges"></polygon><polygon points="360,68 376,81 346,67"></polygon><path d="M394,106c-10.2,7.3-24,12-37.7,12c-29,0-51.1-20.8-51.1-48.3c0-27.3,22.5-48.1,52-48.1 - c14.3,0,29.2,5.5,38.9,14l-13,15c-7.1-6.3-16.8-10-25.9-10c-17,0-30.2,12.9-30.2,29.5c0,16.8,13.3,29.6,30.3,29.6 - c5.7,0,12.8-2.3,19-5.5L394,106z"></path></g></g></svg></a> <!-- -->'s low-level control over memory and lack of hidden control flow makes it much simpler to write fast software.<!-- --> <!-- --><a href="https://github.com/sponsors/ziglang">Sponsor the Zig Software Foundation</a></p><h1>What is the license?</h1><p>MIT License, excluding dependencies which have various licenses.</p><h1>How do I see the source code?</h1><p>Bun is on <!-- --><a href="https://github.com/Jarred-Sumner/bun">GitHub</a></p></div></section><section id="explain-section"><div id="explain"></div></section><script> +<span class="line"><span style="color: #F8F8F2">};</span></span></code></pre></div><p>Run it with bun:</p><div class="CodeBlock"><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #F8F8F2">bun run http.js</span></span></code></pre></div><p>Then open<!-- --> <!-- --><a target="_blank" href="http://localhost:3000">http://localhost:3000</a> <!-- -->in your browser<!-- --><br/><br/>See<!-- --> <!-- --><a href="https://github.com/Jarred-Sumner/bun/tree/main/examples">more examples</a> <!-- -->and check out <!-- --><a href="/docs">the docs</a>. If you have any questions or want help, join<!-- --> <!-- --><a href="https://bun.sh/discord">Bun's Discord</a></p><h1>Bun CLI</h1><div title="npm takes 160ms to run a script that does nothing" class="Group"><span target="_blank" class="Tag Tag--Command">bun run</span><p>The same command for running JavaScript & TypeScript files with bun's JavaScript runtime also runs package.json<!-- --> <!-- --><code class="mono">"scripts"</code>.<!-- --></p><strong>Replace <!-- --><code class="mono">npm run</code> with<!-- --> <!-- --><code class="mono">bun run</code> and save 160ms on every run.<!-- --></strong><br/><div>bun runs package.json scripts<!-- --> <!-- --><a href="https://twitter.com/jarredsumner/status/1454218996983623685" target="_blank" class="PerformanceClaim">30x faster than <!-- --><code class="mono">npm run</code></a></div> <!-- --></div><div title="JavaScript package managers are not using the fastest system calls" class="Group"><span target="_blank" class="Tag Tag--Command">bun install</span><p>bun install is an npm-compatible package manager. You probably will be surprised by how much faster copying files can get.</p><strong>Replace <!-- --><code class="mono">yarn</code> with<!-- --> <!-- --><code class="mono">bun install</code> and get 20x faster package installs.<!-- --></strong><br/><div>bun install uses the fastest system calls available to copy files.</div></div><div class="Group"><span target="_blank" class="Tag Tag--Command">bun wiptest</span><p>A Jest-like test runner for JavaScript & TypeScript projects builtin to bun</p><div class="Label"><a href="https://twitter.com/jarredsumner/status/1542824445810642946" target="_blank" class="PerformanceClaim">You've never seen a JavaScript test runner this fast</a> <!-- -->(or incomplete)<!-- --></div></div><h1>What is the license?</h1><p>MIT License, excluding dependencies which have various licenses.</p><h1>How do I see the source code?</h1><p>Bun is on <!-- --><a href="https://github.com/Jarred-Sumner/bun">GitHub</a></p></div></section><section id="explain-section"><div id="explain"></div></section><script> [...document.querySelectorAll(".Tab")].map(el => el.addEventListener("click", function(e) { var tab = e.srcElement.getAttribute("data-tab"); document.querySelector(".Graphs").setAttribute("class", "Graphs Graphs--active-" + tab); })); - </script></body></html>
\ No newline at end of file + +document.querySelector("#code-box-copy").addEventListener("click", async e => { + var el = document.querySelector("#code-box"); + await navigator.clipboard.writeText("curl https://bun.sh/install | bash"); +}); + </script><div class="Built">Built with Bun <!-- -->v0.1.0<!-- --></div></body></html>
\ No newline at end of file diff --git a/packages/bun-landing/ssr.tsx b/packages/bun-landing/ssr.tsx index a608f968e..3ff8adac9 100644 --- a/packages/bun-landing/ssr.tsx +++ b/packages/bun-landing/ssr.tsx @@ -10,6 +10,10 @@ async function fetch(req: Request) { return new Response("", { status: 404 }); } + if (req.url.endsWith(".css")) { + return new Response(file(join(import.meta.dir + "/", "index.css"))); + } + if (!req.url.includes(".")) { const { default: Page } = await import("./page.tsx"); return new Response(await renderToReadableStream(<Page />), { |