ForesightJS

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.

Playground

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.

Download

pnpm add js.foresight
# or
npm install js.foresight
# or
yarn add js.foresight

Basic Usage Example

This 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.foresightjs"

// Initialize the manager if you want custom global settings (do this once at app startup)
ForesightManager.initialize({
  // Optional props (see configuration)
})

// Register an element to be tracked
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)
})

Integrations

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!

Configuration

ForesightJS works out of the box with no setup required, but it can be configured both globally and per element if needed.

Development Tools

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-devtools

See the development tools documentation for more details.

Prediction Strategies

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

Providing Context to AI Tools

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.md.

Read more

Contributing

Please see the contributing guidelines