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.

Integrations

Since ForesightJS is framework agnostic, it can be integrated with any JavaScript framework. There are official packages for React, Vue, Angular, and Astro:

• JavaScript → js.foresight: the framework-agnostic core, usable in any project.
• React → @foresightjs/react: useForesight, the Foresight component, useForesightEvent, plus Next.js and React Router examples.
• Vue → @foresightjs/vue: the v-foresight directive, the Foresight component, and the useForesight / useForesightEvent composables.
• Angular → @foresightjs/angular: the [fsForesight] directive, ForesightService, ForesightComponent, and injectForesightEvent.
• Astro → @foresightjs/astro: adds foresight as a fifth prefetch strategy next to Astro's native four, plus the <ForesightLink> component and registerForesight client API.

Using another framework (Svelte, Solid, etc.)? See Other Frameworks for how to build your own thin binding on top of the core. Sharing integrations for other frameworks/packages is highly appreciated!

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

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.

Contributing

Please see the contributing guidelines