If you're new to JavascriptUI. Just picture SwiftUI, but with Javascript. JavascriptUI is a Javascript-only framework with probably the best DX & flexibility.
Here is a sample code:
class App extends PageComponent {
constructor() {
super();
this.text("Dogs").fontSize(32).color('black').textAlign('center')
.padding(50).fontFamily('arial').display('flex').alignItems('center')
.flexDirection('column');
fetch("https://dog.ceo/api/breed/borzoi/images")
.then(res => res.json()).then(data => {
const photos = data.message.splice(0, 10);
this.addChild(
new Container().display('grid').gridTemplateColumns([200, 200])
.gap(15).marginTop(50).addChild(
...photos.map((photo, index) => {
return new Image().attrSrc(photo).attrAlt('Dog photo ' + (index + 1))
.height(200).width(200).objectFit('cover').borderRadius(8)
})
)
)
})
}
}
It's now in open beta and actually looking for contributors. https://github.com/tulburg/javascriptui
Top comments (0)