Gathering detailed insights and metrics for preact
Gathering detailed insights and metrics for preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Installations
npm install preactDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.13.0
NPM Version
10.5.2
Score
99.2
Supply Chain
96.5
Quality
96.2
Maintenance
100
Vulnerability
100
License
Releases
223
Languages
2
JavaScript
TypeScript
JavaScript (96.95%)
TypeScript (3.05%)
Developer
Download Statistics
Total Downloads
523,558,842
Last Day
1,115,470
Last Week
5,825,779
Last Month
24,502,713
Last Year
216,723,520
GitHub Statistics
MIT License
37,274 Stars
5,858 Commits
1,975 Forks
393 Watchers
216 Branches
332 Contributors
Updated on Mar 27, 2025
Bundle Size
11.72 kB
Minified
4.71 kB
Minified + Gzipped
Sponsor this package
Maintainers
7
Package Meta Information
Latest Version
10.26.4
Package Id
preact@10.26.4
Unpacked Size
1.36 MB
Size
374.17 kB
File Count
134
NPM Version
10.5.2
Node Version
20.13.0
Published on
Feb 28, 2025
Total Downloads
Cumulative downloads
Total Downloads
523,558,842
Last Day
4.6%
1,115,470
Compared to previous day
Last Week
3.7%
5,825,779
Compared to previous week
Last Month
12.7%
24,502,713
Compared to previous month
Last Year
57.7%
216,723,520
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
41
@actions/github@actions/glob@babel/core@babel/plugin-transform-react-jsx@babel/plugin-transform-react-jsx-source@babel/preset-env@babel/register@biomejs/biome@types/chai@types/mocha@types/node@types/sinonbabel-plugin-istanbulbabel-plugin-transform-rename-propertieschaicoverallscross-enverrorstacksesbuildhuskykarmakarma-chai-sinonkarma-chrome-launcherkarma-coveragekarma-esbuildkarma-mochakarma-mocha-reporterkarma-sinonkarma-sourcemap-loaderkoloristmicrobundlemochanpm-run-all2oxlintpreact-render-to-stringprop-typessadesinonsinon-chaitypescriptundici
Fast 3kB alternative to React with the same modern API.
All the power of Virtual DOM components, without the overhead:
- Familiar React API & patterns: ES6 Class, hooks, and Functional Components
- Extensive React compatibility via a simple preact/compat alias
- Everything you need: JSX, VDOM, DevTools, HMR, SSR.
- Highly optimized diff algorithm and seamless hydration from Server Side Rendering
- Supports all modern browsers and IE11
- Transparent asynchronous rendering with a pluggable scheduler
💁 More information at the Preact Website ➞
|
|
You can find some awesome libraries in the awesome-preact list :sunglasses:
Getting Started
💁 Note: You don't need ES2015 to use Preact... but give it a try!
Tutorial: Building UI with Preact
With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.
To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.
1import { h, render } from 'preact'; 2// Tells babel to use h for JSX. It's better to configure this globally. 3// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage 4// In tsconfig you can specify this with the jsxFactory 5/** @jsx h */ 6 7// create our tree and append it to document.body: 8render( 9 <main> 10 <h1>Hello</h1> 11 </main>, 12 document.body 13); 14 15// update the tree in-place: 16render( 17 <main> 18 <h1>Hello World!</h1> 19 </main>, 20 document.body 21); 22// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>
Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:
1import { render, h } from 'preact'; 2import { useState } from 'preact/hooks'; 3 4/** @jsx h */ 5 6const App = () => { 7 const [input, setInput] = useState(''); 8 9 return ( 10 <div> 11 <p>Do you agree to the statement: "Preact is awesome"?</p> 12 <input value={input} onInput={e => setInput(e.target.value)} /> 13 </div> 14 ); 15}; 16 17render(<App />, document.body);
Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]
Backers
Support us with a monthly donation and help us continue our activities. [Become a backer]
License
MIT
Moderate
0/10
Summary
HTML Injection in preact
Affected Versions
>= 10.0.0-alpha.0, <= 10.0.0-beta.0
Patched Versions
10.0.0-beta.1
Reason
30 commit(s) and 25 issue activity found in the last 90 days -- score normalized to 10
Reason
all changesets reviewed
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/benchmarks.yml:1
- Warn: no topLevel permission defined: .github/workflows/build-test.yml:1
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/pr-reporter.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/run-bench.yml:1
- Warn: no topLevel permission defined: .github/workflows/single-bench.yml:1
- Warn: no topLevel permission defined: .github/workflows/size.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/benchmarks.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/benchmarks.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/build-test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-test.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/build-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-reporter.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/pr-reporter.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-reporter.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/pr-reporter.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-reporter.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/pr-reporter.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-reporter.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/pr-reporter.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-reporter.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/pr-reporter.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-bench.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-bench.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/run-bench.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-bench.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-bench.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-bench.yml:113: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-bench.yml:118: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/run-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/single-bench.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/single-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/single-bench.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/single-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/single-bench.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/single-bench.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/size.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/size.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/size.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/preactjs/preact/size.yml/main?enable=pin
- Info: 0 out of 22 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 9 third-party GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact 10.26.4 not signed: https://api.github.com/repos/preactjs/preact/releases/203097794
- Warn: release artifact 10.26.3 not signed: https://api.github.com/repos/preactjs/preact/releases/202767243
- Warn: release artifact 10.26.2 not signed: https://api.github.com/repos/preactjs/preact/releases/200896060
- Warn: release artifact 10.26.1 not signed: https://api.github.com/repos/preactjs/preact/releases/200843587
- Warn: release artifact 10.26.0 not signed: https://api.github.com/repos/preactjs/preact/releases/200584046
- Warn: release artifact 10.26.4 does not have provenance: https://api.github.com/repos/preactjs/preact/releases/203097794
- Warn: release artifact 10.26.3 does not have provenance: https://api.github.com/repos/preactjs/preact/releases/202767243
- Warn: release artifact 10.26.2 does not have provenance: https://api.github.com/repos/preactjs/preact/releases/200896060
- Warn: release artifact 10.26.1 does not have provenance: https://api.github.com/repos/preactjs/preact/releases/200843587
- Warn: release artifact 10.26.0 does not have provenance: https://api.github.com/repos/preactjs/preact/releases/200584046
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
46 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-36jr-mh4h-2g58
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x4c5-c7rf-jjgv
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-pgw7-wx7w-2w33
- Warn: Project is vulnerable to: GHSA-3cvr-822r-rqcc
- Warn: Project is vulnerable to: GHSA-q768-x9m6-m9qp
- Warn: Project is vulnerable to: GHSA-8qr4-xgw6-wmr3
- Warn: Project is vulnerable to: GHSA-f772-66g8-q5h3
- Warn: Project is vulnerable to: GHSA-5r9g-qh6m-jxff
- Warn: Project is vulnerable to: GHSA-r6ch-mqf9-qc9w
- Warn: Project is vulnerable to: GHSA-wqq4-5wpv-mx2g
- Warn: Project is vulnerable to: GHSA-3787-6prv-h9w3
- Warn: Project is vulnerable to: GHSA-9qxr-qj54-h672
- Warn: Project is vulnerable to: GHSA-m4v8-wqvr-p9f7
- Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
Score
4.4
/10
Last Scanned on 2025-03-17
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More