Build a World Clock in 30 Lines of Vanilla JS

No libraries needed. Here is the complete code for a working world clock, the same approach used in the Weather & Clock Dashboard Firefox extension.

The Core Function

function getTimeInZone(timezone) {
  return new Intl.DateTimeFormat("en-US", {
    timeZone: timezone,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  }).format(new Date());
}

// Usage
getTimeInZone("America/New_York");  // "14:32:07"
getTimeInZone("Europe/London");     // "19:32:07"
getTimeInZone("Asia/Tokyo");        // "04:32:07"

Add Date and City

function getClockData(timezone, cityName) {
  const now = new Date();
  const formatter = new Intl.DateTimeFormat("en-US", {
    timeZone: timezone,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
    weekday: "short",
    month: "short",
    day: "numeric",
  });
  const parts = formatter.formatToParts(now);
  const get = (type) => parts.find(p => p.type === type)?.value || "";

  return {
    city: cityName,
    time: `${get("hour")}:${get("minute")}:${get("second")}`,
    date: `${get("weekday")}, ${get("month")} ${get("day")}`,
  };
}

Display Multiple Clocks

const CLOCKS = [
  { timezone: "America/New_York",   city: "New York"  },
  { timezone: "Europe/London",       city: "London"    },
  { timezone: "Europe/Paris",        city: "Paris"     },
  { timezone: "Asia/Tokyo",          city: "Tokyo"     },
  { timezone: "Australia/Sydney",    city: "Sydney"    },
];

function renderClocks() {
  const container = document.getElementById("clocks");
  container.innerHTML = CLOCKS.map(({ timezone, city }) => {
    const { time, date } = getClockData(timezone, city);
    return `
      <div class="clock-card">
        <div class="city">${city}</div>
        <div class="time">${time}</div>
        <div class="date">${date}</div>
      </div>
    `;
  }).join("");
}

// Update every second
renderClocks();
setInterval(renderClocks, 1000);

The HTML

<div id="clocks" class="clocks-grid"></div>

<style>
.clocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.clock-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.time {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.city { color: var(--text-secondary); font-size: 0.85rem; }
.date { color: var(--text-secondary); font-size: 0.75rem; margin-top: 4px; }
</style>

Important: font-variant-numeric: tabular-nums

Without this, digits with different widths (1 vs 8) cause the clock to jitter every second. Always use tabular numbers for any time display.

Browser Support

Intl.DateTimeFormat with timeZone works in all modern browsers including Firefox. No polyfill needed.

That is it. 30 lines of vanilla JS, zero dependencies, works in any browser or extension.

The full source is on GitHub.