Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

* Narrows type of `parent` in render functions. is the recommended way to partial root rendering in Preact 10+, but it isn't API compliant code given the current API definition as expressed by the TS types.
This PR changes the type of `parent` to align with what is *actually* required by the preact render functions according to @developit.

Assuming the linked code actually works, then it means preact doesn't actually need a NodeList, but rather just needs an `ArrayLike<Node>`.
Along with limiting the property set of `Parent`, I have also narrowed `Parent['childNodes']` to be an `ArrayLike<Node>` so someone can assign a `Node[]` to it.

I suspect my stylistic choice of a single long line is not acceptable for this repository, but I'm not clear what the proper way to break this into multiple lines is for this repository.  If someone can provide me with feedback on how to correctly split the lines, please let me know!

Note: I recognize that this is a pretty substantial type change, but without it the official recommendation (and only option in Preact 11) for doing partial root rendering is incorrect.
Either the recommendation for how to do partial root rendering should be corrected to not lead people to an incorrect solution, or this PR (or one like it) should be merged to correctly express the type that preact expects for its `render` functions.

* Update index.d.ts

* Update src/index.d.ts

Co-authored-by: Andre Wiggins <>

* Update preact.tsx


Co-authored-by: Andre Wiggins <>

Git stats


Failed to load latest commit information.
Latest commit message
Commit time
Nov 14, 2022


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 ➞

npm Preact Slack Community OpenCollective Backers OpenCollective Sponsors

coveralls gzip size brotli size

You can find some awesome libraries in the awesome-preact list 😎

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.

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See
// 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>

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:

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

/** @jsx h */

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

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

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


Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]



Support us with a monthly donation and help us continue our activities. [Become a backer]