---
title: Boostify Documentation
description: JavaScript toolkit for web performance optimization
version: latest
last_updated: 2026-01-31
url: https://boostifyjs.com/llms.txt
full_documentation: https://boostifyjs.com/llms-full.txt
---
# Boostify
> A JavaScript toolkit for web performance optimization. Load scripts, styles, and media on-demand using smart triggers.
## Quick Links
- Website: https://boostifyjs.com/
- Repository: https://github.com/andresclua/boostify
- NPM: https://www.npmjs.com/package/boostify
## Installation
```bash
npm install boostify
```
```javascript
import Boostify from 'boostify';
const bstf = new Boostify({
debug: true,
license: "YOUR-LICENSE-KEY"
});
```
Or via CDN:
```html
```
---
## API Reference
### Content Injection Methods
#### loadScript(options)
Dynamically inject JavaScript files or inline scripts.
```javascript
await bstf.loadScript({
url: 'https://cdn.example.com/library.js',
appendTo: 'head',
attributes: ["id=my-script", "data-custom=value"]
});
// Or inline script
await bstf.loadScript({
inlineScript: `console.log('Hello');`,
appendTo: 'body'
});
```
**Options:**
- `url` (string): URL of the script to load
- `inlineScript` (string): Inline JavaScript to execute
- `appendTo` (string|Element): Where to append ('head', 'body', or DOM element)
- `attributes` (array): Additional attributes ["key=value"]
#### loadStyle(options)
Dynamically inject CSS files or inline styles.
```javascript
await bstf.loadStyle({
url: 'https://cdn.example.com/styles.css',
appendTo: 'head'
});
// Or inline styles
await bstf.loadStyle({
inlineStyle: `.my-class { color: red; }`,
appendTo: 'head'
});
```
**Options:**
- `url` (string): URL of the stylesheet
- `inlineStyle` (string): Inline CSS to inject
- `appendTo` (string|Element): Where to append
#### videoEmbed(options)
Lazy-load video embeds (YouTube, Vimeo) with performance optimization.
#### videoPlayer(options)
Native video player with lazy loading and performance features.
---
### Trigger Events
#### onScroll(options)
Execute callbacks when user scrolls to a specific point.
```javascript
bstf.onScroll({
callback: () => {
console.log('User scrolled past threshold');
},
threshold: 500 // pixels from top
});
```
#### onClick(options)
Execute callbacks on element click.
```javascript
bstf.onClick({
selector: '.load-more-btn',
callback: async () => {
await bstf.loadScript({ url: 'heavy-feature.js' });
}
});
```
#### observer(options)
Execute callbacks when elements enter the viewport (Intersection Observer).
```javascript
bstf.observer({
selector: '.lazy-component',
callback: (element) => {
element.classList.add('visible');
},
threshold: 0.5 // 50% visible
});
```
#### inactivity(options)
Detect user inactivity or browser idle state.
```javascript
// User idle mode - tracks mouse, keyboard, scroll
bstf.inactivity({
callback: () => {
console.log('User inactive for 5 seconds');
},
idleTime: 5000,
name: 'my-idle-detector'
});
// Native idle mode - uses requestIdleCallback
bstf.inactivity({
callback: () => {
performBackgroundTasks();
},
maxTime: 3000,
name: 'background-tasks'
});
// Destroy instance
bstf.destroyinactivity({ name: 'my-idle-detector' });
```
**Options:**
- `callback` (function): Function to execute
- `idleTime` (number): Ms of inactivity before triggering (user mode)
- `maxTime` (number): Maximum wait time in ms
- `events` (array|'none'): Events to monitor, or 'none' to disable
- `name` (string): Instance identifier (required for destroy)
- `debug` (boolean): Enable console logging
#### onLoad(options)
Execute callbacks after DOM/page load events. Best for third-party scripts.
---
## Common Use Cases
### Lazy Load Third-Party Scripts
```javascript
// Load analytics only after user interaction
bstf.onScroll({
threshold: 100,
callback: async () => {
await bstf.loadScript({ url: 'https://analytics.com/script.js' });
}
});
```
### Load Heavy Features On-Demand
```javascript
bstf.onClick({
selector: '#open-chat',
callback: async () => {
await bstf.loadScript({ url: 'chat-widget.js' });
await bstf.loadStyle({ url: 'chat-widget.css' });
initChatWidget();
}
});
```
### Auto-Logout on Inactivity
```javascript
bstf.inactivity({
callback: () => {
if (confirm('Session expiring. Stay logged in?')) {
resetSession();
} else {
window.location.href = '/logout';
}
},
idleTime: 300000, // 5 minutes
name: 'session-timeout'
});
```
### Defer Non-Critical Work
```javascript
bstf.inactivity({
callback: () => {
prefetchNextPageAssets();
syncAnalyticsData();
},
events: 'none', // Use native idle detection only
maxTime: 5000,
name: 'background-sync'
});
```
---
## Performance Benefits
- **Reduced Initial Load**: Load resources only when needed
- **Improved Core Web Vitals**: Better LCP, FID, CLS scores
- **Smart Resource Loading**: Trigger-based loading strategies
- **Browser-Friendly**: Uses native APIs like Intersection Observer and requestIdleCallback
---
## Documentation Pages
### Guides
- [Install](https://boostifyjs.com/guides/install/): Install Boostify in your project
- [Introduction](https://boostifyjs.com/guides/introduction/): Why Boostify?
### Content Injection
- [Load Javascript](https://boostifyjs.com/content-injection/load-script/): Dynamically injects a javascript file into a page or adds elements using the