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.
<script src="https://hayneslab.dev/widgets/timeline.js" data-hl-config='[{"date":"2019","title":"Founded in a garage","text":"Two laptops, one whiteboard, and a first client who took a chance on us."},{"date":"2021","title":"First 10 clients","text":"Grew from freelance gigs into a full-service web studio through referrals alone."},{"date":"2023","title":"Launched client portal","text":"Rolled out a self-serve dashboard so clients can track projects and uptime in real time."},{"date":"2025","title":"50th project shipped","text":"Celebrated our fiftieth launch across trades, SaaS, e-commerce, and local services."},{"date":"2026","title":"Opened free tools library","text":"Started publishing our internal widgets and utilities free for any website."}]' async></script>
<!-- Free Timeline widget by haynes lab — https://hayneslab.dev/tools/widgets/timeline -->
<!-- Free Timeline widget by haynes lab — https://hayneslab.dev/tools/widgets/timeline -->
<script data-hl-config='[{"date":"2019","title":"Founded in a garage","text":"Two laptops, one whiteboard, and a first client who took a chance on us."},{"date":"2021","title":"First 10 clients","text":"Grew from freelance gigs into a full-service web studio through referrals alone."},{"date":"2023","title":"Launched client portal","text":"Rolled out a self-serve dashboard so clients can track projects and uptime in real time."},{"date":"2025","title":"50th project shipped","text":"Celebrated our fiftieth launch across trades, SaaS, e-commerce, and local services."},{"date":"2026","title":"Opened free tools library","text":"Started publishing our internal widgets and utilities free for any website."}]'>
/*!
* haynes lab — Timeline widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/timeline
*/
(function () {
'use strict';
var PREFIX = 'hlw-timeline';
var STYLE_ID = 'hlw-timeline-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/timeline.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 880px; margin: 0 auto; padding: 24px 16px 44px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; }' +
'.' + PREFIX + '__list { list-style: none; margin: 0; padding: 0; position: relative; }' +
'.' + PREFIX + '__list::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%;' +
' width: 2px; margin-left: -1px; background: #e5e7eb; }' +
'.' + PREFIX + '__item { position: relative; width: 50%; padding: 0 40px 32px; }' +
'.' + PREFIX + '__item:last-child { padding-bottom: 0; }' +
'.' + PREFIX + '__item--left { left: 0; text-align: right; }' +
'.' + PREFIX + '__item--right { left: 50%; text-align: left; }' +
'.' + PREFIX + '__dot { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%;' +
' background: var(--hlw-accent); border: 3px solid #ffffff; box-shadow: 0 0 0 2px var(--hlw-accent); }' +
'.' + PREFIX + '__item--left .' + PREFIX + '__dot { right: -10px; }' +
'.' + PREFIX + '__item--right .' + PREFIX + '__dot { left: -10px; }' +
'.' + PREFIX + '__date { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;' +
' text-transform: uppercase; color: var(--hlw-accent); }' +
'.' + PREFIX + '__title { margin: 4px 0 2px; font-size: 17px; font-weight: 600; color: #111827; }' +
'.' + PREFIX + '__text { margin: 0; font-size: 14px; color: #4b5563; }' +
'.' + 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: 640px) {' +
' .' + PREFIX + '__list::before { left: 12px; margin-left: 0; }' +
' .' + PREFIX + '__item { width: 100%; left: 0; text-align: left; padding: 0 0 28px 40px; }' +
' .' + PREFIX + '__item--left .' + PREFIX + '__dot, .' + PREFIX + '__item--right .' + PREFIX + '__dot' +
' { left: 2px; right: auto; }' +
'}';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function parseEvents(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) {
console.warn('[haynes lab timeline] Missing required data-hl-config attribute (JSON array of {date, title, text}). Nothing rendered.');
return null;
}
var items;
try {
items = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab timeline] data-hl-config is not valid JSON. Nothing rendered.', e);
return null;
}
if (!Array.isArray(items)) {
console.warn('[haynes lab timeline] data-hl-config must be a JSON array. Nothing rendered.');
return null;
}
var valid = items.filter(function (t) {
return t && typeof t.date === 'string' && t.date && typeof t.title === 'string' && t.title;
});
if (!valid.length) {
console.warn('[haynes lab timeline] data-hl-config has no valid events (each needs at least "date" and "title"). Nothing rendered.');
return null;
}
return valid;
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
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 items = parseEvents(script);
if (!items) return;
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
var list = el('ol', PREFIX + '__list');
items.forEach(function (t, i) {
var item = el('li', PREFIX + '__item ' + PREFIX + '__item--' + (i % 2 === 0 ? 'left' : 'right'));
item.appendChild(el('span', PREFIX + '__dot'));
item.appendChild(el('span', PREFIX + '__date', t.date));
item.appendChild(el('div', PREFIX + '__title', t.title));
if (t.text) item.appendChild(el('p', PREFIX + '__text', String(t.text)));
list.appendChild(item);
});
root.appendChild(list);
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/timeline';
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 timeline] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>