Top 23 JavaScript Preact Projects
-
Your JS bundle size is really inflated because of React, I suspect you could move to Preact and drastically reduce your overall JS package. I haven't done this with Next.js before, but it looks like there is some good reading out there on the subject.
-
CodeSandbox CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps, or components on any device with a web browser.
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
Project mention: SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins? | dev.to | 2022-01-11
Somehow at the interview I was asked "what i think about difficulty of configuring Webpack for Linaria, at that moment I realized, what to find a solution to set up Linaria with SSR is not simple task", but I will show you the final result for example Razzle config:
-
Project mention: Flask-Comment: A Flask extension for creating comment component in Flask/Jinja2 template. | reddit.com/r/flask | 2021-08-05
Flask-Comment is a lightweight and easy for use Flask extension for creating comment component in Flask/Jinja2 template, supporting Disqus, Cusdis, Valine, Utterances, and Gitalk.
-
nwb
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
-
Project mention: [AskJS] Millions of Indian and Chinese devs use Javascript: how come there aren't more big open source tools coming out of these places? | reddit.com/r/javascript | 2021-03-03
https://github.com/NervJS/nerv is a chinese react drop-in alternative (pretty decent one, at that)
-
Project mention: How are you bundling a React Component Library? | reddit.com/r/reactjs | 2021-12-12
At first i thought that this was THE solution but looking deeper at the source code, this tool is a wrapper around a wrapper around a wrapper.... Don't get me wrong, it probably works, but it's currently using a rollup configuration that was created in 2018, the package itself has not seen any updates in 17 months and has 106 open issues. Also the owner says himself that he's not able to work that much on it anymore and suggest to use TSDX which in return hasn't been updated in several months, many open issues and extensive customization is recommended with patch-package which already in itself is a red-flag :(
-
OPS
OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
-
Project mention: Help open source communities find and fix vulnerabilities with The Big Fix hacka-fixathon, and get a t-shirt | reddit.com/r/node | 2022-01-27
I am a maintainer for preact-cli, and as the other guy I think was trying to point out, build tools are a particularly big issue in this space.
-
-
I want to make a component library in React (TypeScript). But I don't know where exactly to begin. I've used CRA (create-react-app) before but that was to build MERN fullstack apps, and not component libraries, hence the confusion. I tried to use NeutrinoJS (as mentioned in the ReactJS docs), but it didn't have official TypeScript support/the ability to write components in TypeScript (instead of JavaScript).
-
Project mention: Zero runtime CSS-in-JS : Is this where great DX meets top-notch Web Performance? (sharing our experience) | reddit.com/r/reactjs | 2021-11-19
Consider adding Goober too to the mix.
-
next-translate
Next.js plugin + i18n API for Next.js 🌍 - Load page translations and use them in an easy way!
I use https://github.com/vinissimus/next-translate. I think that it is a very good solution for nextjs.
-
For react app I used Create React App and for Preact used preact-cli. Preact also gives an option to convert your existing react app to preact using preact-compat, but I have built an app from scratch to see the best result.
-
-
Few weeks ago, I started contributing to an open source library called Teaful, a Tiny, EAsy, and powerFUL for React state management, with ambitious roadmap. Now Teaful reached more than 500 GitHub ⭐️ Stars, the library and his community are growing fast.
-
Project mention: 🧨Embed p/React app inside any other sites that are made using angular/wp/... | dev.to | 2021-04-26
This is the library that will make plugging in Preact components and widgets in any CMS or website. So this is the big and only thing you need to learn of use as a new but cool this is even simpler . It's a HOC and what you need to do is just pass your main component inside this HOC and all your things will be done out the box . Check this out here
-
preact-render-to-string
:page_facing_up: Universal rendering for Preact: render JSX and Preact components to HTML.
prerender() renders a Virtual DOM tree to an HTML string using preact-render-to-string. The difference is that it is asynchronous, and waits for any Promises thrown by components during rendering (Suspense-style) to resolve before returning the HTML.
-
React Tag Autocomplete
⚛️ A fantastically simple tagging component for your React projects (by i-like-robots)
Project mention: Mantine 3.0 is out – 120+ hooks and components with dark theme support | reddit.com/r/reactjs | 2021-10-11Is it possible to create a tag input using this library? For example: https://github.com/i-like-robots/react-tags
-
vaporBoy
Gameboy / Gameboy Color Emulator PWA built with Preact. ⚛️ Powered by wasmBoy. 🎮Themed with VaporWave. 🌴🐬
game boy color, but https://github.com/torch2424/vaporBoy
-
DataFormsJS
🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.
DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
-
-
fastify-preact-ssr
Fastify server-side renders Preact to html and serves with a Preact client.js bundle for DOM hydration.
Project mention: Anyone who would be willing to show their sample repos? | reddit.com/r/node | 2021-04-24Here's a template repo I made for Preact (frontend JavaScript) server-side rendering: https://github.com/sebringrose/fastify-preact-ssr
-
11tyby
Simple 11ty setup using TypeScript, SASS, Preact with partial hydration, and other useful things. Aims to provide the DX of Gatsby, but using 11ty!
JavaScript Preact related posts
- Help open source communities find and fix vulnerabilities with The Big Fix hacka-fixathon, and get a t-shirt
- Top 6 free online IDEs for programmers
- Issue rendering stuff with useEffect
- Let me critique your site's FE perf
- BrowserExtension
- What exactly am I doing wrong???
- Avoid these mistakes when you are learning a new technology
Index
What are some of the best open-source Preact projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Preact | 30,819 |
| 2 | codesandbox-client | 11,198 |
| 3 | razzle | 10,593 |
| 4 | gitalk | 5,854 |
| 5 | nwb | 5,435 |
| 6 | nerv | 5,419 |
| 7 | create-react-library | 4,590 |
| 8 | preact-cli | 4,522 |
| 9 | wmr | 4,431 |
| 10 | Neutrino | 3,864 |
| 11 | goober | 2,371 |
| 12 | next-translate | 1,430 |
| 13 | preact-compat | 954 |
| 14 | vhtml | 606 |
| 15 | teaful | 585 |
| 16 | preact-habitat | 472 |
| 17 | preact-render-to-string | 452 |
| 18 | React Tag Autocomplete | 372 |
| 19 | vaporBoy | 213 |
| 20 | DataFormsJS | 119 |
| 21 | default | 61 |
| 22 | fastify-preact-ssr | 38 |
| 23 | 11tyby | 36 |
Are you hiring? Post a new remote job listing for free.
