preact · Preact Docs
Preact Getting Started
Provides multiple methods for initializing a Preact application, including using Vite for a build-step workflow, using HTM for a no-build JSX-like experience, or using direct ESM imports in the browser.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Getting Started
Provides multiple methods for initializing a Preact application, including using Vite for a build-step workflow, using HTM for a no-build JSX-like experience, or using direct ESM imports in the browser.
When To Use
Use when you need to initialize a new Preact project using Vite, implement a no-build workflow with HTM, or load Preact directly in a browser via ESM modules.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-getting-started-workflow-guide.md | A comprehensive guide covering Preact essentials, components, signals, and debugging tools for versions 8.x through 11.x. | Questions about a comprehensive guide covering Preact essentials, components, signals, and debugging tools for versions 8.x through 1... |
examples/preact-getting-started-preact-v10-getting-started-esm-quickstart.text | A minimal JavaScript example demonstrating how to import Preact via ESM and render a Hello World element to the document body. | Exact payloads, commands, or snippets shown in A minimal JavaScript example demonstrating how to import Preact via ESM and render a Hello World element to the docum... |
examples/preact-getting-started-preact-v10-htm-esm-quickstart.text | A minimal Preact application using htm and esm.sh to render a component via a module script. | Exact payloads, commands, or snippets shown in A minimal Preact application using htm and esm.sh to render a component via a module script. |
examples/preact-getting-started-npm-init-command.text | The shell command used to initialize a new Preact project via npm. | Exact payloads, commands, or snippets shown in The shell command used to initialize a new Preact project via npm. |
examples/preact-getting-started-cli-commands.text | A list of terminal commands for navigating the project directory and starting the development server. | Exact payloads, commands, or snippets shown in A list of terminal commands for navigating the project directory and starting the development server. |
examples/preact-getting-started-npm-build-command.text | The npm build command used to initialize or build a Preact project as described in the getting started guide. | Exact payloads, commands, or snippets shown in The npm build command used to initialize or build a Preact project as described in the getting started guide. |
examples/preact-getting-started-preact-v10-babel-configuration-switching-guide.text | A Babel configuration snippet demonstrating the pragma settings required to switch from React to Preact. | Exact payloads, commands, or snippets shown in A Babel configuration snippet demonstrating the pragma settings required to switch from React to Preact. |
examples/preact-getting-started-preact-compat-alias-config-v10.text | A configuration object demonstrating how to alias React imports to Preact compat for seamless integration. | Exact payloads, commands, or snippets shown in A configuration object demonstrating how to alias React imports to Preact compat for seamless integration. |
examples/preact-getting-started-preact-compat-package-json-dependencies.text | A package.json snippet showing how to alias react and react-dom to @preact/compat for switching to Preact. | Exact payloads, commands, or snippets shown in A package.json snippet showing how to alias react and react-dom to @preact/compat for switching to Preact. |
examples/preact-getting-started-preact-compat-alias-configuration.text | A configuration object mapping React package imports to Preact compatibility layers. | Exact payloads, commands, or snippets shown in A configuration object mapping React package imports to Preact compatibility layers. |
examples/preact-getting-started-preact-rollup-plugin-alias-react-compat-configura.text | A rollup configuration object demonstrating how to use @rollup/plugin-alias to map react imports to preact/compat. | Exact payloads, commands, or snippets shown in A rollup configuration object demonstrating how to use @rollup/plugin-alias to map react imports to preact/compat. |
examples/preact-getting-started-preact-jest-module-name-mapper-config.text | A configuration snippet for Jest module name mapping to enable React compatibility with Preact. | Exact payloads, commands, or snippets shown in A configuration snippet for Jest module name mapping to enable React compatibility with Preact. |
examples/preact-getting-started-preact-tsconfig-react-compatibility-paths.text | A TypeScript configuration file demonstrating how to map React imports to Preact compatibility layers. | Exact payloads, commands, or snippets shown in A TypeScript configuration file demonstrating how to map React imports to Preact compatibility layers. |
examples/preact-getting-started-preact-v10-importmap-esm-configuration.text | A text configuration showing an importmap for mapping Preact and React compatibility layers via esm.sh. | Exact payloads, commands, or snippets shown in A text configuration showing an importmap for mapping Preact and React compatibility layers via esm.sh. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/switching-to-preact