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

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?