@pardnchiu/quickui
Advanced tools
QuickUI is a lightweight frontend framework built on pure JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.
[!NOTE] (Formerly known as PDQuickUI, renamed to QuickUI starting from version
0.6.0)
QuickUI is a lightweight frontend framework built on pure JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.
npm i @pardnchiu/quickui
QuickUI library<!-- Version 0.6.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
<!-- Version 0.5.4 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
// Version 0.6.0 and above
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
// Version 0.5.4 and below
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
QUIconst app = new QUI({
id: "", // Specify rendering element
data: {
// Custom DATA
},
event: {
// Custom EVENT
},
when: {
beforeRender: function () {
// Stop rendering
},
rendered: function () {
// Rendered
},
beforeUpdate: function () {
// Stop updating
},
updated: function () {
// Updated
},
beforeDestroy: function () {
// Stop destruction
},
destroyed: function () {
// Destroyed
}
}
});
<body id="app"></body>
<script>
const test = new QUI({
id: "app",
data: {
hint: "hint 123",
title: "test 123"
},
render: () => `
"{{ hint }}",
h1 {
style: "background: red;",
children: [
"{{ title }}"
]
}`
})
</script>
<body id="app">
hint 123
<h1 style="background: red;">test 123</h1>
</body>
| Attribute | Use Case | Example |
|---|---|---|
{{value}} | Dynamic text content | <p>{{ userName }}</p> displays user's name |
:html | Raw HTML insertion | <div :html="richContent"></div> renders formatted content |
| Attribute | Use Case | Example |
|---|---|---|
:path | External template loading | <temp :path="./templates/header.html"></temp> loads header component |
| Attribute | Use Case | Example |
|---|---|---|
:for | Array/Object iteration | <li :for="item in items">{{ item.name }}</li> renders list items |
| Attribute | Use Case | Example |
|---|---|---|
:if | Conditional display | <div :if="isLoggedIn">Welcome!</div> |
:else-if/:elif | Secondary conditions | <div :elif="isPending">Loading...</div> |
:else | Fallback content | <div :else>Please log in</div> |
| Attribute | Use Case | Example |
|---|---|---|
:model | Two-way data binding | <input :model="userInput"> syncs with data |
| Attribute | Use Case | Example |
|---|---|---|
:animation | Transition effects | <div :animation="fade-in">Content</div> |
:[css] | Dynamic styling | <div :background-color="bgColor">Styled content</div> |
| Attribute | Use Case | Example |
|---|---|---|
:[attr] | Dynamic attributes | <img :src="imageUrl" :alt="imageDesc"> |
| Attribute | Use Case | Example |
|---|---|---|
@[event] | Event listeners | <button @click="handleClick">Click me</button> |
Similar to MIT License but provides obfuscated code only:
For detailed terms and conditions, please see the Software Usage Agreement.
©️ 2024 邱敬幃 Pardn Chiu
FAQs
QuickUI is a lightweight frontend framework built on pure JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.
We found that @pardnchiu/quickui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.