Noureddine RAMDI / Mazer: a jQuery-free Bootstrap 5 admin template with modern tooling

Created Mon, 04 May 2026 10:23:02 +0000 Modified Sat, 23 May 2026 20:41:27 +0000
928 Words
github-stars bootstrap javascript admin-dashboard vite jquery-free frontend

zuramai/mazer

Mazer is a Bootstrap 5 admin dashboard template that takes a clear stance: no jQuery. For frontend developers who have long dealt with bulky dependencies and legacy jQuery plugins, Mazer offers a refreshing approach by embracing vanilla JavaScript and Bootstrap 5’s native JavaScript plugins. This choice unlocks a lighter, more modern frontend experience without sacrificing important admin dashboard features like dark mode, smooth scrolling, and charting.

What Mazer offers and its architecture

At its core, Mazer is a Bootstrap 5-based admin dashboard template designed to speed up frontend development for admin panels, dashboards, and similar web apps. It ships with a collection of pre-built UI components and layouts that you can plug into your projects.

Architecturally, Mazer is built on vanilla JavaScript rather than jQuery, which is a notable break from many Bootstrap templates still carrying jQuery as a dependency. This aligns with Bootstrap 5’s own direction of dropping jQuery in favor of native DOM APIs and modern JavaScript.

The build system uses Vite, a fast frontend build tool known for its speed and developer-friendly hot module replacement. The presence of port 5173 in the dev server hints at this, and Mazer leverages npm or yarn for dependency management.

In terms of UI features, Mazer bundles:

  • Dark mode support out of the box, enabling users to toggle a dark theme.
  • Scroll handling via Perfect Scrollbar, which enhances scrollbars for better UX.
  • Charting through ApexCharts, a feature-rich chart library.

Distribution is flexible: you can grab pre-built releases for quick starts, build the project yourself, run it in Docker containers, or even load assets from a CDN (jsdelivr).

Community adoption is a strong signal here. Mazer has inspired ports across more than a dozen frameworks including Laravel, React, Nuxt, Django, and Symfony. This shows its utility as a base template adaptable to various tech stacks.

Technical strengths and tradeoffs of a jQuery-free Bootstrap admin

Mazer’s most interesting technical aspect is its deliberate removal of jQuery, fully embracing Bootstrap 5’s native JavaScript plugins and vanilla DOM APIs. This leads to several benefits:

  • Reduced bundle size: jQuery can add significant weight to frontend assets. Removing it means smaller payloads and faster load times.
  • Cleaner, modern JavaScript: Vanilla JS and Bootstrap 5’s native JS plugins follow modern standards, making the codebase easier to maintain and reason about.
  • Future-proofing: jQuery’s popularity is waning as browsers support newer standards, so Mazer aligns with where frontend development is headed.

Under the hood, the code is surprisingly clean given the complexity of admin templates. The use of Vite ensures fast rebuilds and a smooth developer experience. The integration of Perfect Scrollbar and ApexCharts is straightforward, relying on vanilla JS APIs rather than jQuery wrappers.

That said, the tradeoff is clear:

  • Developers accustomed to jQuery’s convenience methods might face a learning curve adapting to vanilla JS event handling and DOM manipulation.
  • Some jQuery plugins or legacy Bootstrap 4 integrations might not be compatible, so projects with heavy customization or legacy code could require additional adjustments.
  • The template’s focus on vanilla JS means it’s best suited for projects that don’t rely on heavy frontend frameworks or complex state management out of the box.

Overall, Mazer strikes a balance between modern frontend practices and practical admin dashboard needs. Its design choices reflect a clear opinion on frontend architecture that favors minimalism and native browser capabilities.

Installation and getting started with Mazer

If you want to try Mazer, the README provides clear paths:

Download the latest release from the releases page. Open the index HTML file and explore the source code.

Building yourself

  1. Clone the repository
git clone https://github.com/zuramai/mazer
  1. Install dependencies
yarn install

Building with Docker

  • Clone the repository git clone https://github.com/zuramai/mazer
  • Make sure you have Docker installed and run:
    • docker build -t mazer-frontend .
    • docker run -it -d -p 5173:80 --name mazer mazer-frontend
    • Open http://localhost:5173

This straightforward setup means you can quickly evaluate the template in your environment, whether you prefer local builds or containerized deployment.

Verdict: who should consider Mazer?

Mazer is a solid choice if you want a Bootstrap 5 admin template that avoids the legacy baggage of jQuery. It’s especially relevant for teams starting fresh or those looking to modernize an admin UI with a focus on vanilla JavaScript and Bootstrap’s native features.

The template’s clean codebase, modern build pipeline with Vite, and flexible deployment options make it approachable both for quick prototypes and real-world projects. The multi-framework community ports further attest to its adaptability.

However, if your project depends heavily on jQuery plugins, legacy Bootstrap 4 code, or complex frontend frameworks that require extensive JavaScript beyond what vanilla JS comfortably manages, Mazer might require extra integration effort.

In short, Mazer is worth exploring if you want a leaner, jQuery-free Bootstrap 5 admin template with practical features like dark mode and charts, backed by a modern build system and community support. It’s a good reference point for the direction modern admin dashboards can take.

→ GitHub Repo: zuramai/mazer ⭐ 3,079 · HTML