A library to insert Swatch Internet Time clocks into your website or Javascript application with a few lines of code.
-
Insert
<link>and<script>tags from the jsDelivr CDN into the<head>of your document to load the library. -
Insert an element into the page where you want the Swatch Internet Time clock to appear and include
class=internetTimeanddata-style=attribute specifying your clock style.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/@swatchtime/clocks@0.9.5/dist/clocks.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@swatchtime/clocks@0.9.5/dist/clocks.min.js"></script>
</head>
<body>
<!-- Your Swatch Internet Time clock embed code -->
<div class="internetTime" data-style="rectangle-medium-rounded"></div>
</body>
</html>
To see all clock styles available (and customize), go to:
https://clocks.swatchtime.online
-
Demo Site & Code Examples: https://github.com/swatchtime/swatch-clocks-demo
-
Clocks Library: https://github.com/swatchtime/swatch-clocks
-
Project overview: https://github.com/swatchtime
This package supports two common ways to consume the library:
-
ESM (bundlers / frameworks) — import the named helpers you need:
Clock,autoInit,getPreset,getPresets,getPresetNormalized,buildOptionsForElement, etc..
import { Clock, getPreset, buildOptionsForElement } from '@swatchtime/clocks'; const el = document.querySelector('#my-clock'); const preset = getPreset('minimal-logo-medium'); // preset metadata const opts = buildOptionsForElement(el, preset); // dataset -> runtime options const clock = new Clock(el, opts);
-
UMD / Browser build — include the bundled scripts and styles directly in a page.
- The script attaches a helper object to the global
windowaswindow.SwatchClocksand registers the<swatch-clock>custom element for convenience. The global API exposes the same helpers as the ESM entry so you can call them from the page:
<link rel="stylesheet" href="/vendor/clocks.css"> <script type="module" src="/vendor/clocks.esm.js"></script> <script> // access runtime helpers window.SwatchClocks.getPresets(); window.SwatchClocks.autoInit(); </script>
- The script attaches a helper object to the global
See GitHub Demo repository for specific code examples showing Preact usage:
https://github.com/swatchtime/swatch-clocks-demo
-
When loaded in a browser the library attaches
window.SwatchClockswith helpers (for example:Clock,getPreset,getPresets,getPresetNormalized,buildOptionsForElement, andautoInit). -
The library will automatically run a short initialization routine on page load that:
- Instantiates
Clockfor legacy containers with the.internetTimeclass. - Allows the
<swatch-clock>custom element to mount itself (the element constructs its ownClockinstance when connected). - The auto-init routine runs immediately if the document is already loaded, otherwise it runs on
DOMContentLoaded.
- Instantiates
-
To control auto-init:
- Disable automatic initialization by setting
window.SwatchClocksAutoInit = falsebefore the bundle runs. - Manually run initialization at any time with:
window.SwatchClocks.autoInit(rootElement)(browser/UMD), orimport { autoInit } from '@swatchtime/clocks'; autoInit(rootElement);(ESM).
- Disable automatic initialization by setting
-
Manual instantiation:
- Create instances directly with
new Clock(element, options)(ESM or viawindow.SwatchClocks.Clockwhen using the browser build). - Use
getPreset()andbuildOptionsForElement()to derive runtime options from data attributes or preset names when constructing clocks programmatically.
- Create instances directly with
- The web component is exported as
SwatchClockElementand is registered asswatch-clockwhen the environment supportscustomElements. - Initialization attempts are defensive — per-element errors are caught so initialization keeps going even if a single element fails.
- Initialization is safe to run multiple times — repeated calls to
autoInit()or reloading the bundle will re-render existing elements but will not produce duplicate visible clocks or start additional background timers. Each mounted element holds its current instance atelement.clock; callelement.clock.destroy()to explicitly tear down an instance before re-initializing if you need a full teardown.