Introduction

What is ArchitectUI HTML Pro?

ArchitectUI is a feature-rich admin template designed for building internal tools, SaaS back-offices, and operational dashboards. It provides a solid Bootstrap 5 foundation with pre-built pages, components, and patterns so you can focus on shipping your product instead of rebuilding boilerplate UI.

Unlike React or Vue-based admin templates, ArchitectUI emits plain static HTML at build time. There is no JavaScript framework runtime, no hydration, no client-side router — just a multi-page web app you can host anywhere that serves files. The build system uses Webpack 5 to compile Handlebars templates, Sass stylesheets, and ES6+ JavaScript into a production-ready architectui-html-pro/ directory.

Features

• 9 dashboard variants — Analytics, Commerce, CRM, Sales, two Minimal layouts, plus a "variation" alternate for Analytics, Commerce, and CRM
• 6 application pages — Chat, Mailbox, Forum (List, Threads, Discussion), and FAQ
• 17 UI component showcases — accordions, modals, popovers, calendar, carousel, tabs, ratings, tree view, image crop, maps, guided tours, and more
• Three chart libraries — ApexCharts 5.11, Chart.js 4.5, and ApexCharts Sparklines on dedicated showcase pages
• 8 form widget showcases — datepicker, input mask, range slider, toggle switch, WYSIWYG editor, autosize textarea, clipboard, multi-select
• 4 form patterns — Elements, Layouts, Validation, and a multi-step Wizard powered by SmartWizard 7
• 3 table variants — DataTables 2.3.8 with responsive extension, Bootstrap grid demos, regular tables
• 6 auth pages — Sign In, Register, Forgot Password — each with standard and glass-morphism "boxed" variants
• Live Theme Options drawer — fixed header/sidebar/footer toggles, 30+ header and sidebar color swatches, gradient palettes
• 9 baked-in SCSS color themes — default, dark, blue-alt, green, orange, red, purple, purple-alt, black
• Page Loader system — configurable FOUC-prevention overlay with an env-var opt-out
• Handlebars partial system — header, sidebar, footer, and theme drawer reused across every page
• Webpack 5 multi-entry build — per-feature script bundles, vendor splitting, [fullhash] cache busting
• Mostly jQuery-free — 76% of original jQuery plugins replaced with native or vanilla alternatives
• Fully responsive — collapsible sidebar with mobile overlay menu, breakpoint-aware layouts
• 74 static HTML pages emitted from a single npm run build — no server runtime required

Quick Start

Get up and running in under a minute. ArchitectUI requires Node.js LTS (v18 or higher).

# Unzip the template into your projects folder, then:
                cd architectui-html-pro-webpack
                
                # Install dependencies
                npm install
                
                # Start the dev server
                npm start

Open http://localhost:8080 in your browser. Hot Module Replacement is enabled — saved changes apply without a full reload.

For the full setup walkthrough including troubleshooting, see Installation.

Tech Stack

For a complete dependency breakdown with version-pin rationale, see the Folder Structure guide or the project package.json.

Project Layout at a Glance

Every file in src/ falls into one of five buckets. Skim this section once and the rest of these docs will make sense without further reference:

The full annotated tree lives in Folder Structure.

Build Output

Running npm run build compiles everything into a single architectui-html-pro/ directory:

architectui-html-pro/
                ├── index.html                          # Analytics dashboard (landing page)
                ├── dashboards-commerce.html            # ...74 HTML files total
                ├── ...
                └── assets/
                    ├── scripts/                        # Hashed JS bundles
                    ├── styles/                         # Hashed CSS bundles
                    ├── images/                         # Copied verbatim from src/assets/images
                    └── fonts/                          # Copied verbatim from src/assets/fonts

Upload that directory to any static host — Cloudflare Pages, Netlify, S3, nginx, or drop it into an existing site root. No server runtime, no Node.js required at runtime, no database. See Deployment for host-specific recipes.