Public
Edited
May 15
Insert cell
Insert cell
ralewayThin = FileAttachment("Raleway-Thin.ttf")
Insert cell
raleway = await ralewayThin.arrayBuffer()
Insert cell
preact = await import("https://esm.sh/htm/preact")
Insert cell
htm = preact.html
Insert cell
jsx = htm`
<div style=${{ color: "black", display: "flex", background: "lightblue" }}>
<div style=${{ fontSize: "20px", padding: "20px" }}> Satori </div>
<div style=${{
width: "60%",
display: "block",
lineClamp: 2,
}}>Enlightened library to convert HTML and CSS to SVG Enlightened library to convert HTML and CSS to SVG</div>
</div>
`
Insert cell
o = await satori.default(jsx, {
width: 300,
height: 280,
fonts: [
{
name: 'Raleway',
data: raleway,
weight: 400,
style: 'normal',
}
],
})
Insert cell
html`${o}`
Insert cell
svg2 = satori.default(
{
type: "div",
props: {
style: {
color: "red",
fontSize: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
},
children: {
type: "div",
props: {
children: "Hello Satori !"
}
}
}
},
{
width: 300,
height: 180,
fonts: [
{
name: "Raleway",
data: raleway,
weight: 400,
style: "normal"
}
]
}
)
Insert cell
html`${svg2}`
Insert cell
Insert cell
import { npm } from "@pkg/npm"
Insert cell
yogo = npm("yoga-wasm-web")
Insert cell
wasm = fetch("https://esm.sh/yoga-wasm-web/dist/yoga.wasm").then((res) =>
res.blob()
)
Insert cell
Yogo = await yogo.default(await wasm.arrayBuffer())
Insert cell
node = {
const node = Yogo.Node.create();
node.setAlignContent(yogo.ALIGN_CENTER);
return node;
}
Insert cell
satori = await import('https://esm.sh/satori/wasm')
Insert cell
satori.init(Yogo)
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