/dlight

Dlight.js

Primary LanguageTypeScriptMIT LicenseMIT

Core Packages
dlight babel-preset-dlight @dlightjs/types create-dlightjs

Ecosystem
components easy-css vite-plugin-dlight transpiler transpiler-standalone material-icons emotion

DX-first UI rendering library.

  • 🥳 Delightful
    • With an API designed to be intuitive and user-friendly, web development becomes effortless with Dlight, whether you're building a simple website or a complex web application.Dlight enhances code performance at compile time and directly manipulates the DOM, which makes the execution speed of the code as close to vanilla JavaScript as possible, even with limited optimization knowledge.
  • 🚀 Performant
    • With a minuscule file size of just 4KB, Dlight is lightning-fast and ultra-lightweight, delivering optimal performance without the need for manual optimization.
  • ✨ DX-first
    • Dlight uses the syntax of function calls and dot notation to make development more enjoyable, without the need to write outdated and hard-to-read XML code.
  • 🪶 Intuitively Simple
    • Dlight is born reactive and is designed to be intuitively simple, with a minimalistic API that requires no memorization of complex functions or libraries.

Preview

import { View } from "@dlightjs/dlight"

class MyComp extends View {
  toggle = true
  fruits = ["🍎", "🍊", "🥑"]

  Body() {
    h1("hello, dlight js")
    button("toggle")
      .className("toggle")
      .onclick(() => {
        this.toggle = !this.toggle
      })
    if (this.toggle) {
      "simple text"
    }
    for (const fruit of this.fruits) {
      div(fruit)
    }
  }
}

Try it online

Documentation

README-dlight.md

Homepage

Building with DLight now👨🏻‍💻

Contributors

Duan Yihan
Duan Yihan

🚇 ⚠️ 💻
orange04
orange04

💻 🎨