> [!NOTE]
> This README was generated by [SKILL](https://github.com/pardnchiu/skill-readme-generate), get the ZH version from [here](./doc/README.zh.md).

***

<p align="center">
<picture>
<img src="https://quickui.pardn.io/static/image/logo.svg" alt="QuickUI" width="96">
</picture>
</p>

<p align="center">
<strong>A LIGHTWEIGHT VIRTUAL DOM FRONTEND FRAMEWORK BUILT ON PURE JAVASCRIPT</strong>
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@pardnchiu/quickui"><img src="https://img.shields.io/npm/v/@pardnchiu/quickui?include_prereleases&style=for-the-badge" alt="npm"></a>
<a href="LICENSE"><img src="https://img.shields.io/github/license/pardnio/QuickUI?include_prereleases&style=for-the-badge" alt="License"></a>
</p>

***

> A lightweight JavaScript frontend framework with virtual DOM rendering, declarative template syntax, and built-in i18n

## Table of Contents

- [Features](#features)
- [Built With](#built-with)
- [Architecture](#architecture)
- [License](#license)
- [Author](#author)
- [Stars](#stars)

## Features

> `npm i @pardnchiu/quickui` · [Documentation](./doc/doc.md)

- **Zero-dependency virtual DOM engine** — Pure JavaScript with native browser APIs implements a Diff/Patch algorithm, applying minimal DOM operations without relying on any third-party library.
- **Declarative template syntax** — Bind data, loop, and render conditionally directly in HTML with `{{ value }}`, `:for`, `:if`/`:else-if`/`:else`, and `:model`, with no build step required.
- **Proxy-based reactive data** — Data changes are auto-detected and trigger the smallest possible DOM update, removing manual DOM manipulation.
- **Built-in i18n** — Switch languages through JSON locale files and the `i18n.key` syntax without integrating an extra translation framework.
- **Full lifecycle hooks** — Six lifecycle stages are exposed: `beforeRender`, `rendered`, `beforeUpdate`, `updated`, `beforeDestroy`, `destroyed`.

## Built With

<a href="https://skillicons.dev">
  <img src="https://skillicons.dev/icons?i=js,ts,html,css,sass,npm&theme=light" />
</a>

## Architecture

> [Full Architecture](./doc/architecture.md)

```mermaid
graph TB
    A[HTML Template] --> B[vDOM Build]
    B --> C[Diff / Patch]
    D[Reactive Data] -->|Change Detection| C
    C -->|Minimal Ops| E[Real DOM]
    F[i18n / Lifecycle] --> B
```

## License

This project is licensed under the [MIT License](LICENSE).

## Author

<img src="https://github.com/pardnchiu.png" align="left" width="96" height="96" style="margin-right: 0.5rem;">

<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>

<a href="mailto:hi@pardn.io">hi@pardn.io</a><br>
<a href="https://www.linkedin.com/in/pardnchiu">https://www.linkedin.com/in/pardnchiu</a>

## Stars

[![Star](https://api.star-history.com/svg?repos=pardnio/QuickUI&type=Date)](https://www.star-history.com/#pardnio/QuickUI&Date)

***

©️ 2024 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)