# timeweb > Overwrite time in browser Latest version **0.3.2** (published 2023-05-01) · BSD-3-Clause license · 0 weekly downloads ## Install ```sh npm install timeweb pnpm add timeweb yarn add timeweb bun add timeweb ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.2 | | Published | 2023-05-01 | | First published | 2020-08-31 | | Weekly downloads | 0 | | License | BSD-3-Clause | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 164.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 32 | | Author | Steve Tung | | Maintainers | tungs | ## Links - npm: https://www.npmjs.com/package/timeweb - Repository: https://github.com/tungs/timeweb - Homepage: https://github.com/tungs/timeweb#readme - Issues: https://github.com/tungs/timeweb/issues - npm.io page: https://npm.io/package/timeweb ## Recent versions - 0.3.2 (latest) — 2023-05-01 - 0.3.1 — 2022-04-03 - 0.3.0 — 2022-01-28 - 0.2.2 — 2022-01-28 - 0.2.1 — 2021-12-27 - 0.2.0 — 2021-12-16 - 0.1.2 — 2021-12-16 - 0.1.1 — 2021-06-13 - 0.1.0 — 2020-11-22 - 0.0.3 — 2020-11-22 - 0.0.1 — 2020-08-31 ## README # timeweb **timeweb** is a JavaScript library that overwrites native time handling in a web page, creating a virtual timeline independent of real time. ## # Scope **timeweb** overwrites these time-related features in web pages: * [`performance.now()`][performance.now], [`Date.now()`][Date.now], [`new Date()`][new Date], and [`Date()`][Date-function] * [`requestAnimationFrame()`][requestAnimationFrame] and [`cancelAnimationFrame()`][cancelAnimationFrame] * [`setTimeout()`][setTimeout], [`setInterval()`][setInterval], [`clearTimeout()`][clearTimeout], and [`clearInterval()`][clearInterval] * [CSS Transitions][] and [Animations][CSS Animations] * [SVG Animations][SVG Animation] * [Videos][video element] * [*element*`.animate()`][Element.prototype.animate] * [`new CustomEvent().timeStamp`][CustomEvent.timeStamp] ## # **timeweb** Limitations These time-related features are known not to work: * iframes with time-related content * event.timeStamp * [Audio analyser nodes](https://developer.mozilla.org/en-US/docs/Web/HTML/API/AnalyserNode) Additionally **timeweb** is limited by what can be overwritten in browser by JavaScript and not everything may work as intended. Please [file an issue](https://github.com/tungs/timeweb/issues) if you think something should work. ## Read Me Contents * [Use](#use) * [How it works](#how-it-works) ## # Script Use * Copy `dist/timeweb.js` to the desired directory. * Include it **before** any time-handling JavaScript in the HTML file: `` * Use `timeweb.goTo` to go to a virtual time, in milliseconds. For instance, `timeweb.goTo(5000);` goes to 5 seconds on the virtual time line. It can only go forward. Note that currently `requestAnimationFrame` is called once per `timeweb.goTo` regardless of the previous virtual time. ## # How it works For JavaScript functions, **timeweb** overwrites a page's native time-handling functions and objects ([`new Date()`][new Date], [`Date.now`][Date.now], [`performance.now`][performance.now], [`requestAnimationFrame`][requestAnimationFrame], [`setTimeout`][setTimeout], [`setInterval`][setInterval], [`cancelAnimationFrame`][cancelAnimationFrame], [`clearTimeout`][clearTimeout], and [`clearInterval`][clearInterval]) to custom ones that use a virtual timeline, which can be stepped through programmatically. For [videos][video element]/[SVGs][SVG Animation], **timeweb** detects when `video` and `svg` elements are created or added to the page by using a mutation observer and overwriting `document.createElement`. It pauses those elements and seeks when needed. For animations available through the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)([CSS Transitions][], [CSS Animations][], and [*element*`.animate()`][Element.prototype.animate]), **timeweb** detects new animations through `transitionstart`, `animationrun` listeners, `document.getAnimations`, and overwriting `Element.prototype.animate`. It pauses the animations and seeks when needed. This work was inspired by [a talk by Noah Veltman](https://github.com/veltman/d3-unconf), who described altering a document's [`Date.now`][Date.now] and [`performance.now`][performance.now] functions to refer to a virtual time and using `puppeteer` to change that virtual time and take snapshots. [performance.now]: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now [Date.now]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now [new Date]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date [Date-function]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#return_value [requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame [cancelAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame [setTimeout]: https://developer.mozilla.org/en-US/docs/Web/API/window/setTimeout [setInterval]: https://developer.mozilla.org/en-US/docs/Web/API/window/setInterval [clearTimeout]: https://developer.mozilla.org/en-US/docs/Web/API/window/clearTimeout [clearInterval]: https://developer.mozilla.org/en-US/docs/Web/API/window/clearInterval [CSS Transitions]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions [CSS Animations]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations [SVG Animation]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate [video element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video [Element.prototype.animate]: https://developer.mozilla.org/en-US/docs/Web/API/Element/animate [CustomEvent.timeStamp]: https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp --- _Source: https://npm.io/package/timeweb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._