{"library":"preact","title":"Preact","description":"Preact is a lightweight, 3KB JavaScript library offering a React-compatible API for building user interfaces with a Virtual DOM. Currently in its stable v10.29.1 series, it maintains a rapid release cadence with frequent patch and minor updates, alongside public betas for upcoming major versions like 11.0.0-beta.1. Key differentiators include its extremely small footprint, which is beneficial for performance and bundle size, while largely replicating the modern React API including hooks, functional components, and class components. It offers extensive compatibility with the React ecosystem through its `preact/compat` alias, enabling many existing React libraries to function with minimal configuration. Preact features an optimized diffing algorithm, supports Server-Side Rendering (SSR), and includes developer tools and Hot Module Replacement (HMR) capabilities. It targets all modern browsers and maintains compatibility with IE11, providing a robust yet minimal alternative for web development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install preact"],"cli":null},"imports":["import { h, render } from 'preact';","import { Component } from 'preact';","import { useState, useEffect } from 'preact';","import { Fragment } from 'preact';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { h, render } from 'preact';\n// Configure JSX pragma for TypeScript or Babel via tsconfig.json or babel.config.js\n// For TypeScript, add \"jsxFactory\": \"h\" to your compilerOptions.\n// For Babel, configure @babel/plugin-transform-react-jsx with 'pragma': 'h'.\n// Alternatively, add this pragma comment to the top of your JSX files:\n/** @jsx h */\n\nfunction Greeting({ name }) {\n  return (\n    <main>\n      <h1>Hello, {name}!</h1>\n      <p>This is a simple Preact application.</p>\n      <button onClick={() => alert(`Welcome, ${name}!`)}>Say Hello</button>\n    </main>\n  );\n}\n\n// Initial render to the document body\nrender(\n  <Greeting name=\"World\" />,\n  document.body\n);\n\n// Update the component in-place after 3 seconds\nsetTimeout(() => {\n  render(\n    <Greeting name=\"Preact User\" />,\n    document.body\n  );\n}, 3000);","lang":"typescript","description":"This quickstart demonstrates how to create and render a basic functional Preact component using JSX, including an initial mount and an in-place update to the DOM.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}