Dashboard Templates › Learn › How to customize an HTML dashboard template

Learn23 Jul 2026 · 8 min read

How to customize an HTML dashboard template

Customizing an HTML dashboard template means editing one file: change the CSS variables for color, swap the demo data arrays for your own numbers, rename the labels, and delete the sections you do not need. A text editor and a browser are the whole toolchain.

Single-file templates make this practical because everything is in one place: the styles sit in a <style> block at the top, the layout in the body markup, and the demo data in a <script> block at the bottom. There is no build step, no package install, and no framework version to match. The steps below follow the order most people actually work in: appearance first, then data, then structure.

What do you need before you start?

You need 3 things: the template file itself, a plain text editor (Notepad, TextEdit in plain-text mode, VS Code, or anything that saves raw text), and a browser to check your work. That is the complete list. Before touching anything, save a copy of the original file under a new name like relay-crm-backup.html, so every experiment is reversible. Open the working copy in your editor and in your browser side by side; after each edit, save and press refresh. The feedback loop is about 2 seconds, which is why single-file customization is fast even for people who do not write code daily.

How do you change the colors and fonts?

You change colors and fonts by editing the CSS custom properties in the :root block at the top of the file. Templates built this way define every color once, as a named variable, and reference the name everywhere else. Change the value in one place and the whole dashboard repaints.

Open Relay, our free CRM template, and the first lines of its style block read: --bg:#F3F5FB; --card:#FFFFFF; --soft:#F6F8FD; --inset:#EEF1F8;, with the accent color defined alongside. To rebrand the dashboard for your company, replace the accent hex value with your brand color and adjust --bg if you want a warmer or darker page. Hex values are the 6-character codes after the #; any color picker will give you one. Fonts work the same way: find the font-family declaration on the body rule, and swap in your typeface. Save, refresh, and the entire interface follows, because every panel, button, and chart reads the same variables.

How do you replace the demo data?

You replace demo data by editing the JavaScript arrays and objects near the bottom of the file, inside the <script> block. Look for the structures with obviously fake content: arrays of names, months, dollar figures, or rows that match what you see on screen.

The safe method is shape-preserving replacement. Find the array that feeds one chart, copy its structure exactly, and change only the values: your 12 months in place of the demo's 12 months, your deal amounts in place of its deal amounts. Keep the same number of items at first; once the chart renders your data correctly, add or remove entries one at a time. KPI cards are even simpler: their labels and values are usually plain HTML in the body, so editing Closed revenue or $1.28M in Relay is a find-and-replace. Work panel by panel, refreshing after each one, and a typo never costs you more than the last edit.

How do you add, remove, or reorder sections?

You remove a section by deleting its containing block, and you reorder sections by moving blocks around. In our templates each panel is a self-contained element, typically a <div class="panel"> holding a heading and a chart or table. Delete the whole element, from its opening tag to its matching close, and the grid reflows around the gap automatically.

The one rule is matching tags: if you delete an opening <div> without its closing partner, the layout breaks in confusing ways. Your editor's bracket matching or code folding helps here; fold the block first to confirm you have the whole thing, then delete. Reordering is the same operation without the deletion: cut a block, paste it above a sibling. If a removed chart leaves an orphan script behind, the page still works; the script simply finds no target and does nothing. Tidy people can delete the orphan too, but it is cosmetic.

How do you publish the customized file?

You publish a single-file dashboard by putting the file anywhere files are served, because it has no server-side dependencies at all. Double-clicking it opens it locally, which is enough for personal use. For a team, upload it to any static host (Netlify Drop, Vercel, GitHub Pages, an S3 bucket, or your company's intranet), and share the URL. Emailing the file as an attachment also works: the recipient opens a fully functional dashboard, fonts and charts included, because nothing external is required beyond a browser.

One habit worth keeping: version your file names (dashboard-v2.html, dashboard-v3.html) each time you make a round of changes. With a single file, the file itself is the version history, and a bad edit is always one copy away from undone.

Where do you get a template worth customizing?

A template worth customizing is a file whose source you can actually read. Our free templates page has 6 complete dashboards at no charge, including Relay for CRM and Vault for finance; both are clean, commented single files you can practice every step above on today. When you need a different domain, the full dashboard template catalogue covers 65 single-file templates across 32 categories at $6.99 each, from the Northstar SaaS metrics dashboard to field operations and hospitality. Every preview is the working file, so you can inspect the exact markup you will be editing before you buy.

Download a free template and start →  ·  Browse all dashboard templates