Published
Edited
Feb 11, 2019
1 fork
3 stars
Insert cell
Insert cell
{
const container = document.createElement('div');
// With HTM, use custom components with <${MyComponent} /> instead of JSX's <MyComponent />
ReactDOM.render(htm`<${Counter} initialCount=${42} />`, container);
yield container
}
Insert cell
Counter = ({ initialCount = 0 }) => {
const [count, setCount] = React.useState(initialCount);
// With HTM, interpolate with ${} instead of JSX's {}
return htm`
<div style=${ { padding: 50 } }>
<div style=${ { fontSize: 50 }}>
${count}
</div>
<button onClick=${ () => setCount(count + 1) }>
Add 1
</button>
</div>
`
}
Insert cell
Insert cell
Insert cell

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.
Learn more