HTMLAdmin dashboard

modern-javascript-dashboard — HTML Admin dashboard Template

By simplenotsimpler

A themable JavaScript dashboard sample template built with HTML and ES6, using Bootstrap 4 and CSS grid layout, with the modern-table library built in and a color-blind friendly palette by default.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

modern-javascript-dashboard · Desktop homepage

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-12View source

What stands out

A quick read of the recorded project description.

Written in modern ES6, targeting only modern browsers, with no IE support

Layout based on Bootstrap 4 and CSS grid, compatible with Bootstrap 4.4.1 and above

Data tables rendered by the modern-table library, charts using Apex Charts

Default Microsoft Power BI color-blind friendly theme, with theme replacement supported

Data source is JSON, and you must provide your own container to hold the data table

Gracefully degrades to no formatting when number and date formatting libraries are not loaded

Template Details

This is a sample dashboard starter template written in modern ES6. The page layout relies on Bootstrap 4 and CSS grid, data tables are rendered by the modern-table library, and charts use Apex Charts. The default theme is taken from Microsoft Power BI's color-blind friendly palette and can be replaced through the theming mechanism.

The template targets only modern browsers, explicitly does not support IE, and states compatibility with Bootstrap 4.4.1 and above, with 4.4.1 and 4.5.3 actually tested. The README says it can theoretically work with other CSS frameworks, but this has not been tested. Data comes from a JSON data source, and a container is required to hold the data table; if number or date formatting is specified in the configuration but the corresponding library is not loaded, it degrades to no formatting. It is recommended to use ISO 8601 date format for source data and configuration, then localize through the interface.

Site search is intentionally left unavailable, because developers usually integrate their own search tools. For accessibility, the README describes it as minimal (around Level A). The project uses the MIT license, and the free scope is limited to this version of the code; third-party assets such as demo images, fonts, and icons require separate license verification.

HTMLBackend

Is it right for your project?

Use Cases

You need a directly viewable dashboard interface example as a starting point
You want to see how a color-blind friendly palette is applied in a data interface
Your project already uses Bootstrap 4 and you want to add table and chart areas
You need to render tables from a JSON data source and integrate your own search tool

Suitable For

Developers familiar with HTML and ES6 who want to build dashboard pages themselves
Front-end projects using the Bootstrap 4 stack that need example layouts
Data visualization interfaces that need a color-blind friendly palette reference
Projects that accept modern-browser-only support and no IE compatibility

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
After downloading or cloning the repository from GitHub, you must include Bootstrap 4.4.1 or 4.5.3, Apex Charts, and the modern-table library yourself
2
Prepare a JSON data source and provide a container in the page to hold the data table
3
If you need number or date formatting, it is recommended to additionally include format-intl-number and Moment.js
4
It is recommended to use ISO 8601 date format for source data and configuration, then complete localization through the interface
5
Site search is unavailable by default; you need to integrate a search tool such as Elasticsearch yourself

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is this version of the code and does not mean external services or third-party assets are free.

Must comply with when using

You may use, modify, commercialize, and distribute this version of the code for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.
The template targets only modern browsers and does not support older browsers (such as IE).
Internet Explorer is explicitly not supported.
It must be used with Bootstrap 4.4.1 or higher.
It has only been tested on Bootstrap 4.4.1 and 4.5.3.
Compatibility with other CSS frameworks has not been verified and is not guaranteed.
Site search is intentionally left unavailable and requires integrating your own search tool.
Accessibility support is only minimal (around Level A).
You need to provide your own JSON data source.
You need to provide your own container to hold the data table.
Chart functionality depends on the external Apex Charts library.
Data tables depend on the external ModernTable library.
Number formatting requires additionally including the format-intl-number library.
Date formatting requires additionally including the Moment.js library.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

* __*Only*__ targets **modern** browsers.
Original README

IE is not supported.
Original README

Compatible with Bootstrap 4.4.1 and higher.
Original README

Specifically tested with Bootstrap 4.4.1 and 4.5.3.
Original README

Theoretically, this should work with other CSS frameworks. However, this has __*NOT*__ been tested with other CSS frameworks, so your mileage may vary.
Original README

Site search intentionally left non-functional since developers will likely want to use their own tool, e.g. Elasticsearch, etc.
Original README

Accessibility: Minimal level (Level A ??).
Original README

* JSON data source
Original README

* Container to hold the datatable
Original README

* [Apex Charts](https://github.com/apexcharts/apexcharts.js)
Original README

* [ModernTable Library](https://github.com/simplenotsimpler/modern-table)
Original README

* Number formatting: [format-intl-number library](https://github.com/simplenotsimpler/format-intl-number)
Original README

* Date formatting: [Moment.js](https://momentjs.com/)
Original README

https://github.com/simplenotsimpler/modern-javascript-dashboard/blob/main/LICENSE https://github.com/simplenotsimpler/modern-javascript-dashboard/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-12. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: Partly documented · 68 / 100
Technologies: HTML
Website type: Admin dashboard

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2021-09-05
Screenshot last checked: 2026-10-12

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-13

Inspect the recorded source material

SHA-256: 69056ae9f2930d15ddb141d05626c5c213a73cd58965854da6a1dc1c0924487c

2026-10-12T23:23:47.816Z

Source file / repository

# Modern JavaScript Dashboard
Sample themable JavaScript dashboard starter template that employs modern ES6, Bootstrap 4 and CSS grid. Uses [modern-table](https://github.com/simplenotsimpler/modern-table) library.

Current theme: [Microsoft Power BI Color Blind Friendly](https://community.powerbi.com/t5/Themes-Gallery/Color-Blind-Friendly/td-p/140597). 

# Notes:
* __*Only*__ targets **modern** browsers. 
* To help [Microsoft phase out IE11](https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666) and in anticipation of [Bootstrap 5 dropping IE support](https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/), IE is not supported.
* Compatible with Bootstrap 4.4.1 and higher.
* Specifically tested with Bootstrap 4.4.1 and 4.5.3.
* Theoretically, this should work with other CSS frameworks. However, this has __*NOT*__ been tested with other CSS frameworks, so your mileage may vary.
* If number or date formatting are specified in the configuration, but the proper library does not load, this gracefully fails to no formatting.
* Strongly recommended to use ISO 8601 date formats in your source data and configuration. Then use the UI for localization.
* Accessibility: Minimal level (Level A ??).
* Site search intentionally left non-functional since developers will likely want to use their own tool, e.g. Elasticsearch, etc.

# Live Demo
[https://simplenotsimpler.github.io/modern-javascript-dashboard/](https://simplenotsimpler.github.io/modern-javascript-dashboard/)

# Getting Started
Download or clone from [modern-javascript-dashboard](https://github.com/simplenotsimpler/modern-javascript-dashboard).

## Requires:
* Bootstrap - either of the versions below:
  * [Bootstrap 4.4.1](https://getbootstrap.com/docs/4.4/getting-started/introduction/)
  * [Bootstrap 4.5.3](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
* [Apex Charts](https://github.com/apexcharts/apexcharts.js)
* [ModernTable Library](https://github.com/simplenotsimpler/modern-table)
* JSON data source
* Container to hold the datatable 

## Recommended:
* Number formatting: [format-intl-number library](https://github.com/simplenotsimpler/format-intl-number)
* Date formatting: [Moment.js](https://momentjs.com/)

# License
This project is [MIT licensed](./LICENSE).

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

gentelella

Gentelella v4 is a free, open-source admin dashboard template maintained by Colorlib, built with vanilla JavaScript, SCSS, and Vite 8 without Bootstrap or jQuery.

HTML · Admin dashboard

coreui-free-bootstrap-admin-template

A free Bootstrap admin template maintained by CoreUI, built on CoreUI's own UI component library. It provides compiled HTML pages and Pug template source code, covering dashboards, authentication, forms, components, icons, and error pages.

HTML · Admin dashboard

dashboards

A collection of responsive dashboard HTML templates open-sourced by Keen IO, built on CSS Grid, offering multiple prebuilt admin data interface layouts.

HTML · Admin dashboard

SB Admin 2

SB Admin 2 is a classic Bootstrap admin template from Start Bootstrap, offering dashboards, charts, tables, and common management pages.

HTML · Admin dashboard

Adminator-admin-dashboard

Adminator 4 is a vanilla HTML, CSS and JavaScript admin dashboard template with a CSS-variable token design system, built-in light and dark themes, no jQuery or Bootstrap dependency, and 18 pages covering dashboards, mail, calendar, charts, forms, tables and error pages.

HTML · Admin dashboard

SB Admin

SB Admin is a lightweight, open-source Bootstrap admin template from Start Bootstrap. It offers a sidebar-and-top-bar layout with data tables, forms, and stat cards, plus responsive design.

HTML · Admin dashboard