Getting Started

Plain JS

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/dreamland@1.0.0/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
    },
    {
        // types you want to be accessible from outside, but not required properties (we'll get to this later)
    }
> = 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