DEV Community

Tolu Oluwagbemi
Tolu Oluwagbemi

Posted on

JavascriptUI is finally here!

If you're new to JavascriptUI. Just picture SwiftUI, but with Javascript. JavascriptUI is a Javascript-only framework with probably the best DX & flexibility.

javascriptui.dev

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)
                })
              )
            )
      })
  }
}
Enter fullscreen mode Exit fullscreen mode

picture of dogs in grid

It's now in open beta and actually looking for contributors. https://github.com/tulburg/javascriptui

Top comments (0)