Run your Deno code in the browser.

Discord

---

dsbuild helps you create modern websites with Deno TypeScript.

With one-command & zero configuration, dsbuild bundles your code into a single JavaScript file that can be run in the browser.

Use it to build React, Markdown, or other JS-powered web sites entirely using Deno with hot-reloading & a local development server. No frameworks, bloat, or platform lock-in necessary.

⬡ Features

• Zero configuration - Just run dsbuild
• TypeScript & JSX - Full support out of the box
• React & MDX - Build modern web apps and content sites
• CSS bundling - Combines and minifies styles
• Hot reload - Instant updates with --watch
• Dev server - Built-in server with --serve
• Import maps - Support for all Deno import types (npm:, jsr:, https://)
• Instant builds - Powered by esbuild and @deno/esbuild-plugin

⬡ Installation

1. Install the Deno runtime.

2. Run the following command to install dsbuild:

deno install -frAg jsr:@orgsoft/dsbuild

3. Ensure $HOME/.deno/bin is in your PATH environment variable.

⬡ Usage

Basic

# Builds src/app.ts into public/app.js
dsbuild
# Watch for changes and rebuild automatically
dsbuild --watch
# or
dsbuild -w
# Watch specific directories
dsbuild --watch=src/ui,src/api
# Watch and serve on localhost:8000
dsbuild --watch --serve
# or
dsbuild -ws
# Serve without building
dsbuild --serve-only
# Build a static site
dsbuild --react-static --in=src/site.tsx --out=public/index.html
# Compile MDX files into JSX
dsbuild --mdx src/MyExample.mdx
# Combine & minify CSS files
dsbuild --css --in=src/css/ --out=public/main.css

Configuration

# Use a config or import map (will auto-discover)
dsbuild --config deno.jsonc
dsbuild --import-map import-map.json
# Custom input/output files
dsbuild --in src/some-file.ts --out public/another-file.js
# Target specific browsers
dsbuild --target chrome99,firefox99,safari15
# Development build (no minification)
DENO_ENV=development dsbuild
# Generate deno.json with browser/React settings
dsbuild --denoconfig
dsbuild --denoconfig --out deno.json
# Generate tsconfig.json with browser/React settings 
dsbuild --tsconfig
dsbuild --tsconfig --out tsconfig.json
# Provide a custom esbuild configuration
dsbuild --esbuild-config esbuild-config.json

⬡ Examples

⬢ Basic TypeScript

Build a simple web app that renders Markdown:

// src/app.tsimport{marked}from"npm:marked@^9.1.2";constmarkdown=`# Hello WorldThis is **markdown** rendered with dsbuild!`;document.body.innerHTML=marked(markdown);

dsbuild --watch --serve
# Visit http://localhost:8000

View full example →

---

⬢ CSS compilation

Combine multiple CSS files into a single bundle:

/* src/base.css */body {
--color: green;
background-color:var(--color);
}
/* src/component.css */ .component {
padding:1rem;
border-radius:8px;
}

# Concatenates CSS files alphabetically
dsbuild --css

File structure:

src/
├── base.css
├── component.css
└── component.mobile.css
public/
└── app.css # Generated bundle

View full example →

---

⬢ React

Build interactive React apps with Deno:

// src/app.tsximportReactfrom"react";importReactDOMfrom"react-dom/client";constApp=()=>{const[count,setCount]=React.useState(0);return(<div><h1>🪐sup,universe!</h1><p>Count: {count}</p><buttononClick={()=>setCount(count+1)}>Increment</button></div>);};constroot=ReactDOM.createRoot(document.querySelector("#root")!);root.render(<App/>);

dsbuild --watch --serve
# Visit http://localhost:8000

View full example →

---

⬢ Static site generation (SSG)

Generate static HTML with React (no client-side JavaScript):

// src/app.tsximportReactfrom"npm:react@^18.3.0";constApp=()=>{return(<htmllang="en"><bodystyle={{fontFamily: "sans-serif",textAlign: "center",background: "linear-gradient(180deg, #000 0%, #1D1D1D 100%)",color: "#fff"}}><h1>🪐sup,universe!</h1><p>Thispagewasstaticallygenerated!</p></body></html>);};exportdefaultApp;

dsbuild --watch --serve
# Generates static HTML in public/

View full example →

---

⬢ MDX (Markdown + JSX)

Combine Markdown content with React components:

// src/MyExample.mdximportTypewriterfrom'npm:typewriter-effect';
# 🪐supuniversefromMDX<Typewriteroptions={{strings: ['This page was rendered with **dsbuild**!'],autoStart: true,loop: true,delay: 33,}}/>

// src/app.tsx importReactfrom"react";importReactDOMfrom"react-dom/client";importMyExamplefrom"./MyExample.jsx";// Compiled from .mdxconstApp=()=><MyExample/>;ReactDOM.createRoot(document.querySelector("#root")!).render(<App/>);

View full example →

---

⬢ All examples

Example	Description	Features
Basic	Simple TypeScript app	Markdown rendering, npm imports
CSS	CSS file combination	Multiple CSS files, concatenation
React	Interactive React app	Client-side rendering, state management
React Static	Static site generation	Server-side rendering, static HTML
MDX	Markdown + JSX	React components in Markdown
Node	Server-side example	Node.js compatibility

⬡ Quick Start

Get up and running in 30 seconds:

# 1. Create a new project
mkdir my-app &&cd my-app
# 2. Create src/app.ts
mkdir src
echo'document.body.innerHTML = "<h1>🪐 Hello dsbuild!</h1>";'> src/app.ts
# 3. Build and serve
dsbuild --watch --serve
# Visit http://localhost:8000

Or explore the examples directory:

git clone https://github.com/orgsofthq/dsbuild.git
cd dsbuild/examples/react # or basic, css, mdx, etc.
dsbuild --watch --serve

⬡ Contributions & local development

Contributions welcome. To set up local development:

git clone https://github.com/orgsofthq/dsbuild.git
cd dsbuild
deno task install:dev

This replaces your global dsbuild installation with a local development copy.

⬡ License

MIT license.