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

***

<p align="center">
<strong>A ZERO-DEPENDENCY VIRTUAL DOM FRAMEWORK THAT RUNS WITHOUT A BUILD STEP</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="https://www.jsdelivr.com/package/npm/@pardnchiu/quickui"><img src="https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/quickui?include_prereleases&style=for-the-badge" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/@pardnchiu/quickui"><img src="https://img.shields.io/npm/l/@pardnchiu/quickui?include_prereleases&style=for-the-badge" alt="License"></a>
</p>

***

> A vanilla JavaScript frontend framework with virtual DOM diffing, declarative HTML templates, and runtime i18n

## Table of Contents

- [Features](#features)
- [Architecture](#architecture)
- [License](#license)
- [Author](#author)

## Features

> `npm i @pardnchiu/quickui` · [Documentation](https://github.com/pardnchiu/QuickUI/blob/main/doc/doc.md)

- **Zero dependencies, no build step** — Native browser APIs power the virtual DOM diff/patch engine, so a single script tag brings it to any existing page.
- **Declarative HTML templates** — Interpolation, loops, conditionals, two-way binding, and event binding live directly in HTML attributes, so the template is the page itself.
- **Batched Proxy reactivity** — Deep data mutations trigger a 300ms debounced update that applies only the required DOM patches on the next animation frame.
- **Runtime i18n switching** — Locales accept either inline objects or JSON file URLs, and a single language switch re-renders both text and attributes.
- **Built-in lazy images and inline SVG** — IntersectionObserver defers image loading behind a placeholder animation and inlines external SVG files as stylable nodes once they enter the viewport.

## Architecture

> [Full Architecture](https://github.com/pardnchiu/QuickUI/blob/main/doc/architecture.md)

```mermaid
graph TB
    A[HTML Template / render Function] --> B[vDOM Build]
    D[Proxy Reactive Data] -->|Change, 300ms Debounce| B
    E[i18n Locale Data] --> B
    B --> C[Diff to Patches]
    C -->|requestAnimationFrame| F[Real DOM]
    G[Lifecycle Hooks] -.-> B
    F --> H[Lazyload / SVG Listeners]
```

## License

This project is licensed under the [MIT LICENSE](https://github.com/pardnchiu/QuickUI/blob/main/LICENSE).

## Author

Just [open an issue](https://github.com/pardnchiu/QuickUI/issues/new) to share an idea.

<a href="https://github.com/pardnchiu/QuickUI/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=pardnchiu/QuickUI&cache_bust=2026-10-03" alt="QuickUI contributors" />
</a>

***

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