ForesightJS

Prefetch Smarter

ForesightJS predicts user intent to prefetch content before it's needed. It's fully configurable and traceable, using different strategies for desktop and mobile users.

Keyboard/Mouse Users

Pick and choose multiple prediction strategies

Mouse Trajectory

Analyzes cursor movement patterns to predict which links users are heading towards and prefetches content before they arrive

Keyboard Navigation

Tracks tab key usage to prefetch when the user is N tab stops away from your registered element

Scroll

Prefetches content when users scroll towards registered elements, predicting which elements will be reached based on scroll direction

Touch Devices

Choose either Viewport Enter OR onTouchStart

Viewport Enter

Detects when registered elements enter the viewport and prefetches their content based on scroll behavior and visibility

onTouchStart

Captures the initial touch event to begin prefetching when users start interacting with registered elements

Playground

See predictions trigger in real-time with the official Development Tools. Move your mouse, scroll or use Tab navigation to experience intent detection.

Note: ForesightJS now offers full touch device support (mobile/pen) as of version 3.3.0 in the form of Viewport and onTouchStart predictions! However, to fully see how Foresight actually works and experience the complete mouse trajectory prediction system, you need to be on desktop. You can read the documentation and learn more about mobile support here.

Traditional Prefetching

ForesightJS Prefetching

TIP: Try using Tab and Shift+Tab to navigate through the buttons above

TIP: Install Development Tools for visual feedback and real-time tuning

INFO: Element overlays might lag behind since we use RAF and async techniques. This actually means the core package is optimized for performance.

Quick Start

Start predicting user intent in under 5 minutes. Zero complex setup.

Basic Usage

import { ForesightManager } from 'js.foresight'

// Initialize the manager if you want custom settings
// Otherwise you can skip this step of initialization
ForesightManager.initialize({
  touchDeviceStrategy: "viewport",
  tabOffset: 5
})

// Register an element for prediction
const myLink = document.querySelector('#my-link')

// Register a callback to be called when the user shows intent
ForesightManager.instance.register({
  element: myLink,
  callback: () => {
    console.log('User intent detected!')
  }
  // Optional: extra settings
})

What you get:

Mouse prediction: Detect cursor trajectory towards elements
Keyboard support: Detect user tabbing towards elements
Scroll Prediction: Detect scrolling towards a fetchable element
Touch device support: Full touch device support (mobile/pen)
Performance: No polling, no reflows, event-driven architecture
TypeScript: Full type safety out of the box

Full Documentation Configuration

Premade Framework Integrations:

Next.js React Router

Your User's Next Move.Already Fetched.