Basic HTML

In dreamland, everything is an HTML element. Unlike other frameworks, we don’t abstract away the DOM, only make it easier to use. Let’s create an HTML element right now.

let button = html`<button class="some-button">content here!</button>`;
document.body.appendChild(button);

let button = <button class="some-button">content here!</button>;
document.body.appendChild(button);

We just created a button, with the class “some-button”, and added it to the document. This is the simplest possible way of using dreamland, and is why it’s so easy to slowly transition to using it from a plain-js codebase.

Note: If you are coming from react, you may be used to using className instead of class. In dreamland, we use class to match the standard HTML attribute.

Extra (syntax) Sugar!

What if we wanted to do something when the button is clicked? For any DOM event, you can use on: handlers.

let button = (
	html`<button class="some-button" on:click=${() => alert("button clicked!")}>
		click me!
	</button>`
);

let button = (
	<button class="some-button" on:click={() => alert("button clicked!")}>
		click me!
	</button>
);