preact

About

Fast 3kb React-compatible Virtual DOM library.

What detecting preact tells you about a site

preact is a 3 KB React-compatible alternative, so finding it tells you the team deliberately optimised for bundle size — often on a marketing site, an embeddable widget, or a performance-critical product where every kilobyte of JavaScript counts. Its presence usually means the same component model as React but with a hard eye on the download budget.

Why the exact preact version matters

Preact 10 aligned closely with the modern React API (hooks, `preact/compat`), so the exact version tells you whether the project can drop-in React libraries via the compat layer or is on an older, less-compatible line.

preact in a real-world stack

When you find preact in a bundle, it rarely travels alone. preact/compat to run React libraries, preact/signals for reactivity, and often a lightweight router rather than a full meta-framework.

Quick facts

This package powers Preact

The preact package is the canonical implementation of Preact. Sourcemap Explorer uses this exact npm package as the framework-level fingerprint when it flags Preact on a page — both via the bundled node_modules/preact/ source paths and via the embedded package.json inside the JavaScript sourcemap.

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

How Sourcemap Explorer detects preact

preact ships as v10.29.8, published 2026-08-01 and carries 0 direct dependencies, 1 peer dependency (preact-render-to-string), 283 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when preact rides inside a deployed bundle — here is how the detection works.

We catch preact from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/preact/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `preact` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/preact/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/preact/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/preact/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of preact

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the preact version a site actually ships against the ecosystem.

Recent security advisories for preact

The 2 most recent advisories affecting some versions of preact, aggregated from OSV.dev (GitHub Advisory + CVE data). A listing here doesn't mean the version a given site ships is affected — each advisory applies to a specific version range. Sourcemap Explorer reads the exact bundled version so you can check it against these ranges.

1. HIGHCVE-2026-22028· 2026-01-07

   Preact has JSON VNode Injection issue

2. MODERATEGHSA-cg48-9hh2-x6mx· 2020-09-02

   HTML Injection in preact

Recent versions

preact README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(e.target.value)} />
		</div>
	);
};

render(<App />, document.body);

FAQ

Keep reading on Sourcemap Explorer