ForesightJS is a lightweight JavaScript library that predicts user intent to prefetch content before it's needed. It works completely out of the box without configuration, supporting both desktop and mobile devices with different prediction strategies.
In the GIF above, the ForesightJS DevTools are enabled. Normally, users won't see anything that ForesightJS does except the increased perceived speed from early prefetching.
pnpm add js.foresight
# or
npm install js.foresight
# or
yarn add js.foresightThis basic example is in vanilla JS, ofcourse most people will use ForesightJS with a framework. You can read about framework integrations in the docs.
import { ForesightManager } from "js.foresight"
// Initialize the manager if you want custom global settings (do this once at app startup)
ForesightManager.initialize({
// Optional props (see configuration)
})
// Register a single element (or NodeList)
const myButton = document.getElementById("my-button")
ForesightManager.instance.register({
element: myButton,
callback: () => {
// This is where your prefetching logic goes
},
hitSlop: 20, // Optional: "hit slop" in pixels.
// other optional props (see configuration)
})Since ForesightJS is framework agnostic, it can be integrated with any JavaScript framework. Ready-to-use implementations are available for:
- React: Next.js, React Router, and useForesight hook
- Vue: Directive and Composable
Sharing integrations for other frameworks/packages is highly appreciated!
ForesightJS works out of the box with no setup required, but it can be configured both globally and per element if needed.
ForesightJS has dedicated Development Tools created with Foresight Events that help you understand and tune how foresight is working in your application. This standalone development package provides real-time visualization of mouse trajectory predictions, element bounds, and callback execution.
pnpm add js.foresight-devtoolsSee the development tools documentation for more details.
ForesightJS uses different prediction strategies depending on the device type:
Desktop/Keyboard Users: Mouse trajectory prediction, keyboard navigation tracking, and scroll-based prefetching. Read more
Mobile Devices: Viewport enter detection and touch start events (configurable via [touchDeviceStrategy]). Read more
ForesightJS is a newer library, so most AI assistants and LLMs may not have much built-in knowledge about it. To improve their responses, you can provide the following context:
- Use llms.txt for a concise overview of the API and usage patterns.
- Use llms-full.txt for a full markdown version of the docs, ideal for AI tools that support context injection or uploads.
- All documentation pages are also available in markdown. You can view them by adding .md to the end of any URL, for example: https://foresightjs.com/docs/getting-started/what-is-foresightjs.md.
Please see the contributing guidelines