Tech Lead at Taktile.
Formerly Firebase, Google
Public
Edited
Nov 10
Importers
11 stars
Composing viewofs with the view literalScaling User Interface DevelopmentlocalStorageView: Non-invasive local persistanceDOM viewurlQueryFieldView: Non-invasive URL field persistenceDesign Guidelines and Linter for Reusable UI ComponentsSqueezing more Juice out of UI librariesReversible attachmentGlobally Synchronized ViewsTabbed Pane ViewMultiplayer Cursors👋 Hello, javascript-state-machine ⨯ PlotVertical SlidersDraggable LocalFile fileInputData EditorUI AnimationView Composition ExamplesComposing views across time: viewroutineResponsive gridimgChooserDraggable Sticky viewHowto import a React component (Chonky Example)
Hypertext literal reconciliation with nanomorph
{
async function sendMsg(evt) {
if (evt.keyCode === 13) {
console.log(msgs);
mutable msgs = msgs.concat([evt.target.value]);
}
}
return htl.html`
${msgs.map((msg) => htl.html`<p>${msg}</p>`)}
<input class="text" onkeydown=${sendMsg}></input>
<button onclick=${() => (mutable msgs = [])}>clear</button>
`;
}
{
function sendMsg(evt) {
if (evt.keyCode === 13) {
console.log(msgs);
mutable msgs = msgs.concat([evt.target.value]);
}
}
return reconcile(
this,
htl.html`
${msgs.map((msg) => htl.html`<p>${msg}</p>`)}
<input id="chat" class="text" onkeydown=${sendMsg}></input>
<button onclick=${() => (mutable msgs = [])}>clear</button>
`
);
}
morph = require('https://bundle.run/nanomorph@5.4.2')
NestedDOMUpdateInPlaceDOM = html`
<div id="NestedDOMUpdateInPlace"><p>
<b>raw</b>
</p></div>`
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.
