JavaScript JSX

Open-source JavaScript projects categorized as JSX

JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation. JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers.

Top 23 JavaScript JSX Projects

  • prettier

    Prettier is an opinionated code formatter.

    Project mention: Level Up Your TypeScript Projects: Discover the Power of ESLint and Prettier | dev.to | 2023-11-28

    In the dynamic world of full-stack development, incorporating linting and formatting tools such as ESLint and Prettier, along with your TypeScript projects, is essential. This integration is particularly important in team settings to ensure code uniformity in syntax and style. Additionally, these tools play a vital role in early detection of errors and bugs. In this article, we'll explore how these tools automate the coding process to produce clean, consistent, and production-ready code.

  • Preact

    ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

    Project mention: HTML Data Attributes: One of the Original State Management Libraries | dev.to | 2023-11-29

    DEV is a Rails monolith, which uses Preact in the front-end using islands architecture. The reason why I mention all this is that it's not a full-stack JavaScript application, and there is no state management library like Redux or Zustand in use. The data store, for the most part on the front end, is all data attributes.

  • Appwrite

    Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.

  • mdx

    Markdown for the component era

    Project mention: Building Stunning Docs: Diving Deep into Docusaurus Customization | dev.to | 2023-11-19

    /blog/ - This directory contains all the markdown files, of your site blogs, you can simply add a new blog by using markdown, or simply remove a blog file by deleting its file, you can combine the markdown with MDX, resulting a well-written blog post.

  • inferno

    :fire: An extremely fast, React-like JavaScript library for building modern user interfaces

    Project mention: Inferno Versions 2 through, like, 8 released. | /r/infernojs | 2023-09-17

    Added a warning when rendering links with javascript: URLs 7bc3763

  • htm

    Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

    Project mention: React SSR web-server from scratch | dev.to | 2023-11-21

    So getting this to work without bundler magic is very hard. It's not surprising why NextJS is investing in a bundler. Though one thing that really sticks out is how much complexity we add for just miniscule dev ergonomics. Not using JSX and using something like htm would make all this easier (removing the bundler entirely), it's a lot of overhead to avoid a couple of quotes. React should really have a tagged-template mode. Also all of this is indirection is actually bad for dev ergonomics too! One of the reasons I did this is because I'm absolutely sick of magic caches and sorting through code that's been crushed by a bundler into something I don't recognize and can't easily debug. While we can't get rid of this completely (ts/jsx) this preserves the module import graph completely on the client-side making it easy to find things as you are working and preserving line numbers. This obviously is not useful for a production build and there's a lot of work that would need to go in to support both modes over the same code, but it's depressing no tools really work like this for local development.

  • styled-jsx

    Full CSS support for JSX without compromises

    Project mention: 45 NPM Packages to Solve 16 React Problems | dev.to | 2023-11-14

    styled-jsx -> A library with a lot of similar features like styled-components. Has some extra features here and there.

  • react-rails

    Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

    Project mention: Why there is no django-react or django-vue package like, for example, Rails has? | /r/django | 2023-01-30

    https://github.com/reactjs/react-rails here is the functionality and simplicity that I would be kind of looking for. The option for it to exist in Django ecosystem is not that outlandish and I wouldn’t be too ignorant of it having to make sense or not make sense to everyone :)

  • InfluxDB

    Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.

  • didact

    A DIY guide to build your own React

    Project mention: "Build your own React" - Fiber tree | dev.to | 2023-11-13

    This post is part of my post series that complements the "Build your own React" tutorial by Rodrigo Pombo.

  • nerv

    A blazing fast React alternative, compatible with IE8 and React 16. (by NervJS)

  • blocks

    A JSX-based page builder for creating beautiful websites without writing code

  • dependency-cruiser

    Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

    Project mention: Taking Frontend Architecture Serious with dependency-cruiser | dev.to | 2023-09-25

    With dependency-cruiser, you can enforce which imports are allowed. This enables you to create an architecture fitness function that ensures your code continues to adhere to the initial design. You can also visualize your dependencies to gain a clearer understanding of your code's actual structure, allowing you to compare it with your mental model and make improvements where necessary.

  • fre

    :ghost: Tiny Concurrent UI library with Fiber.

  • eslint-plugin-jsx-a11y

    Static AST checker for a11y rules on JSX elements.

    Project mention: Speeding up the JavaScript ecosystem – Polyfills gone rogue | news.ycombinator.com | 2023-09-21

    I try to focus on the issues rather than individuals, but the root of the problems in the listed eslint plugin libraries points to ljharb.

    If you do some simple digging into these libraries, you will find that these types of commits are quite common within them.

    https://github.com/jsx-eslint/eslint-plugin-react/commit/e1d...

    https://github.com/jsx-eslint/jsx-ast-utils/commit/bad51d062...

    https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/commit/...

    He would rather see the download count of these polyfill libraries https://github.com/ljharb/ljharb#projects-i-maintain increase, compared to assessing the health of the JavaScript ecosystem.

  • html-to-react-components

    Converts HTML pages into React components

  • jsx-control-statements

    Neater If and For for React JSX

    Project mention: Dangers of Using <Guard> or <If> Components in React | /r/react | 2023-04-14

    It's most likely some syntactic sugar plugin for babel. For example, one of these.

  • GDLauncher

    GDLauncher is a simple, yet powerful Minecraft custom launcher with a strong focus on the user experience

    Project mention: trying to install Tlauncher | /r/pop_os | 2023-05-20

    I used to use GDLauncher, but I would not recommend installing a launcher that lets issues like this one go by for almost a year without being fixed: https://github.com/gorilla-devs/GDLauncher/issues/1288

  • atomico

    Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

  • prettier-plugin-organize-imports

    Make Prettier organize your imports using the TypeScript language service API.

  • vhtml

    Render JSX/Hyperscript to HTML strings, without VDOM 🌈

  • react-multistep

    React multistep wizard component

  • xdm

    Just a *really* good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins (by wooorm)

  • react-scanner

    Extract React components and props usage from code.

    Project mention: The Design System Ecosystem | news.ycombinator.com | 2023-09-23

    > has had any ability to tell me where, how often, or even whether a particular component is in use in the production UI

    I built a dashboard to display this for the design system I work on at my day job to give product designers better visibility into this, using a library called react-scanner[0] and some logic related to the way our different product repos are structured. there are probably other libraries for this sort of thing in different ecosystems, and you can always build your own with a parser as well.

    [0] https://github.com/moroshko/react-scanner

  • dukpy

    Simple JavaScript interpreter for Python

  • Onboard AI

    Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-11-29.

JavaScript JSX related posts

Index

What are some of the best open-source JSX projects in JavaScript? This list will help you:

Project Stars
1 prettier 47,361
2 Preact 35,461
3 mdx 16,148
4 inferno 15,958
5 htm 8,394
6 styled-jsx 7,530
7 react-rails 6,698
8 didact 5,875
9 nerv 5,421
10 blocks 4,828
11 dependency-cruiser 4,556
12 fre 3,663
13 eslint-plugin-jsx-a11y 3,251
14 html-to-react-components 2,115
15 jsx-control-statements 1,602
16 GDLauncher 1,162
17 atomico 1,032
18 prettier-plugin-organize-imports 882
19 vhtml 739
20 react-multistep 637
21 xdm 589
22 react-scanner 544
23 dukpy 429
Learn any GitHub repo in 59 seconds
Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
getonboard.dev