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.
- 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
esbuildand@deno/esbuild-plugin
-
Install the Deno runtime.
-
Run the following command to install dsbuild:
deno install -frAg jsr:@orgsoft/dsbuild- Ensure
$HOME/.deno/binis in yourPATHenvironment variable.
# 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# 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.jsonBuild a simple web app that renders Markdown:
// src/app.ts
import { marked } from "npm:marked@^9.1.2";
const markdown = `
# Hello World
This is **markdown** rendered with dsbuild!
`;
document.body.innerHTML = marked(markdown);dsbuild --watch --serve
# Visit http://localhost:8000Combine 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 --cssFile structure:
src/
├── base.css
├── component.css
└── component.mobile.css
public/
└── app.css # Generated bundle
Build interactive React apps with Deno:
// src/app.tsx
import React from "react";
import ReactDOM from "react-dom/client";
const App = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>🪐 sup, universe!</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
};
const root = ReactDOM.createRoot(
document.querySelector("#root")!
);
root.render(<App />);dsbuild --watch --serve
# Visit http://localhost:8000Generate static HTML with React (no client-side JavaScript):
// src/app.tsx
import React from "npm:react@^18.3.0";
const App = () => {
return (
<html lang="en">
<body style={{
fontFamily: "sans-serif",
textAlign: "center",
background: "linear-gradient(180deg, #000 0%, #1D1D1D 100%)",
color: "#fff"
}}>
<h1>🪐 sup, universe!</h1>
<p>This page was statically generated!</p>
</body>
</html>
);
};
export default App;dsbuild --watch --serve
# Generates static HTML in public/Combine Markdown content with React components:
// src/MyExample.mdx
import Typewriter from 'npm:typewriter-effect';
# 🪐 sup universe from MDX
<Typewriter
options={{
strings: ['This page was rendered with **dsbuild**!'],
autoStart: true,
loop: true,
delay: 33,
}}
/>// src/app.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import MyExample from "./MyExample.jsx"; // Compiled from .mdx
const App = () => <MyExample />;
ReactDOM.createRoot(document.querySelector("#root")!)
.render(<App />);| 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 |
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:8000Or explore the examples directory:
git clone https://github.com/orgsofthq/dsbuild.git
cd dsbuild/examples/react # or basic, css, mdx, etc.
dsbuild --watch --serveContributions welcome. To set up local development:
git clone https://github.com/orgsofthq/dsbuild.git
cd dsbuild
deno task install:devThis replaces your global dsbuild installation with a local development copy.
MIT license.