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.
<!-- Free World Clock widget by haynes lab — https://hayneslab.dev/tools/widgets/world-clock -->
<script data-hl-config='[{"label":"Charlotte / New York","tz":"America/New_York"},{"label":"London","tz":"Europe/London"},{"label":"Tokyo","tz":"Asia/Tokyo"}]'>
/*!
* haynes lab — World Clock widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/world-clock
*/
(function () {
'use strict';
var PREFIX = 'hlw-world-clock';
var STYLE_ID = 'hlw-world-clock-styles';
var DEFAULT_ZONES = [
{ label: 'New York', tz: 'America/New_York' },
{ label: 'London', tz: 'Europe/London' },
{ label: 'Tokyo', tz: 'Asia/Tokyo' }
];
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/world-clock.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { max-width: 720px; margin: 0 auto; padding: 20px 20px 28px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 12px; }' +
'.' + PREFIX + '__title { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: #111827;' +
' display: flex; align-items: center; gap: 8px; }' +
'.' + PREFIX + '__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%;' +
' background: var(--hlw-accent); flex: 0 0 auto; }' +
'.' + PREFIX + '__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));' +
' gap: 10px; }' +
'.' + PREFIX + '__clock { padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 10px;' +
' background: #f9fafb; text-align: center; }' +
'.' + PREFIX + '__label { font-size: 13px; font-weight: 600; color: #374151;' +
' white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }' +
'.' + PREFIX + '__time { font-size: 24px; font-weight: 700; color: #111827;' +
' font-variant-numeric: tabular-nums; letter-spacing: 0.5px; margin-top: 2px; }' +
'.' + PREFIX + '__meta { font-size: 12px; color: #6b7280; margin-top: 2px;' +
' font-variant-numeric: tabular-nums; }' +
'.' + PREFIX + '__credit { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;' +
' font-size: 11px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
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 parseZones(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) return DEFAULT_ZONES.slice();
var items;
try {
items = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab world-clock] data-hl-config is not valid JSON. Using default zones.', e);
return DEFAULT_ZONES.slice();
}
if (!Array.isArray(items)) {
console.warn('[haynes lab world-clock] data-hl-config must be a JSON array of {label, tz}. Using default zones.');
return DEFAULT_ZONES.slice();
}
var valid = [];
items.forEach(function (z) {
if (!z || typeof z.label !== 'string' || !z.label || typeof z.tz !== 'string' || !z.tz) return;
try {
new Intl.DateTimeFormat('en-US', { timeZone: z.tz });
valid.push({ label: z.label, tz: z.tz });
} catch (e) {
console.warn('[haynes lab world-clock] Unknown time zone "' + z.tz + '" for "' + z.label + '". Skipped.');
}
});
if (!valid.length) {
console.warn('[haynes lab world-clock] data-hl-config has no valid {label, tz} entries. Using default zones.');
return DEFAULT_ZONES.slice();
}
return valid;
}
function build(script) {
var zones = parseZones(script);
var hour12 = script.getAttribute('data-hl-format') !== '24';
var title = script.getAttribute('data-hl-title') || 'World Clock';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
var clocks = zones.map(function (z) {
return {
label: z.label,
timeFmt: new Intl.DateTimeFormat('en-US', {
timeZone: z.tz, hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: hour12
}),
dateFmt: new Intl.DateTimeFormat('en-US', {
timeZone: z.tz, weekday: 'short', month: 'short', day: 'numeric', timeZoneName: 'short'
})
};
});
injectStyles();
var root = el('div', PREFIX);
root.setAttribute('role', 'region');
root.setAttribute('aria-label', title);
root.style.setProperty('--hlw-accent', accent);
root.appendChild(el('h3', PREFIX + '__title', title));
var grid = el('div', PREFIX + '__grid');
var timeEls = [];
var metaEls = [];
clocks.forEach(function (c) {
var card = el('div', PREFIX + '__clock');
card.appendChild(el('div', PREFIX + '__label', c.label));
var time = el('div', PREFIX + '__time');
var meta = el('div', PREFIX + '__meta');
card.appendChild(time);
card.appendChild(meta);
grid.appendChild(card);
timeEls.push(time);
metaEls.push(meta);
});
root.appendChild(grid);
function tick() {
var now = new Date();
clocks.forEach(function (c, i) {
timeEls[i].textContent = c.timeFmt.format(now);
metaEls[i].textContent = c.dateFmt.format(now);
});
}
tick();
setInterval(tick, 1000);
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/world-clock';
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 world-clock] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>