view = jsx`state => <button $onclick={state=>state+1}>
Clicks: {state}
</button>`
app.start(document.createElement('div'), 0, view).element
view2 = jsx`state => <>
<div>{state.text}</div>
<input $bind="text" placeholder="type something here ..."/>
</>
`
app.start(document.createElement('div'), {}, view2).element
state = ({
a: 1,
b: 2,
get c() {
return this.a + this.b;
}
})
view3 = jsx`({a, b, c}) => <>
<input type="number" $bind="a" />
<input type="number" $bind="b" />
<p>{a} + {b} = { c }</p>
</>`
app.start(document.createElement('div'), state, view3).element
handler = ({
get: (target, name) => {
const text = target.text || '';
switch (name) {
case 'text': return target.text;
case 'characters': return text.replace(/\s/g, '').length;
case 'words': return !text ? 0 : text.split(/\s/).length;
case 'lines': return text.split('\n').length;
default: return null
}
}
})
proxy = new Proxy(
{ text: "let's count" },
handler
);
view5 = jsx`state => <div>
<textarea rows="10" cols="50" $bind="text"></textarea>
<div>{state.characters} {state.words} {state.lines}</div>
{state.text}
</div>`
app.start(document.createElement('div'), proxy, view5).element
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.
