Folder Structure

Top Level

architectui-html-pro-webpack/
                ├── src/                       # All source code
                ├── webpack.config.js          # Source of truth (dev + prod share it)
                ├── webpack.dev.js             # Dev wrapper — passes isProduction=false
                ├── webpack.prod.js            # Prod wrapper — passes isProduction=true
                ├── webpack.config.optimization.js
                ├── package.json
                ├── package-lock.json
                ├── README.md
                ├── Changelog.md
                ├── CLAUDE.md                  # Guidance for AI coding assistants
                └── LOADER-CONFIGURATION.md    # Page loader customization

Everything outside src/ is build configuration or documentation. Production builds emit to architectui-html-pro/ at the same level (ignored by git).

src/ at a Glance

src/
                ├── app.js                     # Main entry — Bootstrap init, MetisMenu, drawer wiring
                ├── pages.js                   # All 86 page definitions for HtmlWebpackPlugin
                ├── DemoPages/                 # Handlebars page templates (one per output page)
                ├── layout/                    # Shared partials (header, sidebar, footer, drawer)
                ├── scripts-init/              # Per-feature JS entries (25+ entries)
                ├── utils/                     # Vanilla replacements for removed jQuery plugins
                ├── helpers/                   # Handlebars helpers (eq, etc.)
                ├── config/
                │   └── loader.config.js       # Page loader on/off, duration, styling
                └── assets/
                    ├── base.scss              # SCSS entry point
                    ├── components/            # Component-specific styles
                    ├── layout/                # Layout-specific styles
                    ├── elements/              # Element-specific styles (cards, badges, etc.)
                    ├── pages/                 # Page-specific styles (auth, docs, etc.)
                    ├── widgets/               # Widget-specific styles
                    ├── themes/                # 9 baked-in SCSS color themes
                    ├── fonts/                 # Copied verbatim by CopyWebpackPlugin
                    └── images/                # Copied verbatim by CopyWebpackPlugin

src/DemoPages/

One .hbs per output HTML page. Files are grouped by category:

Adding a new page is a two-step process: create the .hbs template here, then register it in src/pages.js. See Adding Pages.

src/layout/

Shared Handlebars partials reused across every page. The Handlebars loader registers src/layout/ and src/DemoPages/ as partialDirs, so any nested .hbs file is referenceable as a partial.

src/layout/
                ├── base.hbs                   # Master template — sidebar + header + main
                ├── basePages.hbs              # Auth/utility full-screen variant
                ├── docsBase.hbs               # Standalone docs shell (this site)
                ├── AppHeader/
                │   ├── header.hbs
                │   └── Components/
                │       ├── header-left.hbs
                │       ├── header-right.hbs
                │       └── logo.hbs
                ├── AppSidebar/
                │   └── sidebar.hbs            # MetisMenu-powered nav
                ├── AppMain/
                │   ├── page-title.hbs
                │   ├── page-title-alt.hbs
                │   ├── page-title-alt-2.hbs
                │   └── page-title-actions.hbs
                ├── AppFooter/                 # Footer partial
                ├── AppDrawer/                 # Right-side notifications drawer
                ├── AppDocs/
                │   └── sidebar.hbs            # Docs-only sidebar (this site)
                └── ThemeOptions/
                    └── theme-options.hbs      # Live theme drawer

Reference any partial from a page template using the {{>}} syntax:

{{!-- in a page template --}}
                {{> AppSidebar/sidebar }}
                {{> AppMain/page-title }}

See Handlebars Partials for the full partial system reference.

src/scripts-init/

Per-feature JavaScript initializers. Each file is its own Webpack entry, producing its own bundle that pages include only when needed. This keeps per-page JS payload small.

src/scripts-init/
                ├── demo.js                    # Demo-only helpers
                ├── ladda-loading.js
                ├── blockui-native.js          # Native replacement for block-ui plugin
                ├── circle-progress.js         # ApexCharts radialBar wrapper
                ├── count-up.js                # countup.js + IntersectionObserver
                ├── toastr.js                  # Bootstrap 5 native toast wrapper
                ├── sweet-alerts.js            # SweetAlert2 init
                ├── scrollbar.js               # Perfect Scrollbar init
                ├── sticky-elements.js
                ├── carousel-slider.js         # Slick Carousel
                ├── calendar.js                # FullCalendar
                ├── treeview.js                # Fancytree
                ├── maps.js                    # Mapbox + gmaps
                ├── rating.js                  # jQuery Bar Rating
                ├── image-crop-vanilla.js      # Cropper.js 2 (vanilla)
                ├── guided-tours.js            # Intro.js
                ├── tables-native.js           # DataTables (jQuery-free)
                ├── charts/
                │   ├── apex-charts.js
                │   ├── chartjs.js
                │   └── charts-sparklines.js
                └── form-components/
                    ├── form-validation.js
                    ├── form-wizard.js
                    ├── clipboard.js
                    ├── datepicker.js
                    ├── input-mask.js
                    ├── input-select.js
                    ├── range-slider.js
                    ├── textarea-autosize.js
                    └── toggle-switch.js

To add a new feature, create a file here and register it in the entry: block of webpack.config.js. The bundle gets emitted with a hashed filename and is injected into any page that lists it.

src/utils/

Native and vanilla replacements for jQuery plugins that have been removed. Used by feature initializers and components throughout the template.

See jQuery Migration for the full migration history and how to write new vanilla replacements.

src/assets/

SCSS partials, fonts, and images. The entry point is base.scss which imports every other partial in dependency order.

src/assets/
                ├── base.scss                  # Import graph root
                ├── components/
                │   ├── bootstrap5/            # Bootstrap source (do NOT edit)
                │   ├── perfect-scrollbar/
                │   ├── page-loader.scss
                │   └── ...
                ├── layout/                    # Header, sidebar, footer, drawer styles
                ├── elements/                  # Cards, badges, buttons, navigation, timelines
                ├── pages/                     # Auth pages, docs, user pages
                │   ├── userpages.scss
                │   └── _docs.scss             # This documentation site's styles
                ├── widgets/                   # Chart boxes, profile boxes
                ├── applications/              # Chat, mailbox, forum styles
                ├── demo-ui/                   # Demo-only helpers
                ├── utils/                     # Mixins, helpers, variables
                ├── themes/                    # 9 baked-in color themes
                │   ├── default/
                │   ├── dark/
                │   ├── blue-alt/
                │   ├── green/
                │   ├── orange/
                │   ├── red/
                │   ├── purple/
                │   ├── purple-alt/
                │   ├── black/
                │   └── _layout-variables.scss
                ├── fonts/                     # Font files (copied to dist verbatim)
                └── images/                    # Images (copied to dist verbatim)

See Theming for the SCSS variable system, how to switch themes, and how to customize colors.

src/helpers/

Custom Handlebars helpers. Currently contains eq.js which compares two values for equality (used by the docs sidebar to highlight the active link). The Webpack config registers this directory as the Handlebars loader's helperDirs:

// webpack.config.js
                {
                    test: /\.hbs$/,
                    loader: "handlebars-loader",
                    options: {
                        helperDirs: [Path.join(__dirname, "src", "helpers")],
                        partialDirs: [
                            Path.join(__dirname, "src", "layout"),
                            Path.join(__dirname, "src", "DemoPages"),
                        ],
                    },
                }

Drop a new .js file in src/helpers/ exporting a function and it becomes available in every template by filename.

src/config/loader.config.js

The page loader's master config. The values here are interpolated into src/layout/base.hbs via HtmlWebpackPlugin's template context. See Page Loader for details.