Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. Editor.js
A block-styled editor with clean JSON output
codex-team
/
editor.js
A block-styled editor with clean JSON output
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() iOS Safari |
![]() Opera |
---|---|---|---|---|---|
Edge 12+ | Firefox 18+ | Chrome 49+ | Safari 10+ | Safari 10+ | Opera 36+ |
If you like a project ๐ ๐ ๐
If you like Editor.js you can support project improvements and development of new features with a donation to our collective.
Sponsors
Support us by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Backers
Thank you to all our backers!
Contributors
This project exists thanks to all the people who contribute.
We really welcome new contributors. If you want to make some code with us, please take a look at the Good First Tasks. You can write to us on team@codex.so
or via special Telegram chat, or any other way.
Documentation
Please visit https://editorjs.io/ to view all documentation articles.
- Baseโฆ
2. PurgeCSS
PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.
PurgeCSS
What is PurgeCSS?
When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included.
This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.
Sponsors ๐ฅฐ
Documentation
You can find the PurgeCSS documentation on this website.
Table of Contents
PurgeCSS
Plugins
Guides
Getting Started
Installation
npm i --save-dev purgecss
Usage
import PurgeCSS from "purgecss";
const purgeCSSResults = await new PurgeCSS().purge(
โฆ3. Wouter
A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but Hooks.
molefrog
/
wouter
๐ฅข A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS.
A router you wanted so bad in your project!
Features
- Zero dependency, only 1.36 KB gzipped vs 11KB React Router.
- Supports both React and Preact! Read "Preact support" section for more details.
- No top-level
<Router />
component, it is fully optional. - Mimics React Router's best practices by providing familiar
Route
,Link
,Switch
andRedirect
components. - Has hook-based API for more granular control over routing (like animations):
useLocation
,useRoute
anduseRouter
.
developers ๐ wouter
... I love Wouter. Itโs tiny, fully embraces hooks, and has an intuitive and barebones API. I can accomplish everything I could with react-router with Wouter, and it just feels more minimalist while not being inconvenient.
Wouter provides a simple API that many developers andโฆ
4. bundlesize
Keep your bundle size in check
siddharthkp
/
bundlesize
Keep your bundle size in check
Keep your bundle size in check
ย
Setup
npm install bundlesize --save-dev
# or
yarn add bundlesize --dev
ย
Usage
ย
Add it to your scripts in package.json
"scripts": {
"test": "bundlesize"
}
Or you can use it with npx
from NPM 5.2+.
npx bundlesize
ย
Configuration
ย
bundlesize
accepts an array of files to check.
[
{
"path": "./build/vendor.js",
"maxSize": "30 kB"
},
{
"path": "./build/chunk-*.js",
"maxSize": "10 kB"
}
]
ย
You can keep this array either in
-
package.json
{ "name": "your cool library", "version": "1.1.2", "bundlesize": [ { "path": "./build/vendor.js", "maxSize": "3 kB" } ] }
or in a separate file
-
bundlesize.config.json
Format:
{ "files": [ { "path": "./dist.js" "maxSize": "3
โฆ
5. MindAR
Web Augmented Reality. Natural feature tracking. Image targets. Tensorflow.js
hiukim
/
mind-ar-js
Web Augmented Reality. Natural feature tracking. Image targets. Tensorflow.js
MindAR
For location-based AR and marker-based AR, checkout AR.js https://github.com/AR-js-org/AR.js
MindAR is a lightweight library for web augmented reality. Highlighted features include:
Web AR Development Course - Fund Raising
To raise fund for the continuous development and support of the MindAR Library, I've created a WebAR development course. It's a very comprehensive guide to Web AR development, not limited to MindAR. Check it out if you are interested:
https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61
Managed Solution - Pictarize
This opensource project is under MIT, so you are free to use however you want. There is also a hosted platform built on top ofโฆ
6. Snap page
Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
lucafalasco
/
scroll-snap
โฏ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
scroll-snap
Snap page when user stops scrolling, basically implements CSS Scroll Snap, adding a customizable configuration and a consistent cross browser behaviour.
- Works in all modern browsers
-
requestAnimationFrame
for 60fps - Customizable settings (including easing functions)
- No additional dependencies
- No extra stylesheet
Installation
yarn add scroll-snap
You can also grab a pre-built version from unpkg
Usage
createScrollSnap(element, settings, [callback])
Arguments
element: HTMLElement
The HTML DOM Element to attach the scroll listener to.
settings: Settings
A configuraiton object consisting of one or more of the following keys:
snapDestinationX: string | number
Snap destination for x axis, should be a valid css value expressed as
px | % | vw | vh
snapDestinationY: string | number
Snap destination for y axis, should be a valid css value expressed as
px | % | vw | vh
timeout: number
Time in ms after which scrolling isโฆ
7. Dependency cruiser
Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
sverweij
/
dependency-cruiser
Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
Dependency cruiser
Validate and visualise dependencies. With your rules. JavaScript. TypeScript. CoffeeScript. ES6, CommonJS, AMD.
What's this do?
This runs through the dependencies in any JavaScript, TypeScript, LiveScript or CoffeeScript project and ...
- ... validates them against (your own) rules
- ... reports violated rules
- in text (for your builds)
- in graphics (for your eyeballs)
As a side effect it can generate cool dependency graphs you can stick on the wall to impress your grandma.
How do I use it?
Install it
-
npm install --save-dev dependency-cruiser
to use it as a validator in your project (recommended) or... -
npm install --global dependency-cruiser
if you just want to inspect multiple projects.
Show stuff to your grandma
To create a graph of the dependencies in your src folder, you'd run dependency
cruiser with output type dot
and run GraphViz dot on the result. In
a one liner:
depcruise --include-only "^src" --output-type dot
โฆ8. React Rich Text Editor
Pure React rich text WYSIWYG editor based on draft-js.
React Rich Text Editor
This is a UI component built completely in React that is meant to be a full-featured textarea replacement similar to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. It's based on the excellent, open source Draft.js from Facebook which is performant and production-tested.
Demo
Try the editor here: react-rte.org/demo
Getting Started
$ npm install --save react-rte
RichTextEditor
is the main editor component. It is comprised of the Draft.js <Editor>
, some UI components (e.g. toolbar) and some helpful abstractions around getting and setting content with HTML/Markdown.
RichTextEditor
is designed to be used like a textarea
except that instead of value
being a string, it is an object with toString
on it. Creating a value
from a string is also easy using createValueFromString(markup, 'html')
.
Browser Compatibility
The scripts are transpiled by Babel to ES6. Additionally, at least one of this package's dependencies does notโฆ
9. Changesets
A way to manage your versioning and changelogs with a focus on monorepos
changesets
/
changesets
๐ฆ A way to manage your versioning and changelogs with a focus on monorepos
A tool to manage versioning and changelogs
with a focus on multi-package repositories
The changesets
workflow is designed to help when people are making changes, all the way through to publishing. It lets contributors declare how their changes should be released, then we automate updating package versions, and changelogs, and publishing new versions of packages based on the provided information.
Changesets has a focus on solving these problems for multi-package repositories, and keeps packages that rely on each other within the multi-package repository up-to-date, as well as making it easy to make changes to groups of packages.
How do we do that?
A changeset
is an intent to release a set of packages at particular semver bump types with a summary of the changes made.
The @changesets/cli package allows you to write changeset
files as you make changes, then combine any number of changesets into a release, that flattens theโฆ
10. React Table
Hooks for building fast and extendable tables and datagrids for React
tannerlinsley
/
react-table
โ๏ธ Hooks for building fast and extendable tables and datagrids for React
Hooks for building lightweight, fast and extendable datagrids for React
Enjoy this library? Try them all! React Query, React Form, React Charts
Visit react-table.tanstack.com for docs, guides, API and more!
Quick Features
- Lightweight (5kb - 14kb+ depending on features used and tree-shaking)
- Headless (100% customizable, Bring-your-own-UI)
- Auto out of the box, fully controllable API
- Sorting (Multi and Stable)
- Filters
- Pivoting & Aggregation
- Row Selection
- Row Expansion
- Column Ordering
- Animatable
- Virtualizable
- Resizable
- Server-side/controlled data/state
- Extensible via hook-based plugin system
Become a Sponsor
Previous Versions
Version 6
v6 is a great library and while it is still available to install and use, I am no longer offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React.
Where are the docs for the older v6 version?
Please visitโฆ
Stargazing ๐
Top risers over last 7 days๐
- Every Programmer Should Know +1,585 stars
- Tabby +1,222 stars
- JavaScript Algorithms +1,219 stars
- Awesome +1,196 stars
- Awesome Self Hostsed +1,141stars
Top growth(%) over last 7 days๐
- Rakkas +26%
- Vitest +21%
- Molecule +20%
- md-block +19%
- React Snowfall +14%
Top risers over last 30 days๐
- Tabby +6,991 stars
- Free Programming Books +4,553 stars
- Every Programmer Should Know +4,522 stars
- Awesome +4,395 stars
- Developer Roadmap +4,253 stars
Top growth(%) over last 30 days๐
- Pico +394%
- Rakkas +150%
- Remix Auth +91%
- React Snowfall +87%
- Agrippa +85%
For all for the latest rankings please checkout Stargazing.dev
Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.
Top comments (0)