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/dev" 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.