How to Add a World Clock to Your Website (2026 Guide)

Want to add a live world clock to your website? WorldClock.lol provides a free, embeddable widget that works on any website — no sign-up, no API key, no dependencies.

How Do I Add a World Clock to My Website?

Add these two lines of HTML to your page. That's it — a live flip-clock widget will appear showing the current time for your chosen city, updating every second:

<div id="worldclock-widget" data-timezone="America/New_York" data-label="New York" data-theme="dark"></div>
<script src="https://www.worldclock.lol/widget/embed.js"></script>

What Options Can I Configure?

The widget supports these HTML attributes on the container div:

• data-timezone — Any IANA timezone (e.g., Asia/Tokyo, Europe/London, America/Los_Angeles)
• data-label — Display name for the location (e.g., "Tokyo, Japan")
• data-theme — dark or light
• data-branding — true or false to show/hide "Powered by WorldClock.lol"

How Do I Use the JavaScript API?

For more control, use the JavaScript API:

<div id="worldclock-widget"></div>
<script src="https://www.worldclock.lol/widget/embed.js"></script>
<script>
  WorldClockWidget.init({
    timezone: 'Asia/Tokyo',
    label: 'Tokyo, Japan',
    theme: 'dark',
    branding: true
  });
</script>

Can I Install It as an npm Package?

Yes! Install the worldclock-widget npm package for TypeScript support and API access:

npm install worldclock-widget

Then use it in your code:

import { createWorldClock, getTime, compareTime } from 'worldclock-widget';

// Create a visual widget
createWorldClock({ timezone: 'Europe/London', label: 'London' });

// Or just fetch time data
const data = await getTime('tokyo');
console.log(data.localTime); // "2:30 PM"

// Compare two cities
const comparison = await compareTime('new-york', 'london');
console.log(comparison.timeDifference.description);
// "London is 5 hours ahead of New York"

How Do I Add It to a React App?

import { useEffect } from 'react';
import { createWorldClock } from 'worldclock-widget';

function WorldClock() {
  useEffect(() => {
    const clock = createWorldClock({
      timezone: 'Europe/London',
      label: 'London',
      containerId: 'my-clock',
    });
    return () => clock.destroy();
  }, []);

  return <div id="my-clock" />;
}

Is There a WordPress Plugin?

Yes. Install the World Clock Time Zone Converter plugin from the WordPress plugin directory. It includes a native Gutenberg block — just add the "World Clock" block to any page and configure the timezone in the block settings.

What Does the Widget Show?

• Flip-clock style display with large, readable digits
• The chosen city's current time (updated every second)
• The visitor's local time (auto-detected) for comparison
• Time difference between the two (e.g., "5H AHEAD")
• Full date display
• Responsive design that works on mobile