article = html`${Array.from({ length: 20 }).map(() => {
const text = lorem.loremIpsum({ count: 2, units: "sentences" });
return html`<p style="margin: 0; padding: 0; padding-bottom: 1em;">${text}</p>`;
})}`
Public
Edited
Jan 2, 2024
<style>
article {
column-count: 3;
gap: 1em;
height: 20em;
column-rule: 2px dashed gray;
widows: 2;
orphans: 2;
}
</style>
<article>
${article}
</article>
<style>
section {
padding-left: 20px;
display: fragments;
width: 100px;
height: 100px;
color: green;
overflow: hidden;
}
section::nth-fragment(1) {
padding-left: 40px;
}
</style>
<div style="height: 200px;">
<section contentEditable>foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo </section>
</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.
