technology-detector

SEO-friendly, lightweight website technology detector for Node.js. Ship your own stack insights without heavy headless browsers. Bundles the Wappalyzer dataset and detects CMS, ecommerce, analytics, CDN, adtech, and web frameworks from HTML, headers, cookies, script/link URLs, meta tags, simple DOM selectors, and linked JS/CSS assets.

Install

``bash
npm i technology-detector
`

Usage

`js
const { analyzeUrl } = require('technology-detector')

async function run() {
const result = await analyzeUrl('https://example.com')
console.log(result.detected)
}

run()
`

$3

The promise resolves to:

`json
{
"url": "https://example.com/",
"detected": [
{
"name": "Next.js",
"description": "React framework",
"categories": ["JavaScript frameworks", "Web frameworks"],
"categoryIds": [12, 18],
"matchedBy": ["headers", "scriptSrc"],
"matchedByCount": 2
}
],
"categorySummary": [
{ "name": "Web frameworks", "count": 1 },
{ "name": "JavaScript frameworks", "count": 1 }
],
"assets": [
{ "url": "https://example.com/_next/static/chunk.js", "bytes": 42000 }
],
"stats": {
"signalsChecked": 2,
"datasetSize": 600,
"assetsFetched": 2,
"assetBytes": 84000
}
}
`

$3

- HTML and visible text regexes (framework signatures, CMS markers, meta generator tags).
- Script and stylesheet URLs (framework/runtime chunks, CDN tags, analytics URLs).
- HTTP headers and cookies (server banners, session cookies, A/B testing IDs).
- Simple DOM selectors and meta tags (Open Graph, generator, theme color).
- Lightweight fetch of up to 10 linked JS/CSS assets (600KB each).
- Output is trimmed: top 50 matches, matchedBy truncated, and categories elevated to major groups when available.

Front-end usage (Next.js/React/Vite)

- Use the browser build to avoid Node-only modules: import { analyzeContent } from 'technology-detector/browser'.
- Provide HTML and optional headers/cookies/assets yourself (browser cannot fetch cross-origin HTML without a proxy).
- Basic example (client component or Vite React):

`ts
import { analyzeContent } from 'technology-detector/browser'

async function detect(url: string) {
// Fetch HTML from a same-origin proxy or your API to avoid CORS
const html = await fetch(/api/fetch-html?url=${encodeURIComponent(url)}).then((r) => r.text())
const result = await analyzeContent({ html, url })
return result.detected
}
`

- Next.js App Router server route (keeps network and CORS on the server):

`ts
// app/api/tech-detector/route.ts
import { NextResponse } from 'next/server'
import { analyzeUrl } from 'technology-detector'

export async function POST(req: Request) {
const { url } = await req.json()
if (!url) return NextResponse.json({ error: 'Missing url' }, { status: 400 })

try {
const result = await analyzeUrl(url)
return NextResponse.json(result)
} catch (error: any) {
return NextResponse.json({ error: error.message || 'Failed to analyze' }, { status: 500 })
}
}
`

- Client-side call example:

`ts
async function check(url: string) {
const res = await fetch('/api/tech-detector', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
})

if (!res.ok) throw new Error('Request failed')
return res.json()
}
`

Use the returned detected list to render technologies in your React component.

$3

- CMS, ecommerce platforms, marketing/analytics tags, adtech, CDNs, web servers, frameworks, JS libraries, and hosting hints.
- Signals from HTML, visible text, meta tags, headers, cookies, script/link URLs, and lightweight JS/CSS asset fetches (first 10 assets, 600KB each).

$3

analyzeUrl(url: string) => Promise<{ url, detected, assets, stats }>

Returns:
- detected: { name, description, categories, website, icon, matchedBy }[]
- assets: { url, bytes }[]
- stats`: signals checked, dataset size, assets fetched/bytes

Limits

- HTML capped at 2MB, assets at 600KB each, max 10 assets.
- No headless rendering; only server-side HTTP fetch + static parsing.
- Only HTTP/HTTPS URLs accepted.

License

MIT