{"meta":{"title":"Preact","description":"Fast 3kB alternative to React with the same modern API"},"html":"\n

\n Preact\n

\n

Fast 3kB alternative to React with the same modern API

\n

\n Get Started\n Switch to Preact\n

\n\n\n\n\t\t\t\t
\n\t\t\t\t\t
function Counter() {\n\tconst [value, setValue] = useState(0);\n\n\treturn (\n\t\t<>\n\t\t\t<div>Counter: {value}</div>\n\t\t\t<button onClick={() => setValue(value + 1)}>Increment</button>\n\t\t\t<button onClick={() => setValue(value - 1)}>Decrement</button>\n\t\t</>\n\t);\n}
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n

Proudly sponsored by:

\n \n
\n\n
\n

A different kind of library

\n
\n\n
\n \"metal\"\n\n
\n

Closer to the DOM

\n

\n Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM.\n It builds on stable platform features, registers real event handlers and plays nicely with other libraries.\n

\n

\n Preact can be used directly in the browser without any transpilation steps.\n

\n
\n
\n\n
\n \"size\"\n\n
\n

Small Size

\n

\n Most UI frameworks are large enough to be the majority of an app's JavaScript size.\n Preact is different: it's small enough that your code is the largest part of your application.\n

\n

\n That means less JavaScript to download, parse and execute - leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control.\n

\n
\n
\n\n
\n \"performance\"\n\n
\n

Big Performance

\n

\n Preact is fast, and not just because of its size. It's one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.\n

\n

\n We automatically batch updates and tune Preact to the extreme when it comes to performance. We work closely with\n browser engineers to get the maximum performance possible out of Preact.\n

\n
\n
\n\n
\n \"portable\"\n\n
\n

Portable & Embeddable

\n

\n Preact's tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn't otherwise go.\n

\n

\n Use Preact to build parts of an app without complex integration. Embed Preact into a widget and apply the same tools and techniques that you would to build a full app.\n

\n
\n
\n\n
\n \"productive\"\n\n
\n

Instantly Productive

\n

\n Lightweight is a lot more fun when you don't have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:\n

\n \n
\n
\n\n
\n \"compatible\"\n\n
\n

Ecosystem Compatible

\n

\n Virtual DOM Components make it easy to share reusable things - everything from buttons to data providers.\n Preact's design means you can seamlessly use thousands of Components available in the React ecosystem.\n

\n

\n Adding a simple preact/compat alias to your bundler provides a compatibility layer\n that enables even the most complex React components to be used in your application.\n

\n
\n
\n\n
\n

See it in action!

\n
\n\n
\n
\n

Todo List

\n 
export default class TodoList extends Component {\n\tstate = { todos: [], text: \"\" };\n\n\tsetText = (e) => {\n\t\tthis.setState({ text: e.currentTarget.value });\n\t};\n\n\taddTodo = () => {\n\t\tlet { todos, text } = this.state;\n\t\ttodos = todos.concat({ text });\n\t\tthis.setState({ todos, text: \"\" });\n\t};\n\n\trender({}, { todos, text }) {\n\t\treturn (\n\t\t\t<form onSubmit={this.addTodo} action=\"javascript:\">\n\t\t\t\t<label>\n\t\t\t\t\t<span>Add Todo</span>\n\t\t\t\t\t<input value={text} onInput={this.setText} />\n\t\t\t\t</label>\n\t\t\t\t<button type=\"submit\">Add</button>\n\t\t\t\t<ul>\n\t\t\t\t\t{todos.map((todo) => (\n\t\t\t\t\t\t<li>{todo.text}</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</form>\n\t\t);\n\t}\n}\n
\n\t\t\t\t\tRun in REPL\n\t\t\t\t
\n
\n
\n

Running Example

\n 
import TodoList from './todo-list';\n\nrender(<TodoList />, document.body);
\n
\n \n
\n
\n
\n\n
\n
\n

Fetch GitHub Repos

\n 
const compare = (a, b) =>\n\t(a.stargazers_count < b.stargazers_count ? 1 : -1);\n\nexport default function GitHubRepos({ org }) {\n\tconst [items, setItems] = useState([]);\n\n\tuseEffect(() => {\n\t\tfetch(`https://api.github.com/orgs/${org}/repos`)\n\t\t\t.then((res) => res.json())\n\t\t\t.then((repos) =>\n\t\t\t\tsetItems(repos.sort(compare).slice(0, 5))\n\t\t\t);\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<h1 class=\"repo-list-header\">\n\t\t\t\tPreact Repositories\n\t\t\t</h1>\n\t\t\t<div>\n\t\t\t\t{items.map((result) => (\n\t\t\t\t\t<Result {...result} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction Result(result) {\n\treturn (\n\t\t<div class=\"repo-list-item\">\n\t\t\t<div>\n\t\t\t\t<a\n\t\t\t\t\thref={result.html_url}\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t>\n\t\t\t\t\t{result.full_name}\n\t\t\t\t</a>\n\t\t\t\t{\" - \"}\n\t\t\t\t<strong>\n\t\t\t\t\t⭐️{result.stargazers_count.toLocaleString()}\n\t\t\t\t</strong>\n\t\t\t</div>\n\t\t\t<p>{result.description}</p>\n\t\t</div>\n\t);\n}\n
\n\t\t\t\t\tRun in REPL\n\t\t\t\t
\n
\n
\n

Running Example

\n 
import GitHubRepos from './github-repos';\n\nrender(\n    <GitHubRepos org=\"preactjs\" />,\n    document.body\n);
\n
\n \n
\n
\n
\n\n
\n

Ready to dive in?

\n
\n\n
\n

\n We've got separate guides based on whether you have experience with React.\n
\n Pick the guide that works best for you!\n

\n

\n Get Started\n Switch to Preact\n

\n
"}