Scans your web app's network layer. 13 audit rules detect waterfalls, duplicate fetches, N+1 patterns, caching gaps, polling waste, and missing compression. Drop-in DevTools for Vue & React. Generates framework-aware fix code you can copy-paste.

npx flux-scan https://your-app.com -o report.html

# Zero install (recommended)
npx flux-scan https://myapp.com -o report.html

# Or install globally
npm install -g @fluxiapi/cli
flux-scan https://myapp.com -o report.html

npm install @fluxiapi/vue

<script setup>
import { FluxDevTools } from '@fluxiapi/vue';
</script>

<template>
  <RouterView />
  <FluxDevTools />
</template>

npm install @fluxiapi/react

import { FluxDevTools } from '@fluxiapi/react';

function App() {
  return (
    <>
      <YourApp />
      <FluxDevTools />
    </>
  );
}

npm install @fluxiapi/scan

1. Download packages/extension/ from this repo
2. Go to chrome://extensions → Enable Developer Mode
3. Click "Load unpacked" → select the extension folder
4. Open DevTools → FluxAPI tab → Start Scan

<script setup>
import { FluxDevTools } from '@fluxiapi/vue';
</script>

<template>
  <RouterView />
  <FluxDevTools force-show verbose network="jio-4g" />
</template>

With TanStack Vue Query:

import { wrapQueryClient } from '@fluxiapi/vue';
const queryClient = wrapQueryClient(new QueryClient());
app.use(VueQueryPlugin, { queryClient });

Composables:

<script setup>
import { useFluxScore, useFluxViolations, useFluxScanning } from '@fluxiapi/vue';

const score = useFluxScore();
const violations = useFluxViolations({ severity: 'critical' });
const { scanning, start, stop } = useFluxScanning();
</script>

Nuxt:

// plugins/fluxapi.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  if (process.dev) {
    nuxtApp.vueApp.use(FluxPlugin, { network: 'jio-4g' });
  }
});

import { FluxDevTools } from '@fluxiapi/react';

function App() {
  return (
    <>
      <YourApp />
      <FluxDevTools />
    </>
  );
}

With TanStack Query:

import { wrapQueryClient } from '@fluxiapi/react';
const queryClient = wrapQueryClient(new QueryClient());

With SWR:

import { fluxSWRMiddleware } from '@fluxiapi/react';
<SWRConfig value={{ use: [fluxSWRMiddleware] }}>

Hooks:

import { useFluxScore, useFluxViolations, useFluxScanning } from '@fluxiapi/react';

const { overall, grade, color } = useFluxScore();
const violations = useFluxViolations({ severity: 'critical' });
const { scanning, start, stop } = useFluxScanning();

# Basic scan with HTML report
npx flux-scan https://myapp.com -o report.html

# Indian network conditions
npx flux-scan https://myapp.com --network jio-4g -o report.html

# Authenticated apps (manual login)
npx flux-scan https://myapp.com --no-headless --interact

# JSON output for CI/CD
npx flux-scan https://staging.myapp.com -f json

# Slow network stress test
npx flux-scan https://myapp.com -n bsnl-2g -o slow-report.html

USAGE
  npx flux-scan <url> [options]

OPTIONS
  -d, --duration <sec>   Scan duration (default: 30)
  -n, --network <n>      wifi | jio-4g | airtel-4g | airtel-3g | bsnl-2g | slow-3g
  -o, --output <file>    Output file (.html or .json)
  -f, --format <fmt>     console | html | json
  -s, --session <file>   Analyze saved session JSON
      --no-headless      Show browser window
      --interact         Manual browse mode
  -h, --help             Show help
  -v, --version          Show version

EXIT CODES
  0  Score >= 50 (pass)
  1  Score < 50  (fail)
  2  Fatal error

import { FluxScanner, FluxAnalyzer, generateHtmlReport } from '@fluxiapi/scan';

const scanner = new FluxScanner({ duration: 60, network: 'jio-4g' });
scanner.start();
const session = scanner.stop();

const analyzer = new FluxAnalyzer({ network: 'jio-4g' });
const report = analyzer.analyze(session);
const html = generateHtmlReport(report);

- uses: aswinsasi/fluxapi-scan-action@v1
  with:
    url: https://staging.your-app.com
    threshold: 70
    network: jio-4g

@fluxiapi/scan        — Core library (scanner, analyzer, fixer, reporter)
@fluxiapi/cli         — npx flux-scan (Puppeteer + Chrome DevTools Protocol)
@fluxiapi/vue         — Vue 3 DevTools + composables + Vue Query integration
@fluxiapi/react       — React DevTools + hooks + TanStack Query / SWR integration
extension/           — Chrome DevTools panel (Manifest V3)
github-action/       — CI/CD integration (action.yml)
landing/             — Marketing site

• @fluxiapi/vue — Drop-in <FluxDevTools /> for Vue 3 / Nuxt
• @fluxiapi/react — Drop-in <FluxDevTools /> for React / Next.js
• Floating badge with live score, expandable panel (Overview / Violations / Requests)
• Vue composables + React hooks for custom UI
• TanStack Query + SWR integration
• Keyboard shortcut: Ctrl+Shift+F
• Fixed scanner interceptor lifecycle

• Framework detection, GraphQL dedup, WebSocket monitor
• Framework-aware fixes for 6 frameworks

• All 13 audit rules, HTML reports, CLI, Chrome extension

• 5 core rules, CLI scanner, Chrome extension

MIT