Top 23 JavaScript UI Projects

• React

  1,709 222,862 9.9 JavaScript

  The library for web and native user interfaces.

  

Project mention: What's New at React Conf 2024 | dev.to | 2024-05-20

Document Metadata Support : Define , , and tags directly in components, with React automatically promoting them to the document .

Stylesheet Support : Built-in support for managing stylesheets within the component tree, handling the loading order automatically.

Asynchronous Script Support : Render asynchronous scripts anywhere in the component tree, simplifying script management.

Resource Preloading Support : Introduce preloading APIs like prefetchDNS, preconnect, preload, and preinit to optimize resource loading.

Third-Party Script and Extension Compatibility : Improved compatibility with third-party scripts and browser extensions.

Better Error Reporting : Enhanced error handling with more options for handling errors.

Custom Element Support (Web Components): Improved support for custom elements.

React Compiler

The React Compiler, also known as Forget, is now open source. You can find it at here. It’s built on Rust and you can now try it out in the React 19 beta or in the online Playground:



The impact on developers is that you no longer need to manually optimize using useMemo, useCallback, React.memo API.

This is limited to this, and does not affect dependency rules like useEffect. Currently, you still need to follow React hooks rules (such as only calling hooks at the top level).

When a component is optimized by the compiler, it can show a “Memo ✨” badge in React Devtools (v5.0+):



React for Two Computers

Dan Abramov introduced the respective advantages of React client components and server components, and how you should choose. Here are some summaries:

Server-side component advantages

• Data Access : Server-side components can access data and files on the server, which is useful for data-intensive applications.

• Pre-process Data : Server-side components can read and pre-process data before sending it to the client.

• Build-time Rendering : Server-side components can run at build time to generate static UI, which is beneficial for SEO and initial load performance.

• Simplify Client-side : By processing complex data logic on the server (UI = f(data)), the client-side burden can be reduced, and the client only receives and displays the necessary UI data.

Client-side component advantages:

• Instant Feedback : When users interact with the UI, such as clicking a button, they can get instant feedback without waiting for the server response.

• No Server Polling : For some user operations, such as dragging sliders or clicking buttons, no additional requests or data downloads from the server are needed.

• Better User Experience : Direct interactive response improves the user experience, making the application feel more responsive and smooth.

• Use Client-side State : Components can use client-side state (UI = f(state)), which allows building highly interactive and responsive user interfaces.

React Server Components in Expo Router

Expo Router is a file-based router for React Native and web applications. It allows you to manage navigation between screens in the application, allowing users to seamlessly move between different parts of the application UI on multiple platforms (Android, iOS, and web).

The advantage of server components is that they can send fully interactive dynamic UI to the client, which means the application can provide complex UI elements based on different user actions.

Break React’s Rules

React has some rules:



Charlotte discussed the reasons for these rules to gain a deeper understanding of React’s internal mechanisms.

I recently wrote an article to get a deeper understanding under the hood of React. It uses a simplified Fiber architecture and concurrent mode to avoid blocking the main thread during rendering. From here, you can also understand why these guidelines cannot be broken.

RedwoodJS with React Server Components

RedwoodJS is another full-stack JavaScript application framework with batteries included. It is mainly aimed at startups.

At a high level, it is a React frontend that talks to a custom GraphQL API. The API uses Prisma to interact with the database. Out of the box, you can use Jest for tightly integrated testing, Pino for logging, and Storybook for UI component cataloging. Setting up authentication (like Auth0) or CSS frameworks (like Tailwind CSS) only requires a command line call. In addition, Redwood’s architecture allows you to deploy to serverless providers (such as Netlify, Vercel) or traditional server and container providers (such as AWS, Render).

Conclusion

This is the update from Day 1, which mainly focuses on broad web development. Day 2 is about React Native.

What I am most looking forward to is the React Compiler. Although it is still in testing, if you want to try it in production now, you can apply to join their working group to help provide feedback.

If you find this helpful, please consider subscribing to my newsletter for more insights on web development. Thank you for reading!

• Svelte

  639 76,805 9.9 JavaScript

  Cybernetically enhanced web apps

  

Project mention: Svelte Series-2: How to install Svelte | dev.to | 2024-05-20

The original installation referred to here is actually the installation prompt that appears on the home page of the official website

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Semantic UI

  6 51,003 0.0 JavaScript

  Semantic is a UI component framework based around useful principles from natural language.

  

Project mention: Should you split that file? | news.ycombinator.com | 2023-12-01

1. The author links to this file as an example: https://github.com/Semantic-Org/Semantic-UI/blob/49b9cbf47c1... . How would you structure it better than it currently is without using sections?

2. So you have a class that has a bunch of getters and setters. Let's just assume that "generate them automatically" is not an option. You want to make it really easy to see the part of the class which is getters, and the part of the class which is setters, and then skim past that. How do you do it?

3. So you have a file that defines 3 data structures. Each data structure has a definition, a bunch of functions for parsing it, and a bunch of functions for serializing it. The author suggests that you split the file into 3 sections for the types, with subsections each for the definition, parsing, and serializing. How would you do it? Let's say the language is Rust or Typescript.

• sortablejs

  25 28,831 5.7 JavaScript

  Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

  

Project mention: A feature-rich front-end drag-and-drop component library | news.ycombinator.com | 2024-04-24

We've been using SortableJS for years for similar functionality.

https://sortablejs.github.io/Sortable/

• react-native-vector-icons

  26 17,249 6.6 JavaScript

  Customizable Icons for React Native with support for image source and full styling.

Project mention: Unit Testing Expo Apps With Jest | dev.to | 2024-02-20

I got this error when I was importing from a library such as react-native-vector-icons:

• evergreen

  15 12,337 4.9 JavaScript

  🌲 Evergreen React UI Framework by Segment

  

Project mention: ⚡Top GitHub Repositories for UI Components | dev.to | 2024-01-05

🔍 Site ⭐ GitHub

• AriaNg

  17 11,357 6.9 JavaScript

  AriaNg, a modern web frontend making aria2 easier to use.

Project mention: Modern web front end for aria2 (BitTorrent supported) | news.ycombinator.com | 2023-07-16

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• reactstrap

  26 10,571 5.4 JavaScript

  Simple React Bootstrap 5 components

  

• ungit

  4 10,381 6.1 JavaScript

  The easiest way to use git. On any platform. Anywhere.

• Dash

  2 10,356 0.0 JavaScript

  A beautiful web dashboard for Linux

• bootstrap-select

  8 9,836 0.0 JavaScript

  :rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.

  

• material-design-for-bootstrap

  1 9,369 0.0 JavaScript

  Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.

  

• rebass

  15 7,931 0.0 JavaScript

  :atom_symbol: React primitive UI components built with styled-system.

  

• Choo

  3 6,774 0.0 JavaScript

  :steam_locomotive::train: - sturdy 4kb frontend framework

  

• VvvebJs

  2 6,712 7.9 JavaScript

  Drag and drop page builder library written in vanilla javascript without dependencies or build tools.

• imba

  45 6,237 9.4 JavaScript

  🐤 The friendly full-stack language

  

Project mention: Ask HN: What are some unpopular technologies you wish people knew more about? | news.ycombinator.com | 2023-12-02

Imba. The best web programming language ever made.

https://imba.io/

• Keen-UI

  1 4,103 5.8 JavaScript

  A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

• lbry-desktop

  471 3,571 2.6 JavaScript

  A browser and wallet for LBRY, the decentralized, user-controlled content marketplace.

  

• Fomantic-UI

  20 3,477 8.8 JavaScript

  Fomantic-UI is the official community fork of Semantic-UI

  

Project mention: Shadcn: Beautifully designed components that you can copy-paste into your apps | news.ycombinator.com | 2024-01-12

https://fomantic-ui.com/ (fork of Semantic-UI)

Like other CSS-Frameworks, this can be used by adding the CDN Links for CSS/JS to the Page, and then using the components/classes.

• teaset

  1 2,933 0.0 JavaScript

  A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

• rangeslider.js

  0 2,164 0.0 JavaScript

  🎚 HTML5 input range slider element jQuery polyfill

• chakra-ui-vue

  8 1,855 2.2 JavaScript

  ⚡️ Build scalable and accessible Vue.js applications with ease.

  

• atomize

  2 1,723 3.9 JavaScript

  Design System for developers build on styled-components & React JS.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

JavaScript UI related posts

• Getting started with React by building a Pokemon search application

  11 projects | dev.to | 11 May 2024

• Securing SvelteKit Apps with Keycloak

  2 projects | dev.to | 6 May 2024

• Composable architecture example: Go headless (best practices)

  2 projects | dev.to | 30 Apr 2024

• Rich Harris: Svelte parses HTML all wrong

  1 project | news.ycombinator.com | 5 Apr 2024

• Mario meets Pareto: multi-objective optimization of Mario Kart builds

  2 projects | news.ycombinator.com | 4 Apr 2024

• Svelte parses HTML all wrong

  1 project | news.ycombinator.com | 4 Apr 2024

• Svelte parses HTML all wrong

  1 project | news.ycombinator.com | 3 Apr 2024
• A note from our sponsor - InfluxDB
  www.influxdata.com | 20 May 2024

  Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →

Index

Sponsored

SaaSHub - Software Alternatives and Reviews

SaaSHub helps you find the best software and product alternatives

www.saashub.com

Do not miss the trending JavaScript projects with our weekly report!