# Your First Element

This guide will walk you through registering your first element with `ForesightJS` and understanding how the prediction system works.

## Basic Usage Example[​](#basic-usage-example "Direct link to 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 below.

```
import { ForesightManager } from "js.foresight"

// Register an element to be tracked
const myLink = document.getElementById("my-link")

ForesightManager.instance.register({
  element: myLink,
  callback: () => {
    // This is where your prefetching logic goes
    console.log("User is likely to interact with this element!")
  },
  // Optional element settings
})
```

Thats it!

## Provide element settings[​](#provide-element-settings "Direct link to Provide element settings")

However if you want to add a bit more power to your element you can give it the following props:

```
import { ForesightManager } from "js.foresight"

const myLink = document.getElementById("my-link")

ForesightManager.instance.register({
  element: myLink,
  callback: () => {
    console.log("User is likely to interact with this element!")
  },
  hitSlop: 50, // slop around the element, making its hitbox bigger
  name: "My Foresight button!", // name visible in the debug tools
  meta: {
    route: "/about",
  }, // your custom meta data for analytics
  reactivateAfter: 5 * 60 * 1000, // time for the element to reactivate after the callback has been hit
})
```

## Integrations[​](#integrations "Direct link to Integrations")

Since ForesightJS is framework agnostic, it can be integrated with any JavaScript framework. Ready-to-use implementations are available for:

* [Next.js](/docs/react/nextjs.md)
* [React Router](/docs/react/react-router.md)
* [Vue](/docs/vue/directive.md)
* [Angular](/docs/angular.md)

## Development Tools[​](#development-tools "Direct link to Development Tools")

ForesightJS has dedicated [Development Tools](/docs/debugging/devtools.md) that help you understand and tune how prediction is working in your application:

```
pnpm add js.foresight-devtools
# or
npm install js.foresight-devtools
# or
yarn add js.foresight-devtools
```

```
import { ForesightDevtools } from "js.foresight-devtools"

// Initialize development tools
ForesightDevtools.initialize({
  // optional props
})
```