JavaScript JSX

Open-source JavaScript projects categorized as JSX
Edit details

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.

Topics: React JavaScript ReactJS CSS Babel
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.
surveyjs.io
featured

Top 23 JavaScript JSX Projects

  • prettier

    Prettier is an opinionated code formatter.

    • Project mention: How to prevent Prettier putting a full stop on a new line after a link | dev.to | 2024-05-13

    Do you use Prettier? Have your configuration settings caused weird HTML rendering issues by adding extra whitespace where you didn't want it? Perhaps after an anchor link at the end of a paragraph? Me, too. Here's what's happening and how you might be able to fix it.

  • Preact

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

    • Project mention: Preact vs React: A Comparative Guide | dev.to | 2024-04-23

    In this post, we get to know more about Preact, one of this year's trending libraries. And we'll compare it to React to see which one suits better for our projects.

  • SurveyJS

    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.

    SurveyJS logo

  • mdx

    Markdown for the component era

    • Project mention: I wrote a new blog using Next.js App router | dev.to | 2024-05-16

    MDX — Write React code within Markdown.

  • inferno

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

    • Project mention: Inferno 8.2.3 Released! | /r/infernojs | 2023-12-11

    FormEvent event.target has been explicitly defined for this event type c337fdd

  • htm

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

    • Project mention: Ask HN: How do you use React as a library in 2024? | news.ycombinator.com | 2024-05-10

    I know what "MVC" _stands_ for, but I'm asking what _context_ you mean that in. Are you talking about how to define your server-side data models and endpoints? How you're organizing client-side fetching and caching?

    Normally "MVC" as a concept doesn't get used in the React ecosystem (the way it did with Backbone.js).

    FWIW it's certainly _possible_ to use React as a script tag, but it's extremely rare. It's normally expected that the frontend _is_ actually bundled and compiled, whether it be using a pure-SPA build tool like Vite, or one of the full server-side frameworks like Next or Remix.

    Note that the SPA build output is just a set of static HTML/JS/CSS files, which do not require a separate Node server process for hosting - they can be served by any HTTP server.

    My own advice would be to use Vite and build as an SPA.

    _If_ you absolutely want to use React as _just_ a `` tag with no build step, I'd recommend also using <a href="https://github.com/developit/htm">https://github.com/developit/htm</a> to at least give you JSX-like syntax for writing your components.

  • styled-jsx

    Full CSS support for JSX without compromises

    • Project mention: Creating Nx Workspace with Eslint, Prettier and Husky Configuration | dev.to | 2024-03-25

  • react-rails

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

  • InfluxDB

    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.

    InfluxDB logo

  • 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)

  • 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.

  • blocks

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

  • eslint-plugin-jsx-a11y

    Static AST checker for a11y rules on JSX elements.

    • Project mention: Getting started with React by building a Pokemon search application | dev.to | 2024-05-11

    > [email protected] build > react-scripts build Creating an optimized production build... Compiled with warnings. [eslint] src/App.js Line 64:15: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. File sizes after gzip: 58.34 kB (-1 B) build/static/js/main.b3bd969c.js 1.78 kB build/static/js/453.bd7a2879.chunk.js 677 B build/static/css/main.af098727.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment

  • html-to-react-components

    Converts HTML pages into React components

  • jsx-control-statements

    Neater If and For for React JSX

  • 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

  • sugar-high

    ✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

  • dukpy

    Simple JavaScript interpreter for Python

  • SaaSHub

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

    SaaSHub logo
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).

JavaScript JSX related posts

  • Ask HN: How do you use React as a library in 2024?

    1 project | news.ycombinator.com | 10 May 2024

  • Tailwind Handbook - Part II

    1 project | dev.to | 27 Apr 2024

  • Preact vs React: A Comparative Guide

    2 projects | dev.to | 23 Apr 2024

  • MDX – use JSX in your Markdown content

    1 project | news.ycombinator.com | 13 Feb 2024

  • jQuery v4.0.0 Beta

    8 projects | news.ycombinator.com | 6 Feb 2024

  • Preact: Lightweight React Alternative

    1 project | dev.to | 27 Jan 2024

  • Creating a static Next.js 14 Markdown Blog - An Adventure

    3 projects | dev.to | 25 Dec 2023
  • A note from our sponsor - SaaSHub
    www.saashub.com | 19 May 2024
    SaaSHub helps you find the best software and product alternatives Learn more →

Index

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

Project Stars
1 prettier 48,399
2 Preact 36,118
3 mdx 16,909
4 inferno 16,014
5 htm 8,564
6 styled-jsx 7,620
7 react-rails 6,727
8 didact 6,002
9 nerv 5,420
10 dependency-cruiser 4,990
11 blocks 4,899
12 eslint-plugin-jsx-a11y 3,332
13 html-to-react-components 2,125
14 jsx-control-statements 1,609
15 GDLauncher 1,162
16 atomico 1,123
17 prettier-plugin-organize-imports 969
18 vhtml 760
19 react-multistep 645
20 xdm 589
21 react-scanner 561
22 sugar-high 480
23 dukpy 452

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com