awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
jbaysolutions avatar

jbaysolutions/vue-grid-layout

0
View on GitHub↗
7,414 stars·1,537 forks·JavaScript·MIT·37 viewsjbaysolutions.github.io/vue-grid-layout↗

Vue Grid Layout

vue-grid-layout is a draggable and resizable grid system for Vue.js that enables users to customize the placement and size of interface elements. It functions as a dynamic widget orchestrator and a state-persistent layout manager, allowing for the creation of customizable dashboard interfaces where components can be arranged and sized according to user preference.

The system operates as a responsive dashboard framework that automatically adapts grid arrangements based on viewport size and supports right-to-left text directions. It provides the ability to capture and serialize grid positions and dimensions, ensuring user-defined arrangements are maintained across different sessions.

The component handles dynamic content management by adding or removing interactive elements in real time. It utilizes a coordinate-based grid system with collision detection to prevent element overlap during drag and resize operations.

Features

  • Customizable Workspaces - Enables the creation of customizable dashboard interfaces where users can organize their own personal workspace.
  • Grid Layouts - Implements a grid system where users can drag elements to new positions and resize them within boundaries.
  • Layout Persisters - Provides utilities to serialize and restore layout configurations to maintain user arrangements across sessions.
  • Responsive Layout Switches - Automatically switches between predefined grid configurations based on window width for responsive screen adaptation.
  • Grid Layouts - Provides a grid layout engine that automatically adjusts element positions and sizes based on screen dimensions.
  • Coordinate Grids - Uses a coordinate-based grid system to calculate exact positioning and sizing for all interface elements.
  • Layout State Serialization - Serializes grid positions and dimensions into JSON objects to persist and restore user interface arrangements.
  • Responsive Dashboards - Provides a responsive dashboard framework that adapts complex grid arrangements to varying screen sizes.
  • Vue.js Grid Layout Components - Provides a draggable and resizable grid system for Vue.js to customize interface element placement and size.
  • Widget Engines - Functions as an engine for managing and rendering interactive widgets within a draggable grid layout.
  • Responsive Layout Adaptation - Automatically adjusts the grid arrangement based on viewport size and supports right-to-left directions.
  • User Interface Preferences - Allows users to personalize their workspace by arranging and resizing on-screen components.
  • Widget Lifecycle Management - Supports adding and removing interactive widgets in real time without requiring a full interface rebuild.
  • Dynamic Component Rendering - Provides a slot-based system for rendering arbitrary child components as custom widgets within the grid.
  • Collision Detection - Implements collision detection to prevent UI elements from overlapping during drag and resize operations.
  • Layout Components - Draggable and resizable grid layout system.

Star history

Star history chart for jbaysolutions/vue-grid-layoutStar history chart for jbaysolutions/vue-grid-layout

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Frequently asked questions

What does jbaysolutions/vue-grid-layout do?

vue-grid-layout is a draggable and resizable grid system for Vue.js that enables users to customize the placement and size of interface elements. It functions as a dynamic widget orchestrator and a state-persistent layout manager, allowing for the creation of customizable dashboard interfaces where components can be arranged and sized according to user preference.

What are the main features of jbaysolutions/vue-grid-layout?

The main features of jbaysolutions/vue-grid-layout are: Customizable Workspaces, Grid Layouts, Layout Persisters, Responsive Layout Switches, Coordinate Grids, Layout State Serialization, Responsive Dashboards, Vue.js Grid Layout Components.

Which projects share features with jbaysolutions/vue-grid-layout?

Projects with overlapping indexed features include: strml/react-grid-layout — React Grid Layout is a draggable and resizable grid system for React that organizes components into a coordinate-based… gridstack/gridstack.js — gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive… valqelyan/svelte-grid — Svelte Grid is a responsive layout library designed for building interactive, draggable, and resizable dashboard… pixel-agents-hq/pixel-agents — Pixel Agents is a session manager and visualization dashboard for AI agents. It represents active agent sessions as… react-grid-layout/react-grid-layout — React Grid Layout is a toolkit for building draggable, resizable, and responsive dashboard interfaces. It functions as… hoffstadt/dearpygui — DearPyGui is a GPU-accelerated, immediate-mode graphical user interface framework for Python. It provides a…

Projects sharing features with Vue Grid Layout

These projects share indexed features with Vue Grid Layout. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • strml/react-grid-layoutSTRML avatar

    STRML/react-grid-layout

    22,320View on GitHub↗

    React Grid Layout is a draggable and resizable grid system for React that organizes components into a coordinate-based layout. It functions as a responsive layout manager and a serialized grid state engine, providing the tools necessary to create user-customizable workspaces where interface elements can be moved and resized. The system distinguishes itself through breakpoint-driven layout mapping, which adjusts grid configurations based on container width. It utilizes a serialized state model to convert spatial positions and dimensions into data formats for saving and restoring user layouts,

    TypeScript
    View on GitHub↗22,320
  • gridstack/gridstack.jsgridstack avatar

    gridstack/gridstack.js

    8,972View on GitHub↗

    gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive interfaces with draggable and resizable elements. It functions as a drag-and-drop layout manager and a JSON-serializable layout engine, allowing user-defined interface states to be persisted and restored. The library distinguishes itself through a touch-enabled grid interface and a responsive system that automatically adjusts item placement based on screen breakpoints. It features a collision-based layout engine that manages overlapping coordinates to shift or swap elements, alongsid

    TypeScriptangulardashboardgrid
    View on GitHub↗8,972
  • valqelyan/svelte-gridvalqelyan avatar

    valqelyan/svelte-grid

    1,002View on GitHub↗

    Svelte Grid is a responsive layout library designed for building interactive, draggable, and resizable dashboard interfaces within Svelte applications. It provides a coordinate-based system that allows users to manipulate the position and dimensions of UI components directly on the screen, ensuring that content blocks remain organized within a structured grid. The library distinguishes itself through a constraint-driven engine that enforces minimum and maximum size boundaries during user interactions, preventing overlapping elements and maintaining layout integrity. It includes built-in suppo

    Svelteadmin-dashboarddragdraggable
    View on GitHub↗1,002
  • pixel-agents-hq/pixel-agentspixel-agents-hq avatar

    pixel-agents-hq/pixel-agents

    8,322View on GitHub↗

    Pixel Agents is a session manager and visualization dashboard for AI agents. It represents active agent sessions as animated pixel characters, allowing for real-time monitoring of presence, activity, and task progress within a virtual workspace. The system features a grid-based workspace editor used to design custom office layouts and import pixel art assets via manifests. It tracks agent hierarchies by visualizing sub-agents as linked characters and monitors activity through session transcript polling to trigger real-time animations. The project includes a desktop automation interface that

    TypeScript
    View on GitHub↗8,322
Compare all 30 related projects→