Overview
you‑tz is a lightweight, web‑based debugging tool that instantly shows how popular JavaScript date libraries interpret the same ISO‑8601 string. By juxtaposing library outputs and visualizing the moment on a world map, it turns a time‑zone ambiguity into an eye‑opening, shareable snapshot. The project was architected with AI‑assisted planning (OpenCode + Ollama models), yielding a consistent Vue 3 + Pinia component structure that can be replicated for any new library quickly.
Challenge
Front‑end developers repeatedly hit a subtle bug: an ISO‑8601 timestamp without a time‑zone suffix (2026‑05‑08T15:42:51.714709) is parsed as local time, while the same string with a Z is treated as UTC.
The difference can be several hours, depending on the user’s location. Libraries (Moment, date‑fns, Luxon, Day.js, vanilla JS) handle the ambiguity inconsistently. Debugging this requires manual inspection of each library’s output, which is time‑consuming and error‑prone.
Solution
I built you‑tz, a small, web‑based debugging aid that visualizes how different JavaScript date libraries interpret a given ISO string.
- Cross‑library comparison – A side‑by‑side table shows each library’s parsed value, relative‑time output, and any offset applied.
- World‑map visualization – Using MapLibre, the tool plots the timestamp on a map, marking time‑zones by GMT offset and labeling them with their IANA names.
- AI‑assisted architecture – Before coding, I used OpenCode/ChatGPT to sketch the Vue 3 + Pinia architecture, composables, routing, and UI layout. The AI generated a consistent component pattern (LibMoment.vue, LibDateFns.vue, etc.) that could be replicated for new libraries or features. It also auto‑wired new support for Vanilla JS and the upcoming Temporal API, saving hours of boilerplate work.
- Shareability – The URL encodes the ISO string and selected libraries, enabling instant sharing of a debugging session.
What's Next
- More date libraries — Still highly experimental the Temporal API is on track to becoming the defacto replacement for using the standard Date API.
- Expanded library comparisons — I want to add more categories to the comparison tables. For example how different libraries handle date manipulation, like checking greater than or less than.
- i18n - I'd like to add internationalization to make this tool more accessible.
Try It
The project is currently live at www.you-tz.com. Paste any ISO string, quickly sanity-check it against the most popular Date libraries, and share the result with your team. You can also use you-tz.com/now to use the current time as a starting snapshot.
Technologies Utilized
| Frontend |
|---|
| Vue 3 |
| Tailwind |
| TypeScript |
| MapLibre |
| Pinia w/ persisted state |
| Vite+ |