17 repositorios
Systems for tracking and managing references to draggable and droppable elements within an interface.
Distinct from Interactive UI Elements: Distinct from Interactive UI Elements: focuses on the registry mechanism for spatial tracking rather than the elements themselves.
Explore 17 awesome GitHub repositories matching user interface & experience · Interactive Element Registries. Refine with filters or upvote what's useful.
Draggable is a JavaScript library for implementing draggable elements and sortable lists within a web browser. It provides a functional toolset for creating accessible drag and drop interfaces and a mechanism for dynamically swapping, sorting, and reordering HTML elements in real time. The library features a cross-input interaction layer that unifies mouse, touch, and force-touch events into a single stream for consistent behavior across different devices. It specifically includes tools for providing screen reader feedback and assistive technology support to ensure drag operations are accessi
Supports the definition of specific target areas that accept and react to elements being dragged over them.
This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs. The library distinguishes itself through a highly extensible architecture that separates input handling from interaction logic. It utilizes a sensor-based input abstraction to normalize diverse user interactions and a plugin-driven lifecycle to inject c
Maintains a registry of draggable and droppable elements to enable coordinate detection and collision resolution.
DearPyGui is a GPU-accelerated, immediate-mode graphical user interface framework for Python. It provides a high-performance toolkit for building interactive desktop applications by leveraging native hardware-accelerated rendering backends across multiple operating systems. By utilizing an immediate-mode execution model, the library offers direct control over the rendering loop and element state, enabling the creation of responsive, dynamic interfaces. The framework distinguishes itself through its ability to handle complex, high-frequency visual updates, making it suitable for real-time data
Provides access to recently created interface elements for dynamic runtime interaction.
Stimulus is a JavaScript behavior framework and client-side logic layer used to add interactive behavior to server-rendered HTML. It functions as a system of DOM component controllers that organize JavaScript logic into classes, allowing developers to enhance server-delivered markup without replacing the rendering process with a client-side framework. The framework uses data attributes to bind JavaScript classes to HTML elements and map DOM events to specific methods through document-level event delegation. It employs a lifecycle manager based on mutation observers to automatically instantiat
Tracks and manages the active state of controllers as their elements enter or leave the document.
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
Validates which dragged elements are permitted to be dropped onto a target based on custom logic.
Craft.js is a framework for building extensible drag-and-drop page editors using React components and serializable state management. It provides the core infrastructure to construct custom page builders where users can compose layouts by dragging, dropping, and repositioning elements within a structured editor environment. The framework manages editor state through a component-based node tree, where each user element is represented as an internal node storing its type, props, and parent relationships. This state is managed via React Context and can be serialized to JSON for persistence and sh
Marks elements as containers that accept child elements, making those children draggable within the editor.
language-ext is a functional programming framework for C# that provides a suite of immutable data structures and monadic types. It enables the implementation of pure functional programming patterns, utilizing containers to manage side effects, optional values, and error handling. The library is distinguished by its advanced concurrency and state management tools, including a software transactional memory system and lock-free atomic references. It also provides specialized utilities for distributed systems, such as vector clocks for causality tracking and deterministic data conflict resolution
Creates new sets by applying mapping functions or filtering elements of an existing set.
This repository is a collection of practical code snippets and implementation patterns for Flutter and Dart. It serves as a comprehensive guide and reference for asynchronous programming, state management patterns, and UI component design. The project provides advanced language reference material covering generics, reflection, factory constructors, and null-aware operators. It also includes specific utilities for manipulating Dart collections, such as helper methods for transforming and filtering maps, lists, and iterables. The coverage extends to high-level capabilities including asynchrono
Creates new sets by applying a transformation function to each element of another collection.
ScottPlot is a cross-platform, high-performance charting library for .NET that renders interactive plots across desktop and web GUI frameworks including Windows Forms, WPF, MAUI, Avalonia, Blazor, and WinUI. It provides an optimized rendering engine capable of displaying millions of data points with interactive pan, zoom, and live data streaming, while also supporting image export to formats like PNG and SVG for file output, cloud applications, and notebooks. The library distinguishes itself through a comprehensive set of chart types including scatter, line, bar, pie, heatmap, financial, rada
Provides draggable lines, markers, spans, and rectangles that respond to mouse input without manual event wiring.
react-konva is a declarative React canvas graphics library and 2D vector graphics framework. It serves as a rendering engine and interactive canvas toolset that allows for the drawing and management of complex 2D shapes and graphics using a React component model. The library maps reactive component trees to an underlying object-oriented graphics scene graph, enabling the synchronization of visual states with application data. It provides specialized tools for building interactive graphical interfaces, including support for multi-touch gestures, drag-and-drop functionality, and real-time trans
Handles complex user interactions including clicking, resizing, and dragging on individual canvas elements.
Pannellum es un visor de panoramas WebGL y framework de tours virtuales utilizado para renderizar imágenes equirectangulares o cubemap como entornos inmersivos de 360 grados. Funciona como un renderizador de imágenes multiresolución y un reproductor de video panorámico, soportando tanto imágenes estáticas como reproducción de video esférico. El proyecto se distingue por su capacidad para manejar panoramas de resolución extremadamente alta mediante la generación y carga de teselas (tiles) multiresolución. Permite la creación de tours virtuales interactivos vinculando múltiples escenas panorámicas mediante transiciones y puntos de acceso (hotspots) interactivos. El sistema incluye capacidades para el movimiento automático de la cámara, integración de orientación del dispositivo para experiencias de visualización móvil y un sistema de hooks para monitorear eventos del visor. También proporciona utilidades para la localización de la interfaz de usuario, control del estado del visor y renderizado de contenido de respaldo para navegadores sin aceleración por hardware.
Enables the placement of clickable markers within a panorama to provide additional context or metadata.
ZIO is a functional effect system for the JVM that models asynchronous and concurrent programs as pure, composable values with typed error handling and dependency injection. Its core identity is built on fiber-based concurrency, where lightweight, non-blocking fibers execute millions of concurrent tasks with structured lifecycle management, and a dual-channel error model that separates expected business failures from unexpected system defects at compile time. The system provides effect-typed dependency injection through a layer-based dependency graph, pull-based reactive stream processing with
Provides transactional set transformation as part of its software transactional memory capabilities.
Leafer UI es un motor de renderizado de canvas HTML5 de alto rendimiento y una biblioteca de gráficos vectoriales 2D. Utiliza un árbol de escenas jerárquico para gestionar formas, rutas y texto, proporcionando un kit de herramientas para construir aplicaciones de canvas interactivas y lienzos infinitos expansivos. El motor está diseñado como un kit de herramientas de canvas multiplataforma que desacopla la lógica central de la API de dibujo, permitiéndole ejecutarse en entornos web, móviles, de servidor y de mini-programas. Se distingue por proporcionar herramientas especializadas para el desarrollo de editores gráficos interactivos, incluyendo detección de impactos (hit detection), propagación de eventos y controles de transformación. Su superficie de capacidad cubre el renderizado de formas vectoriales, la creación de rutas complejas y animaciones de movimiento. El framework incluye un motor de diseño con un modelo de caja flexible, traducción de espacio de coordenadas para un posicionamiento preciso y soporte para renderizado fuera de pantalla multihilo en web workers. También proporciona herramientas para la gestión de escenas, enmascaramiento de elementos y exportación de contenido de canvas a imágenes o JSON. La biblioteca se puede integrar mediante una etiqueta de script estándar o utilizarse dentro de frameworks reactivos como React, Vue y Nuxt.
Provides a specialized system for managing user interactions specifically for 2D canvas shapes and groups.
RmlUi es un renderizador de UI multiplataforma y librería middleware que permite la creación de interfaces de usuario utilizando un subconjunto de HTML y CSS. Funciona como una capa agnóstica de renderizado diseñada para integrar layouts y estilos estándar web en motores de juegos personalizados y aplicaciones embebidas. El framework se distingue por su integración de Lua para lógica y control dinámico, así como por un kit de herramientas especializado para renderizar imágenes SVG y animaciones Lottie. Utiliza un backend de renderizado conectable que desacopla la generación de geometría de la visualización final, permitiéndole generar geometría texturizada para varios pipelines gráficos. El sistema cubre una amplia gama de capacidades, incluyendo un motor de layout de modelo de caja (box-model), un motor de estilos en cascada y enlace de datos (data-binding) para sincronizar modelos con vistas. Proporciona una gestión integral de entrada para ratón, teclado y táctil, junto con servicios de internacionalización para la traducción de texto basada en la configuración regional. Las características adicionales incluyen escalado de alta densidad (high-DPI), composición alfa basada en capas y un conjunto de componentes interactivos como sliders de rango y menús desplegables. El código fuente puede compilarse en binarios WebAssembly para su ejecución en navegadores web.
Configures interactive element properties such as cursor styles and drag-and-drop behavior.
This PHP data collection library is a functional data wrapper and array manipulation framework. It converts arrays, JSON strings, and iterables into chainable collection objects designed for advanced filtering, sorting, and transformation. The library is distinguished by its ability to dynamically extend functionality through the registration of custom methods via closures. It also provides specialized capabilities for hierarchical data modeling, allowing flat datasets with parent-child identifiers to be reconstructed into nested tree structures. The toolkit covers a broad surface of data ma
Filters elements by callbacks, regular expressions, key comparisons, or value conditions.
KineticJS es un framework de JavaScript para HTML5 Canvas y un motor de gráficos 2D. Proporciona un sistema para crear interfaces de usuario interactivas y gráficos 2D mediante la gestión de un grafo de escena de elementos con renderizado dedicado y propagación de eventos. El framework funciona como una biblioteca de interacción con canvas que añade manejo de eventos a aplicaciones basadas en canvas para escritorio y dispositivos móviles. Incluye un renderizador de canvas del lado del servidor, lo que permite dibujar y renderizar gráficos en un entorno de servidor.
Provides a system for building interactive user interfaces and 2D graphics on HTML5 Canvas.
vanilla-tilt.js es una biblioteca de inclinación 3D en JavaScript utilizada para animar elementos web en el espacio 3D. Funciona como una herramienta de animación de interfaz de usuario interactiva que impulsa la rotación y el escalado de elementos basados en el movimiento del ratón o la orientación del dispositivo móvil. La biblioteca se distingue por la simulación de superficies físicas, utilizando un efecto de brillo dinámico para crear reflejos brillantes que se desplazan con el cursor. También incluye un sistema de profundidad de paralaje que desplaza los elementos internos en relación con un contenedor padre para simular capas físicas y espacio tridimensional. El kit de herramientas cubre una amplia gama de capacidades de interacción y animación, incluyendo rotación basada en giroscopio para dispositivos móviles, comportamientos de inclinación configurables y monitoreo del estado de rotación. Proporciona callbacks y eventos personalizados que emiten los grados y porcentajes de rotación actuales a oyentes externos.
Provides configuration options for how elements reset, scale, or initialize angles during interaction.