Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. tailwindcss-animate
A Tailwind CSS plugin for creating beautiful animations.
jamiebuilds / tailwindcss-animate
A Tailwind CSS plugin for creating beautiful animations
tailwindcss-animate
A Tailwind CSS plugin for creating beautiful animations.
<!-- Add an animated fade and zoom entrance -->
<div class="animate-in fade-in zoom-in">...</div>
<!-- Add an animated slide to top-left exit -->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>
<!-- Control animation duration -->
<div class="... duration-300">...</div>
<!-- Control animation delay -->
<div class="... delay-150">...</div>
<!-- And so much more! -->
Installation
Install the plugin from npm:
npm install -D tailwindcss-animate
Then add the plugin to your tailwind.config.js
file:
// @filename tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-animate"),
// ...
],
}
Documentation
2. TinyMCE
TinyMCE is the worldโs most customizable, scalable, and flexible rich text editor. Available for React, Vue and Angular
tinymce / tinymce
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
TinyMCE
The world's #1 open source rich text editor.
Using an old version of TinyMCE? We recommend you to upgrade to TinyMCE 7 to continue receiving security updates, or consider TinyMCE 5 LTS if you need more time to upgrade.
Used and trusted by millions of developers, TinyMCE is the worldโs most customizable, scalable, and flexible rich text editor. Weโve helped launch the likes of Atlassian, Medium, Evernote (and lots more that we canโt tell you), by empowering them to create exceptional content and experiences for their users.
With more than 350M+ downloads every year, weโre also one of the most trusted enterprise-grade open source HTML editors on the internet. Thereโs currently more than 100M+ products worldwide, powered by Tiny. As a high powered WYSIWYG editor, TinyMCE is built to scale, designed to innovate, and thrives on delivering results to difficult edge-cases.
You can access a full featured demo ofโฆ
3. Body scroll lock
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).
willmcpo / body-scroll-lock
Body scroll locking that just works with everything ๐
Why BSL?
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).
Features:
- disables body scroll WITHOUT disabling scroll of a target element
- works on iOS mobile/tablet (!!)
- works on Android
- works on Safari desktop
- works on Chrome/Firefox
- works with vanilla JS and frameworks such as React / Angular / VueJS
- supports nested target elements (eg. a modal that appears on top of a flyout)
- can reserve scrollbar width
-
-webkit-overflow-scrolling: touch
still works
Aren't the alternative approaches sufficient?
- the approach
document.body.ontouchmove = (e) => { e.preventDefault(); return false; };
locks the body scroll, but ALSO locks the scroll of a target element (eg. modal). - the approach
overflow: hidden
on the body or html elements doesn't work for all browsers - the
position: fixed
approach causes the body scroll to reset - some approaches break inertia/momentum/rubber-band scrolling on iOS
LIGHT Package Size:
โฆ
4. Bazinga
The all-in-one toolbox for developers. Data formatters, generators, converters and more.
Bazinga Tools
The all-in-one toolbox for developers. https://bazinga.tools
You Are in Good Company
BAZINGA.TOOLS is the best all-in-one toolbox for all your needs...Bazinga!
โโ Sheldon Lee Cooper
Your Privacy Is Guaranteed
Your data won't leave your browser.
- โ No cookies
- โ No logging
- โ No IP fingerprinting
- โ No exception reports
- โ No popups
- โ Fully open source
Development
First, install dependencies:
npm install
Second, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit the file.
Add New Tools
All tools are located at pages/
. To add a new tool, just follow the convention of the exsiting tools. The tech stack is TypeScript + React + CSS Modules.
Your feedback and contributions are welcome!
Roadmap
- Add new tools
- Improve existing tools
- Support offline access
- Integrations (with Alfred, Raycast, Visual Studio Code...)
5. Griffel
Griffel (German for stylus/pen) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.
CSS-in-JS with ahead-of-time compilation โก๏ธ
Griffel (German for stylus/pen) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.
๐ ย Zero config start: Griffel has both runtime & build time implementations
๐ฅ ย Optional build time transforms to improve performance
๐ช ย Type-safe styles via csstype
๐งฉ ย Uses Atomic CSS to reuse styles and avoid specificity issues with CSS
๐ ย Experimental CSS extraction with Webpack plugin
๐ ย Debug using Griffel DevTools extension
Griffel with React
npm install @griffel/react
# or
yarn add @griffel/react
Learn more?
Check series episodes of Fluent UI Insights related to styling issues and Griffel ๐ฅ
Contributing
This project welcomes contributions and suggestions, please see CONTRIBUTING.md to get started.
Trademarks
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must followโฆ
6. dom-to-image
dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript.
tsayen / dom-to-image
Generates an image from a DOM node using HTML5 canvas
DOM to Image
What is it
dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.
Installation
NPM
npm install dom-to-image
Then load
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
Bower
bower install dom-to-image
Include either src/dom-to-image.js
or dist/dom-to-image.min.js
in your page
and it will make the domtoimage
variable available in the global scope.
<script src="path/to/dom-to-image.min.js" />
<script>
domtoimage.toPng(node)
//...
</script>
Usage
All the top level functions accept DOM node and rendering options and return promises, which are fulfilled with correspondingโฆ
7. drei
A growing collection of useful helpers and fully functional, ready-made abstractions for react-three-fiber.
A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.
If you make a component that is generic enough to be useful to others, think about CONTRIBUTING!
npm install @react-three/drei
Important
this package is using the stand-alone three-stdlib
instead of three/examples/jsm
.
Basic usage
import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
React-native
import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'
The native
route of the library does not export Html
or Loader
. The default export of the library is web
which does export Html
and Loader
.
Documentation
Warning
Below is an archive of the anchors links with their new respective locations to the documentation website. Do not update the links below, they are for reference only.
Cameras
PerspectiveCamera
OrthographicCamera
CubeCamera
Controls
CameraControls
8. Perfect Arrows
A set of functions for drawing perfect arrows between points and shapes.
steveruizok / perfect-arrows
Draw perfect arrows between points and shapes.
Perfect Arrows
A set of functions for drawing perfect arrows between points and shapes.
-
getArrow
- For point-to-point arrows. -
getBoxToBoxArrow
- For rectangle-to-rectangle arrows.
๐ Demo
Other languages
Installation
npm i perfect-arrows
or
yarn add perfect-arrows
Usage
The functions in this library provide only the information needed to draw an arrow. You'll need to draw the arrow yourself using your technology of choice. See below for an example React component with SVG.
getArrow(x0, y0, x1, y1, options)
The getArrow
function accepts the position of two points and returns an array containing information for:
- three points: a start, end, and control point
- three angles: an end, start, and center
You can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.
const arrow = getArrow(0, 0, 100, 200, {
bow: 0,
โฆ9. Learn Git Branching
An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!
pcottle / learnGitBranching
An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!
LearnGitBranching
LearnGitBranching is a git repository visualizer, sandbox, and a series of educational tutorials and challenges. Its primary purpose is to help developers understand git through the power of visualization (something that's absent when working on the command line). This is achieved through a game with different levels to get acquainted with the different git commands.
You can input a variety of commands into LearnGitBranching (LGB) -- as commands are processed, the nearby commit tree will dynamically update to reflect the effects of each command:
This visualization combined with tutorials and "levels" can help both beginners and intermediate developers polish their version control skills. A quick demo is available here https://pcottle.github.io/learnGitBranching/?demo
Or, you can launch the application normally here https://pcottle.github.io/learnGitBranching/
Sandbox Mode
By default the application launches in "sandbox mode" with a basic repository already created. Here you can enter commands and mess around with a repository as much asโฆ
10. sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
lovell / sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
sharp
The typical use case for this high speed Node-API module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.
It can be used with all JavaScript runtimes that provide support for Node-API v9, including Node.js (^18.17.0 or >= 20.3.0), Deno and Bun.
Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings due to its use of libvips.
Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly Lanczos resampling ensures quality is not sacrificed for speed.
As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available.
Most modern macOS, Windows and Linux systems do not require any additional install or runtime dependencies.
Documentation
Visit sharp.pixelplumbing.com for complete installation instructions, API documentation, benchmark tests and changelog.
Examples
npm install
โฆStargazing ๐
Top risers over last 7 days๐
- Mermaid +2,341 stars
- AI Expert Roadmap +1,764 stars
- Pure Bash Bible +1,348 stars
- Font Awesome +952 stars
- Coding Interview University +857 stars
Top growth(%) over last 7 days๐
- React Worker Components +21%
- React Search Box +17%
- njt +12%
- Spark Joy +11%
- AI Expert Roadmap +11%
Top risers over last 30 days๐
- Coding Interview University +6,151
- Public APIs +5,416 stars
- Awesome +4,554 stars
- NextUI +3,956 stars
- Tauri +3,169 stars stars
Top growth(%) over last 30 days๐
- NextUI +358%
- Mantine +52%
- React Worker Components +50%
- Learn web3 Dapp +49%
- Medusa +42%
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)