Show DEV: I built an AI/SaaS template with vanilla HTML, CSS and JavaScript

APEXVYRA AI SaaS HTML Template — Wed, 07 Oct 2026 18:37:25 +0000

APEXVYRA is a front-end template for AI/SaaS products: a marketing site plus a full app dashboard, built with plain HTML, CSS and vanilla JavaScript. No framework, no build step, no backend.

I wanted something you can open in an editor and change directly, without first installing a toolchain or learning someone else's component abstractions.

Why vanilla?

A few practical reasons:

Files you can edit directly. Every page is an HTML file. Change the markup, refresh the browser.
No build tooling. No bundler, no transpiler, no node_modules needed to run it.
Stack-agnostic. Because it's plain markup, CSS and small JS modules, it can be moved into whatever stack you pick later: server-rendered templates, a static site generator, or a framework.
Easy to inspect. View source shows exactly what's running. The JavaScript is split into small, single-purpose components (modal, tabs, tooltip, command palette, table sort, toast, sidebar, and so on).

The dashboard

The app side is a 7-page dashboard:

Overview: KPI cards with sparklines and summary charts
AI Chat: a chat interface demo
Analytics: charts with legends and data-table views
Projects: project list/views
Team: members and roles
Settings: account and preference forms
Billing: plan and billing screens

All pages share the same sidebar and topbar layout, with the sidebar collapsing on smaller screens.

SVG data visualizations

There's no charting library. The charts come from a small hand-written SVG renderer that supports:

line charts
area charts
(stacked) bar charts
donut charts
heatmaps
sparklines (in the KPI cards)

Each chart is an empty container with a data-av-chart-type attribute and a JSON config in a data attribute. A few things I cared about:

Theme-aware colors: resolved from CSS custom properties, not hardcoded hex values, so charts follow dark/light mode.
Responsive: SVG viewBox scaling, with axis labels thinned out on narrow screens.
Keyboard-accessible: data points, bars, segments and cells are focusable, with aria-labels and a shared tooltip on hover/focus.
Data-table fallback: every chart has a visible toggle to show the underlying data as a table.

Dark/light mode and responsive layout

The theme is controlled by a data-theme attribute on the root element. A small inline script sets the initial theme before first paint to avoid a flash of the wrong theme, and a toggle component switches and remembers the choice. Colors are defined as CSS custom properties, so components and charts adapt automatically.

Layouts are responsive across desktop and mobile, including the dashboard's collapsible sidebar.

What's included

24+ pages and screens (marketing pages, auth screens, blog, pricing, FAQ, legal pages and the 7-page dashboard)
30+ UI components
Documentation

Live demo

👉 https://apexvyra-ai-saas-template.netlify.app

It's a paid template. If you're curious, the product page is here: https://apexvyra.gumroad.com/l/apexvyra-ai-saas-html-template

Feedback

I'd love input from other front-end devs:

What would you improve in the component structure or dashboard UX?

DEV Community: APEXVYRA AI SaaS HTML Template