Basic HTML

In dreamland, all components return a HTML element, unless you explicitly return something else like an array or other data. The JSX factory always returns a HTML element.

let button = <button class="a-button">click me!</button>;
document.body.appendChild(button);

This just created a button with the class a-button, and added it to the document. This is the simplest possible way to use dreamland and also why it's so easy to migrate to or integrate it; it doesn't abstract away the DOM, instead only making it easier to use.

If you're coming from other frameworks like React, you might be used to using className instead of class. dreamland always uses class to match HTML.

Syntax sugar for elements

For any DOM event, you can use the prop prefix on to add an event listener:

<button on:click={() => alert("clicked!")}>click me!</button>

You can set properties on the element itself (like innerHTML) with the prop prefix attr:

<div attr:innerHTML={markdownOutput} />

You can set inline styles regularly with a string, or you can pass an object with property names that CSSStyleDeclaration's setProperty accepts (this includes CSS variables):

let regularStyle = <div style="color: red; background: blue;" />;
let objectStyle = <div style={{ color: "red", background: "blue" }} />;

You can toggle on/off specific classes by using the prop prefix class (this becomes more useful when you pass a pointer to it):

<div class="card container" class:active={true} />