Business & Operations
Free Feature Comparison Table Widget
Us-vs-them checkmark table that shows exactly why you win.
A responsive feature comparison table you define with a small JSON config: column names plus rows of features with true/false values rendered as clean check and cross icons. It is ideal for SaaS "us vs. competitor" pages, product lineups, and service plan breakdowns. Install it by pasting a single script tag anywhere on your page.
Live demo
Embed this widget
Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
Hosted (recommended)html
<script src="https://hayneslab.dev/widgets/feature-comparison-table.js" data-hl-config='{"columns":["Our Studio","Typical Agency"],"rows":[{"feature":"Dedicated project manager","values":[true,false]},{"feature":"Weekly progress reports","values":[true,false]},{"feature":"Design revisions included","values":[true,true]},{"feature":"Source files handover","values":[true,false]},{"feature":"Post-launch support","values":[true,false]},{"feature":"Fixed transparent pricing","values":[true,false]}]}' async></script>
<!-- Free Feature Comparison Table widget by haynes lab — https://hayneslab.dev/tools/widgets/feature-comparison-table -->Inline (self-contained)html
<!-- Free Feature Comparison Table widget by haynes lab — https://hayneslab.dev/tools/widgets/feature-comparison-table -->
<script data-hl-config='{"columns":["Our Studio","Typical Agency"],"rows":[{"feature":"Dedicated project manager","values":[true,false]},{"feature":"Weekly progress reports","values":[true,false]},{"feature":"Design revisions included","values":[true,true]},{"feature":"Source files handover","values":[true,false]},{"feature":"Post-launch support","values":[true,false]},{"feature":"Fixed transparent pricing","values":[true,false]}]}'>
/*!
* haynes lab — Feature Comparison Table widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/feature-comparison-table
*/
(function () {
'use strict';
var PREFIX = 'hlw-feature-comparison-table';
var STYLE_ID = 'hlw-feature-comparison-table-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/feature-comparison-table.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 720px; margin: 0 auto; padding: 24px 24px 34px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 15px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 12px; }' +
'.' + PREFIX + '__scroll { overflow-x: auto; }' +
'.' + PREFIX + '__table { width: 100%; border-collapse: collapse; }' +
'.' + PREFIX + '__th { padding: 12px 14px; text-align: center; font-size: 15px; font-weight: 600;' +
' color: #111827; border-bottom: 2px solid #e5e7eb; white-space: nowrap; }' +
'.' + PREFIX + '__th--feature { text-align: left; }' +
'.' + PREFIX + '__th--us { color: var(--hlw-accent); border-bottom-color: var(--hlw-accent); }' +
'.' + PREFIX + '__td { padding: 12px 14px; text-align: center; border-bottom: 1px solid #f3f4f6;' +
' vertical-align: middle; }' +
'.' + PREFIX + '__td--feature { text-align: left; font-weight: 500; color: #374151; }' +
'.' + PREFIX + '__td--us { background: color-mix(in srgb, var(--hlw-accent) 6%, #ffffff); }' +
'.' + PREFIX + '__row:last-child .' + PREFIX + '__td { border-bottom: 0; }' +
'.' + PREFIX + '__icon { display: inline-flex; width: 26px; height: 26px; border-radius: 50%;' +
' align-items: center; justify-content: center; }' +
'.' + PREFIX + '__icon svg { display: block; }' +
'.' + PREFIX + '__icon--yes { background: var(--hlw-accent); color: #ffffff; }' +
'.' + PREFIX + '__icon--no { background: #f3f4f6; color: #9ca3af; }' +
'.' + PREFIX + '__text { font-size: 14px; color: #374151; }' +
'.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
'@media (max-width: 560px) { .' + PREFIX + ' { padding: 16px 14px 32px; }' +
' .' + PREFIX + '__th, .' + PREFIX + '__td { padding: 10px 8px; font-size: 14px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function parseConfig(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) {
console.warn('[haynes lab feature-comparison-table] Missing required data-hl-config attribute (JSON {"columns": [...], "rows": [...]}). Nothing rendered.');
return null;
}
var cfg;
try {
cfg = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab feature-comparison-table] data-hl-config is not valid JSON. Nothing rendered.', e);
return null;
}
if (!cfg || !Array.isArray(cfg.columns) || !cfg.columns.length || !Array.isArray(cfg.rows) || !cfg.rows.length) {
console.warn('[haynes lab feature-comparison-table] data-hl-config must have a non-empty "columns" array and "rows" array. Nothing rendered.');
return null;
}
var cols = cfg.columns.map(function (c) { return String(c); });
var rows = cfg.rows.filter(function (r) {
return r && typeof r.feature === 'string' && r.feature && Array.isArray(r.values) && r.values.length === cols.length;
});
if (!rows.length) {
console.warn('[haynes lab feature-comparison-table] No valid rows (each needs "feature" and a "values" array matching the column count). Nothing rendered.');
return null;
}
return { columns: cols, rows: rows };
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function markSvg(yes) {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 16 16');
svg.setAttribute('width', '14');
svg.setAttribute('height', '14');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
var path = document.createElementNS(svgNS, 'path');
path.setAttribute('d', yes ? 'M3 8.5l3.2 3.2L13 4.8' : 'M4 4l8 8M12 4l-8 8');
path.setAttribute('fill', 'none');
path.setAttribute('stroke', 'currentColor');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
svg.appendChild(path);
return svg;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function build(script) {
var cfg = parseConfig(script);
if (!cfg) return;
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
var scroll = el('div', PREFIX + '__scroll');
var table = el('table', PREFIX + '__table');
var thead = document.createElement('thead');
var headRow = document.createElement('tr');
headRow.appendChild(el('th', PREFIX + '__th ' + PREFIX + '__th--feature', ''))
.setAttribute('scope', 'col');
cfg.columns.forEach(function (col, ci) {
var th = el('th', PREFIX + '__th' + (ci === 0 ? ' ' + PREFIX + '__th--us' : ''), col);
th.setAttribute('scope', 'col');
headRow.appendChild(th);
});
thead.appendChild(headRow);
table.appendChild(thead);
var tbody = document.createElement('tbody');
cfg.rows.forEach(function (row) {
var tr = el('tr', PREFIX + '__row');
var featureTd = el('td', PREFIX + '__td ' + PREFIX + '__td--feature', row.feature);
tr.appendChild(featureTd);
row.values.forEach(function (val, ci) {
var td = el('td', PREFIX + '__td' + (ci === 0 ? ' ' + PREFIX + '__td--us' : ''));
if (val === true || val === false) {
var icon = el('span', PREFIX + '__icon ' + PREFIX + '__icon--' + (val ? 'yes' : 'no'));
icon.setAttribute('role', 'img');
icon.setAttribute('aria-label', val ? 'Included' : 'Not included');
icon.appendChild(markSvg(val));
td.appendChild(icon);
} else {
td.appendChild(el('span', PREFIX + '__text', String(val)));
}
tr.appendChild(td);
});
tbody.appendChild(tr);
});
table.appendChild(tbody);
scroll.appendChild(table);
root.appendChild(scroll);
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/feature-comparison-table';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab feature-comparison-table] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>Configuration
Every option is an attribute on the script tag — the same attributes the customizer above exposes. All attributes are optional unless marked required — defaults apply when omitted.
| Attribute | Default | Description |
|---|---|---|
data-hl-config | (required) | JSON object with a "columns" array of names and a "rows" array of {feature, values[]} objects, where each value is true (check), false (cross), or a short text string. |
data-hl-accent | "#f97316" | Color for the highlighted first ("us") column and the check icons. |
Frequently asked questions
How do I install the feature comparison table?
Paste the script tag with your data-hl-config JSON where you want the table to appear — the widget renders inline right after the tag.
Can I customize the columns, rows, and colors?
Yes — define any column names and feature rows in data-hl-config (values can be true, false, or short text like "Limited"), and set data-hl-accent to any hex color for the highlighted column and check icons.
Does it work on WordPress, Shopify, or Squarespace?
Yes — it is a single vanilla JS file with no dependencies, so it works on any platform that lets you paste a script tag, including WordPress, Shopify, and Squarespace.
More free widgets
Business & Operations
Pricing Table
Responsive pricing tiers with a monthly/annual billing toggle.
View toolE-commerce & RetailPrice Comparison Table
Compare product tiers side by side with a highlighted pick and CTA links.
View toolBusiness & OperationsChangelog Feed
Show product updates grouped by release date with colored type badges.
View toolNeed a custom widget?
We build custom widgets, integrations, and whole products. Tell us what your site needs and we'll scope it.
Get in Touch