Top 15 JavaScript UI Layout Projects

• react-grid-layout

  9 15,891 7.1 JavaScript

  A draggable and resizable grid layout with responsive breakpoints, for React.

  

  Project mention: 25 React component libraries you just might need for your next project! | dev.to | 2022-05-31

  react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React.

• golden-layout

  3 5,604 6.6 JavaScript

  A multi window layout manager for webapps

  

  Project mention: Using tree data structures to implement terminal split panes | news.ycombinator.com | 2022-01-30

  DomTerm (https://domterm.org) uses the Golden Layout library (https://github.com/golden-layout/golden-layout). As far as I can tell, this does everything mentioned in the article. It also supports tabs, and you can also reposition terminal windows by dragging, neither of which I saw mentioned in the article. (I'm currently working on being able to drag between top-level windows. It sort-of-works, but only at the proof-of-concept level.)

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• react-flexbox-grid

  1 2,890 1.0 JavaScript

  A set of React components implementing flexboxgrid with the power of CSS Modules.

  Project mention: What is the meaning of xs, md, lg in CSS Flexbox system? | reddit.com/r/codehunter | 2022-03-29

  I'm developing an application using React and wanted to style components, I found https://roylee0704.github.io/react-flexbox-grid/ which talks about a fluid grid system. The example looks like:

• react-masonry-component

  0 1,338 0.8 JavaScript

  A React.js component for using @desandro's Masonry

• react-stonecutter

  0 1,150 0.0 JavaScript

  Animated grid layout component for React

• hedron

  0 856 0.0 JavaScript

  A no-frills flexbox grid system for React, powered by styled-components.

• particles-bg

  0 489 0.0 JavaScript

  React particles animation background component

• SonarLint

  www.sonarlint.org

  sponsored

  Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  

• react-reflex

  1 485 3.0 JavaScript

  Resizable Flex layout container components for advanced React web applications

  Project mention: Any good alternative for golden-layout (draggable panels+tabs) that will work with react+typescript | reddit.com/r/webdev | 2021-11-19

  We use react-reflex for out React + TypeScript app

• react-layout-components

  0 334 0.0 JavaScript

  Layout Components for React based on Flexbox

• react-masonry-mixin

  0 174 0.0 JavaScript

  A React.js mixin for using @desandro's Masonry

• react-inline-grid

  0 170 0.0 JavaScript

  Predictable flexbox based grid for React.

• react-flexbox

  0 163 0.0 JavaScript

  React flexbox implementation

• react-stack-grid

  0 147 0.0 JavaScript

• m-react-splitters

  0 144 0.0 JavaScript

  React splitter component, written in TypeScript.

• reactwm

  1 35 0.0 JavaScript

  A minimal window manager built using React.

  Project mention: react-winbox alternatives - reactwm, vue-winbox, winbox, and rc-dock | libhunt.com/r/react-winbox | 2022-04-19

JavaScript UI Layout related posts

• How to Build Resizeable Panels Like Tailwind
  2 projects | reddit.com/r/reactjs | 30 May 2022
• react-winbox alternatives - reactwm, vue-winbox, winbox, and rc-dock
  5 projects | 19 Apr 2022
• What is the meaning of xs, md, lg in CSS Flexbox system?
  1 project | reddit.com/r/codehunter | 29 Mar 2022
• what should I use to build a map-builder?
  2 projects | reddit.com/r/reactjs | 14 Mar 2022
• Using tree data structures to implement terminal split panes
  3 projects | news.ycombinator.com | 30 Jan 2022
• Click and Swap, our alternative to Drag and Drop
  1 project | news.ycombinator.com | 22 Jan 2022
• Is there a library that can do stuff like React grid layout?
  1 project | reddit.com/r/Blazor | 5 Jan 2022

Index

Sponsored

Developer Ecosystem Survey 2022

Take part in the Developer Ecosystem Survey 2022 by JetBrains and get a chance to win a Macbook, a Nvidia graphics card, or other prizes. We’ll create an infographic full of stats, and you’ll get personalized results so you can compare yourself with other developers.

surveys.jetbrains.com

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