Tech Lead at Taktile.
Formerly Firebase, Google
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: viewroutineHypertext literal reconciliation with nanomorphimgChooserDraggable Sticky viewHowto import a React component (Chonky Example)
Responsive grid
responsiveExample
logicExample = {
// Connect timeseries chart to plot
Inputs.bind(viewof gridPanelExample.elements.plot.view.data, viewof tsData);
// Connect logs to console
Inputs.bind(viewof gridPanelExample.elements.console.view, viewof logs);
// On button click
let playing = true;
const startStopListener = () => {
if (playing) {
viewof logs.value = "> stopping\n" + viewof logs.value;
} else {
viewof logs.value = "> starting\n" + viewof logs.value;
}
playing = !playing;
viewof tsDataRunning.value = playing;
viewof gridPanelExample.elements.stopstart.view.label.value = playing
? md`⏹`
: md`▶️`;
viewof logs.dispatchEvent(new Event("input", { bubble: true }));
};
viewof gridPanelExample.elements.stopstart.view.result.addEventListener(
"input",
startStopListener
);
invalidation.then(() =>
viewof gridPanelExample.elements.stopstart.view.result.removeEventListener(
"input",
startStopListener
)
);
}
32 * 12
width / 3 / 12
viewof dynamicTimeseriesExample = dynamicTimeseries([], {
width: 300,
height: 200
})
Inputs.bind(viewof dynamicTimeseriesExample.data, viewof tsData)
import { footer } from "@tomlarkworthy/footer"
footer
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.
