Vanilla SaaS Dashboard: A Framework-Free TypeScript Admin UI

Vanilla SaaS Dashboard is a vanilla TypeScript admin dashboard starter for SaaS products and internal analytics tools.

It’s built on TypeScript, native CSS, Canvas, localStorage, and service worker APIs. No 3rd-party framework or runtime library required.

Features:

• Responsive dashboard, analytics, user, transaction, settings, and support screens.
• Canvas line, bar, and donut charts with HiDPI scaling and animated updates.
• Command palette, global search, keyboard shortcuts, and undo/redo.
• PWA manifest, service worker caching, and offline fallback.
• Persistent settings, application state, activity history, and widget layouts.
• English and Persian translations with RTL and locale-aware formatting.
• Light and dark themes backed by CSS custom properties.
• ARIA markup, keyboard focus handling, live regions, and reduced-motion support.
• CSV, JSON, text report, and chart image export.

How To Use It:

Installation

git clone https://github.com/Mehdi-dev-sudo/vanilla-saas-dashboard.git
cd vanilla-saas-dashboard
npm install

Basic Usage

Build the TypeScript source and browser assets:

npm run build

Open or serve the generated entry page:

dist/index.html

Use an HTTP or HTTPS local server when checking service worker caching and installable PWA behavior.

Development Commands

# Rebuild TypeScript files as they change.
npm run watch
# Run the Jest test suite.
npm test
# Run TypeScript type checking.
npm run typecheck

Demo Login

The included login screen uses fake authentication for the demo application. Don’t forget to replace this browser-side authentication flow before connecting the dashboard to real user accounts or protected data.

Username: any value
Password: 3 or more characters

Styling And Customization

Override the tokens that match your product design:

-root {
  --clr-primary: #0f766e;
  --clr-primary-hover: #115e59;
  --clr-secondary: #14b8a6;
  --sidebar-width: 260px;
  --header-height: 64px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --chart-line: #0f766e;
  --chart-bar-start: #0f766e;
  --chart-bar-end: #14b8a6;
}

Connect Your Own Data

The current API layer requests data from dummyjson.com. It caches successful responses for five minutes, applies a 10-second request timeout, retries failed requests twice, and returns mock data after repeated failures or an offline state.

Start backend integration in:

js/data/api.ts

Page modules under js/pages/ handle the data displayed by individual dashboard views. Update the API URLs and corresponding data mapping when connecting users, transactions, analytics, or other screens to your backend.

Customize Application Pages

Each primary screen has its own TypeScript module:

js/pages/dashboard.ts
js/pages/analytics.ts
js/pages/users.ts
js/pages/transactions.ts
js/pages/settings.ts
js/pages/support.ts
js/pages/error.ts

Keyboard Controls

Alternatives:

• Modern, Responsive Bootstrap Dashboard Template – Astero Admin
• Accessible Dashboard & Admin Panel Framework – Windmill Dashboard
• Minimal Dashboard Template With Alpine.js and Tailwind CSS – Tailwind Admin