dreamland is a reactive JSX-inspired UI library with no virtual dom and no build step. It is less than 3kb minified (smaller than preact), gradually integrates with existing plain JS projects, and is reasonably easy to learn

Getting Started

Plain JS

dreamland can be integrated into plain javascript applications gradually and seamlessly. See the website to learn the concepts that dreamland uses.

To get started, in your HTML file, add <script src="https://unpkg.com/dreamland"></script> somewhere. This contains the html builder allowing you to start writing dreamland code in plain JS, such as the example shown below

function App() {
    this.counter = 0
    return html`
        <div>
            <button on:click=${() => this.counter++}>Click me!</button>
            <p>${use(this.counter)}</p>
        </div>
    `
}

window.addEventListener('load', () => {
    document.body.appendChild(h(App))
})

Note that this is a development build. For production, you should pin the version and use either the "all" or "minimal" bundle depending on the features you want (ex. https://unpkg.com/[email protected]/dist/all.js)

Building a custom bundle

If you care about the bundle size, it is recommended to serve a custom bundle with only the features you need.

git clone https://github.com/MercuryWorkshop/dreamland
cd dreamland
npm install
npm rollup -c --file path/to/output.js --enable-jsxLiterals --disable-css
# see https://dreamland.js.org/building for more options

Typescript + Bundler (vite, rollup, webpack, esbuild, etc)

First install dreamland (npm install dreamland), then add this to the compileroptions of your tsconfig.json to setup JSX.

"jsx":"react",
"jsxFactory":"h",
"jsxFragmentFactory":"Fragment",
"types": ["dreamland"],

In the entry point of the app, add the line import "dreamland/dev" into at least one file to bundle dreamland with the rest of the code. Now you can use dreamland with tsx syntax.

In production, you can use import "dreamland" instead of import "dreamland/dev" to use the production build, or (recommended) vendor in a custom build.

// typescript syntax for defining components
const App: Component<
    {
        // component properties. if you had a component that took a property like `<Button text="..." /> you would use a type like the one in the following line
        // text: string
    },
    {
        // types for internal state
        counter: number
    }
> = function () {
    this.counter = 0
    return (
        <div>
            <button on:click={() => this.counter++}>Click me!</button>
            <p>{use(this.counter)}</p>
        </div>
    )
}

window.addEventListener('load', () => {
    document.body.appendChild(<App />)
})

Note: If you are using plain jsx and not tsx, you will need to change your bundler's config so it uses the proper jsx globals. If you are using vite with plain jsx, use vite-plugin-dreamland

See the documentation for more information.