--- title: "Using Preact with Storybook 3 | Netlify" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/2018/01/17/using-preact-with-storybook-3/" last_updated: "2026-07-14T04:53:58.000Z" --- ## Using Preact with Storybook 3 [Preact](https://preactjs.com) works wonders for projects where we want the component architecture from React, but need a very small bundle footprint. One good example of this is our [identity-widget](https://identity.netlify.com/). Since it’s an embeddable widget, the full bundle weight of a typical single page application would be way too much and would harm performance on sites using it. Another library we use heavily at Netlify is [Storybook](https://storybook.js.org). Being able to work on the UI of components in isolation from application state is liberating, and makes it much easier to take things like error paths, validations, and edge cases into account when building and testing UI components. We use it religiously for our [main web app](https://storybook.netlify.com). Storybook is built for React, however. So what if we wanted to use it for our Preact-based widgets? ![Modal component from Netlify’s Identity widget running in Storybook](https://d2mxuefqeaa7sj.cloudfront.net/s_91C9ECABC188FFB4BB5C0EE98FD298AB39FEE096F0A26D48C52D1B699DF4552C_1516081768647_widget.png) ## Preact / React compatibility The key to making this work is a library called `preact-compat` that offers a wrapper around Preact that mimics the API of the `react` and `react-dom` libraries. The way to use it, is to tell webpack to cheat, and import `preact-compat` whenever a file is trying to import either `react` or `react-dom`. You can read more about `preact-compat` and how to generally use it with webpack in [their documentation](https://www.npmjs.com/package/preact-compat#usage-with-webpack). ## Getting Storybook to use preact-compat How do you get webpack set up with this? I’m going to assume you have an existing project based on Preact and webpack, and then show the steps to set up Storybook from scratch. Start by installing `storybook` and `preact-compat`: ``` yarn add -D @storybook/react preact-compat ``` Once the dependencies are in place, create a `.storybook/config.js` file with the standard storybook config: ``` import { configure } from '@storybook/react'; function loadStories() { require('../stories/index.js'); // You can require as many stories as you need.} configure(loadStories, module); ``` Now you need to extend storybook’s config to use the Preact based loader. Storybook lets you do this by defining a `.storybook/webpack.config.js` file and export an object with overwrites of their base config. Our goal by customizing the webpack config, is to inject the resolver so `react` and `react-dom` gets replaced with `preact-compat` when building our stories. To do that, create this file and save it as `.storybook/webpack.config.js`: ``` module.exports = { resolve: { extensions: [".js", "jsx"], alias: { react: "preact-compat", "react-dom": "preact-compat" } }}; ``` ## Writing Stories All that’s left to do now is write stories and run your storybook. To get started with this, create a file `stories/index.js`: ``` import { h } from "preact";import { storiesOf } from "@storybook/react"; storiesOf("Storybook With Preact", module) .add("render some text", () =>

Hello, Preact World!

) ``` And add a storybook script in the `"``scripts``"` section of your `package.json`: ``` "scripts": { "storybook": "start-storybook -p 9001 -c .storybook"} ``` Now you can run `yarn storybook` and visit `localhost:9001` to view your Preact based stories. ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Using Preact with Storybook 3&url=https://www.netlify.com/blog/2018/01/17/using-preact-with-storybook-3//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2018%2F01%2F17%2Fusing-preact-with-storybook-3%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2018/01/17/using-preact-with-storybook-3//) - [Bluesky](https://bsky.app/intent/compose?text=Using Preact with Storybook 3+https://www.netlify.com/blog/2018/01/17/using-preact-with-storybook-3//) * * * ### Tags - [popular](/blog/tags/popular/) - [Tutorial](/blog/tags/tutorial/) - [React](/blog/tags/react/) - [Preact](/blog/tags/preact/) ## Keep reading ![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp) Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp) Guides & Tutorials May 15, 2026 [ ### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO ](/blog/tracking-ai-search-traffic) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ## Recent posts News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)