What is Dreamland?

dreamland.js is a reactive JSX-inspired rendering library with no virtual dom and no build step

Why Dreamland?

We've found frameworks such as React to be cumbersome, with more than just a few footguns. Dreamland can get you fast results with brutal simplicity. See the documentation for more information.

What does it look like?

Here's a simple counter app

function App() {
    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 />)
})

Compare that to the equivalent code in react:

import { React, useState } from 'react'

function App() {
    const [counter, setCounter] = useState(0)

    const increase = () => {
        setCounter((count) => count + 1)
    }

    return (
        <div>
            <button onClick={increase}>Click me!</button>
            <p>Value: {counter}</p>
        </div>
    )
}

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
)

The idea of dreamland is to get some of the convience of big framworks at a ridiculously tiny size (~3kb, smaller than preact) with less hurdles.

Getting Started

Dreamland can be integrated into plain-javascript applications gradually and seamlessly. See the Wiki for learning the concepts that dreamland uses.

Plain JS

In your HTML file, add <script src="https://unpkg.com/dreamland"></script> somewhere. This unlocks the html builder allowing you to start writing dreamland code, 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))
})

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" into at least one file to bundle dreamland with the rest of the code. Now you can use dreamland with tsx syntax.

// 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 />)
})

See the documentation for more information.