Help Understanding the Preact Codebase and Dev Workflow

[thamizh-root]

Hey, hi!

I've reached out to a few people but haven’t received any replies. I thought this would be my last resort to ask for help.

Here’s my question in simple terms: How do I understand the Preact codebase?

To elaborate:

I’ve found the source files for core methods like render, diff, and the hooks implementation. I get where the logic lives. But I’m struggling to understand how you all actually develop and debug the library during development.

My plan was to:

• Run yarn run dev
• Add console.log statements to internal functions like render, diff, or toChildArray
• Create an index.html file in the root and load the dev bundle to see those logs in action

However, that didn’t work — I ran into CORS issues, and couldn’t figure out how to correctly map the output to index.html. I explored the debug/ and benchmark/app/ folders but still couldn’t understand how to wire everything up for local debugging.

I also tried a similar approach with the React codebase — no luck there either.

What really sparked my curiosity is seeing how Preact internally reuses logic — like implementing useState on top of useReducer, and other elegant patterns. I want to study and explore how Preact is built the same way I learned Redux — through [Dan Abramov’s famous Redux-from-scratch gist](https://gist.github.com/gaearon/ffd88b0e4f00b22c3159).
2. Is there a minimal setup to load an index.html and test changes interactively in the browser?
3. How do contributors and maintainers usually test their changes — via the test suite, example apps, or something else?
4. Where to start if i wanna learn the internals and understand the codebase?

I’m eager to learn and dig deep into the internals of Preact. Any help or direction would mean a lot!

Thanks so much for maintaining such a great library.

[JoviDeCroock]

There are two ways to work in this repository, you have the demo/ folder which you can run npm i && npm run dev in. This will contain a live copy of the files within the repo so any console.log will show up. This is tested in browser etc as described in point 2.

Secondly you can develop through tests, in every repository you can just look at package.json.scripts to find out what commands you can run. npm run test:vitest is one of ours.

I personally debug libraries with demo/ and solve Preact specific issues with tests running, I write a new test and solve the issue.

4. Where to start if i wanna learn the internals and understand the codebase?

it's a small code base, starting from the start is all you need I reckon, start from render and follow the path. Next up look at setState etc. I sometimes write blog posts about internals like our diffing algorithm, which can be found here https://jovidecroock.com/blog/skew-based-diffing and how extensability works for i.e. hooks right here https://marvinh.dev/blog/preact-options/