Getting Started

This page covers how to install QuickUI and bind your first data object to a page.

Prerequisites

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@latest/dist/QuickUI.js"></script>

Loading the script registers three globals: QUI, _ and $. See Global Helpers.

npm

npm i @pardnchiu/quickui

ESM

import { QUI } from "@pardnchiu/quickui";

package.json points module at dist/QuickUI.esm.js, so bundlers resolve the bare package name to the ESM build. The ESM build is the same code as the CDN build with window.QUI exported at the end, so importing it still registers the globals.

From Source

git clone https://github.com/pardnchiu/QuickUI.git
cd QuickUI
npm install
npm run build:once

build:once runs tsc to bundle src/ into src/QuickUI.debug.js, then terser produces dist/QuickUI.js and dist/QuickUI.esm.js.

Your First App

<div id="app">
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@latest/dist/QuickUI.js"></script>
<script>
  const app = new QUI({
    id: "app",
    data: {
      title: "Hello QuickUI",
      description: "A lightweight frontend framework",
    },
  });
</script>

id points to an existing element whose content becomes the template. Changing app.data.title later re-renders the page about 300 ms after the change.

Next Steps