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/dist/QuickUI.esm.js";

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