renderLoop2 = {
// let view = html`<div class=view></div>`;
preact.hydrate(App(buttons), view, view.firstChild);
return view;
}
buttons = [
{ label: "Cursor", onClick: () => console.log("Button 1 clicked") },
{ label: "Clicky", onClick: () => console.log("Button 2 clicked") },
{ label: "Other thing", onClick: () => console.log("Button 3 clicked") }
]
function App(arg) {
return h("div", {}, [Toolbar(arg)]);
}
function Toolbar(buttons) {
return h("div", { className: "toolbar" }, [
buttons.map((button, index) => {
return [
h(
"button",
{ className: "toolbar-button", onClick: button.onClick },
button.label
),
index !== buttons.length - 1 && h("div", { className: "separator" })
];
})
]);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
