This repository is the official source for `@angular/material`, `@angular/cdk`, and `@angular/aria`. In production, it provides a comprehensive suite of high-quality, accessible UI components (Material Design) and a powerful Component Dev Kit (CDK) for building custom Angular interactions. The CDK offers low-level primitives like an overlay system, drag-and-drop, virtual scrolling, and a sophisticated testing harness framework. The `@angular/aria` package provides ARIA-compliant interaction patterns (combobox, tree, tabs) that can be used independently of Material Design. Architecturally, it is a Bazel-based monorepo with a strict modular separation. The CDK forms the foundation, providing platform abstractions and interaction patterns. Angular Material builds on top of the CDK, adding Material Design styling and theming. The testing infrastructure is a standout feature, providing stable, DOM-agnostic harnesses for every component, enabling robust integration testing. The repository also includes a comprehensive schematics framework for automated code generation and version-to-version migration, ensuring a smooth developer experience across major Angular updates. The codebase exhibits exceptional craftsmanship. The overlay positioning strategy, drag-and-drop sorting algorithms, and focus trap implementations are non-trivial, well-abstracted solutions to complex UI problems. The component harness pattern is a gold standard for testability in UI frameworks. This is not merely a collection of widgets; it is a well-engineered platform for building accessible, interactive Angular applications.
react-draggable is a mature, well-maintained React library that provides two components for making elements draggable: `<Draggable>` (a high-level, state-managed component that applies CSS transforms) and `<DraggableCore>` (a low-level, stateless primitive that fires raw drag events). The library handles mouse and touch events, supports axis constraints, bounds (parent, selector, or numeric), grid snapping, scaling, and controlled/uncontrolled position modes. It uses CSS transforms for positioning, avoiding conflicts with CSS layout. The codebase was recently migrated from Flow to TypeScript (v4.6.0), ships CommonJS, ESM, and UMD builds, and includes a comprehensive test suite (unit tests in jsdom + browser tests via Puppeteer). The architecture is clean: `Draggable` wraps `DraggableCore`, adding state management and transform application, while utility modules (`domFns`, `positionFns`, `getPrefix`, `shims`) handle DOM operations, position calculations, browser prefix detection, and general helpers. The library is actively maintained with recent commits, a thorough CI pipeline, and detailed documentation including a CSP nonce feature and React 19 compatibility.
React Big Calendar is a flexible, customizable calendar component library for React applications. It provides multiple views (month, week, day, work week, and agenda) for displaying and managing events, with support for event selection, creation, and modification. The library emphasizes customization through pluggable localizers (for date formatting with Moment.js, Globalize.js, date-fns, Day.js, or Luxon), custom component injection points, and a flexible event accessor pattern. The architecture is modular, with the main Calendar component orchestrating various view components (TimeGrid, DayColumn, Month, etc.) and utilities for event layout, slot metrics, and resource management. Drag-and-drop functionality is offered as a separate addon via a higher-order component, allowing users to enable event moving and resizing. The library also includes a toolbar for navigation, popup overlays for overflow events, and comprehensive keyboard and mouse/touch interaction handling. Key strengths include its robust event layout algorithms (handling overlapping events via configurable overlap/no-overlap strategies), extensive prop validation with PropTypes, and a strong testing culture (unit tests with Jest and end-to-end tests with Playwright). The library is actively maintained, supports modern React versions (16.14.0+), and avoids legacy browser dependencies by focusing on modern flexbox-based layouts. However, the extensive customization API and support for multiple date localization libraries contribute to a larger surface area that requires careful documentation and version management. Despite this, the codebase demonstrates solid engineering practices, clear separation of concerns, and reusable utility patterns that can be adapted for other scheduling or timeline-based UIs.
TMagic Editor is a low-code visual page builder framework developed by Tencent. It provides a WYSIWYG drag-and-drop editor for assembling pages from a library of components (Vue and React), configuring properties via schema-driven forms, binding data sources (HTTP, static, mock), attaching JavaScript code blocks for custom logic, and defining event/action flows. The editor outputs a structured DSL (JSON) that can be rendered by separate runtime packages for Vue 2/3 and React, making it suitable for building internal tools, marketing pages, or any form-based application. Architecturally, the project is a monorepo with over 20 packages. The core editor (`packages/editor`) is built with Vue 3 and Element Plus (with an adapter for TDesign), and relies on a canvas stage (`packages/stage`) using the Moveable library for element selection, resizing, and dragging. Property forms are rendered by a headless-capable form engine (`packages/form`) that supports validation, dynamic fields, and complex containers (tabs, tables, group lists). Data sources are managed through an observable pattern (`packages/data-source`) with dependency tracking (`packages/dep`) that can be offloaded to a Web Worker. The system includes a CLI tool (`packages/cli`) for generating runtime entry files and a comprehensive SDK (`packages/editor/src/sdk`) for programmatic DSL manipulation without a browser DOM. Key features include multi-page and page-fragment support, undo/redo with IndexedDB persistence, dependency analysis for incremental updates, a plugin system for extending editor services, and a design abstraction layer that allows switching between UI frameworks. The codebase is well-tested with Vitest, follows modern TypeScript practices, and includes extensive documentation via VitePress. While primarily a developer tool for creating custom editors, it also ships with a playground for demonstration and testing.
GridStack.js is a production-grade TypeScript library for building responsive, drag-and-drop dashboard layouts. The core GridStack class manages widget lifecycle, DOM placement, responsive column switching, nested grids, serialization, and eventing, while GridStackEngine performs collision and positioning math without touching the DOM. The library ships its own drag-and-drop subsystem rather than depending on HTML5 drag-and-drop or jQuery, and it has zero runtime dependencies. Architecturally, the repository is a multi-package collection: a framework-agnostic core, a SCSS styling layer, and official Angular, React, and Vue wrappers. The wrappers integrate through callback hooks such as addRemoveCB, saveCB, and updateCB, plus DOM-stamped host APIs, allowing each framework to dynamically create and destroy widgets while keeping item content mounted during cross-grid drags. Demo applications under demo/, angular/projects/demo, react/src, and vue/src exercise the public API and serve as integration references. The project is actively maintained with a comprehensive Vitest and Playwright test suite, issue-numbered regression tests, and frequent releases. Its main technical debt is the large monolithic gridstack.ts (roughly 3100 lines) and the need to keep three framework wrappers synchronized with core API changes. The Angular wrapper is intentionally pinned to an older Angular major and some legacy build artifacts remain, but the core engine/UI separation, clean utility layer, and callback-based framework integration make many parts genuinely reusable.
Foblex Flow is an Angular-native library for building visual node editors, workflow builders, diagram editors, and AI pipeline UIs. It provides a comprehensive set of components and directives (f-flow, f-canvas, f-node, f-connection, f-connector, f-draggable, f-minimap, f-selection-area, etc.) along with plugins for managed state (undo/redo), accessibility (keyboard navigation), layout engines (dagre, elk), reflow-on-resize, and control schemes. The repository is a monorepo (NX) containing the core library, layout packages, a markdown renderer, a documentation portal with SSR, and multiple example applications (call center, schema designer, tournament bracket, UML diagram, marketing automation). The library is production-ready, actively maintained, and demonstrates high craftsmanship with decoupled architecture (mediator pattern), signal-based state management, Web Worker offloading for connection rendering, and extensive E2E testing.
This repository is a production-grade React calendar component library (`@ilamy/calendar`) designed as a lightweight (~13 KB gzipped) replacement for FullCalendar. It provides month, week, day, year, and agenda views with drag-and-drop, resource scheduling, RFC 5545 recurring events, iCal export, and internationalization. The core ships no CSS and relies on Tailwind CSS v4 with shadcn/ui tokens, making it themeable and tree-shakeable. Architecturally, the library follows a plugin-first pattern: the core implements a pluggable kernel (`IlamyPlugin` interface) that accepts opt-in plugins for recurrence, agenda, and drag-to-create. Each plugin contributes views, event transformations, mutation scopes, and UI slots through a runtime composer. The state management uses a single `CalendarProvider` context that composes four engine slices (config, navigation, data, interaction). The view system is built on two grid primitives (vertical-grid for time-based layouts, horizontal-grid for date-based layouts) that are shared across all views and test harnesses. The codebase demonstrates strong engineering discipline: a huge unit test suite (995+ tests) with regression pinning against issue numbers, deterministic Playwright E2E tests, a CI pipeline with lint/build/type-check/test gates, and agent-driven code review skills. However, there is some duplication of UI primitives between packages, and the dependency on a custom dayjs wrapper for timezone handling introduces fragility. The library is actively maintained with frequent releases and detailed changelogs.
GrapesJS is a client-side visual web page builder framework distributed as a pnpm monorepo. The core package exposes a `grapesjs.init()` entry point that creates an `Editor` backed by `EditorModel`, with pluggable modules for the component tree, iframe-based canvas, CSS rule composer, style manager with custom property types, block/asset/layer/trait managers, command registry, HTML/CSS parsers, code generators, storage adapters, internationalization, keyboard shortcuts, undo/redo, and a plugin system. The CLI package scaffolds, builds, and serves plugins. Although it contains a `DataSources` subsystem, this is an application feature for binding external records to component content, attributes, and styles, not a data-research pipeline; the repository is a software library, not research code.
This repository is a framework-agnostic drag-and-drop library developed by FormKit. It provides a data-first approach where consumers manage a reactive array as the source of truth, and the library handles DOM reordering internally. The core is written in TypeScript and is small (~4KB gzip), with first-class adapters for React, Vue, Solid, and Marko. The architecture consists of a central state machine using WeakMap stores to associate DOM elements with drag state, an event emitter pattern for global and parent-level events, and a plugin system for extensibility (animations, drop-or-swap, insert). Key entry points include the `dragAndDrop` function and framework-specific hooks/composables (e.g., `useDragAndDrop` for React). The library supports native HTML drag-and-drop and synthetic pointer-based dragging for touch devices, with features like multi-drag, drag handles, shadow DOM, and configurable animations. External dependencies are minimal—only peer dependencies for framework adapters and optional Marko runtime. The repository also includes a comprehensive Playwright test suite covering sorting, transfer, animations, and edge cases, plus a Nuxt-based documentation site with live examples for all supported frameworks.
django-mptt-admin is a reusable Django application that provides an interactive tree view interface in the Django admin for models using django-mptt (Modified Preorder Tree Traversal). It enables drag-and-drop reordering, inline editing, adding child nodes, filtering within subtrees, and a grid view alternative. The backend is implemented as a Django admin mixin (`DjangoMpttAdminMixin`) that handles tree JSON serialization, move operations, and changelist customization. The frontend is a TypeScript integration layer that initializes a tree widget (using the tree-element library) and manages CSRF-protected AJAX move requests, loading spinners, and error handling. The repository includes a full example project with tests (unit, view, and Playwright), CI/CD pipelines, and internationalization for multiple languages. It is actively maintained, with recent major version 3.0.0 that replaced the previous jqTree library with a modern jQuery-free tree widget.
SortableJS is a mature, standalone JavaScript library for creating reorderable drag-and-drop lists and grids. It supports mouse, touch, and pointer events across modern browsers and legacy browsers like IE11 and Edge. The library is designed as a modular system with a core (Sortable class) and optional plugins (AutoScroll, Swap, MultiDrag, OnSpill) that can be mounted selectively. It exports UMD and ESM builds, integrates with major frameworks (React, Vue, Angular) via separate adapter packages, and provides a rich API with options for grouping, animation, handles, filtering, and custom events. The codebase demonstrates a well-thought-out plugin architecture, event dispatching, and animation state management, though some build tooling and browser workarounds show its age.
This repository is a WYSIWYG H5 (HTML5) page editor enabling drag-and-drop creation of responsive web pages without coding. Built with React, TypeScript, and Umi 3.0 framework, it features a plugin-based architecture where components are defined by template (metadata) and schema (editable properties). The editor includes a canvas for arranging components, property panels for configuration, and tools for previewing, exporting, and saving templates. A Node.js/Koa backend provides endpoints for saving and retrieving HTML content. The application emphasizes extensibility and performance through patterns like dynamic component loading with caching, schema-driven form generation, and a modular component library. Key reusable components include a dynamic engine for lazy-loading components, an editable list with drag-and-drop reordering, and an on-screen calibration ruler for alignment. While the project is actively maintained, it shows some technical drift in dependency versions (e.g., React 16, Ant Design 4) and relies on a simple in-memory backend that may require adaptation for production use.
VvvebJs is a WYSIWYG web page builder that enables drag-and-drop creation of responsive websites using Bootstrap components. The system provides a visual editor with canvas, property panels, component library, and file management for constructing HTML pages. Key features include inline text editing, code viewing via CodeMirror, media handling, undo/redo functionality, and export capabilities. The architecture follows a modular pattern with core builder logic in libs/builder/builder.js, extensible via plugins and component definitions. Entry points include editor.html for initialization, save.php/save.js for persistence, and upload.php/scan.php for media management. The builder manipulates an iframe as the design canvas while maintaining component state and history for undo/redo operations.
React Mosaic is a production-grade React tiling window manager library. It renders an immutable n-ary tree of split, tab, and leaf nodes as a fully interactive layout with drag-to-resize dividers, draggable panel rearrangement, and tab-group management. The library is the single package `react-mosaic-component`, built with TypeScript, using `react-dnd` for drag-and-drop (with HTML5 and touch backends via multi-backend), and `immutability-helper` for immutable tree updates. It supports controlled and uncontrolled usage, Blueprint theming, and React 16–19. The architecture is centered on a `MosaicNode<T>` union type, a recursive renderer (`MosaicRoot`), and a React context system (`MosaicContext`, `MosaicWindowContext`) that exposes tree manipulation actions. The core tree utility layer (`mosaicUtilities.ts`, `mosaicUpdates.ts`) is well-isolated and thoroughly unit-tested. The codebase is actively maintained, with comprehensive CI/CD (GitHub Actions for PR validation, deployment, publishing), conventional commits, and an Nx monorepo build system. Despite some legacy class component patterns in the main components, the library demonstrates strong engineering with clean type guards, immutable state handling, and extensive test coverage for edge cases. It is suitable for embedding in any application needing complex panel layouts (IDEs, dashboards, monitoring tools).
ember-sortable is an Ember.js addon providing sortable UI primitives for drag-and-drop reordering of lists, grids, and tables. It implements modifiers (sortable-group, sortable-item, sortable-handle) that attach drag-and-drop behavior to DOM elements, with built-in support for mouse, touch, and keyboard input. The architecture centers around a service (ember-sortable-internal-state) that manages state between sortable groups and items, enabling features like visual feedback during drag, automatic container scrolling, and accessibility support including screen reader announcements and keyboard navigation. The library follows Ember addon conventions with a modular structure, clear separation of concerns, and comprehensive test coverage.
This repository is a comprehensive XAML Behaviors library for Avalonia UI, porting the Microsoft.Xaml.Behaviors pattern to the Avalonia framework. It provides a declarative, XAML-friendly way to attach interactive logic (behaviors, triggers, actions) to UI controls without code-behind, covering common patterns such as event handling, data-driven triggers, command invocation, property changes, drag-and-drop, animations, validation, focus management, and more. The library is split into multiple NuGet packages: core interactivity (base classes), interactions (ready-to-use triggers/actions), custom interactions (control-specific behaviors), drag-and-drop, draggable elements, events, animations, responsive layout, scripting, and ReactiveUI integration. A key innovation is the use of Roslyn source generators to produce strongly-typed, reflection-free versions of actions and triggers, improving AOT compatibility and compile-time safety. The architecture follows a layered design: the foundation is the `Avalonia.Xaml.Interactivity` namespace with `Behavior`, `Trigger`, `Action` base classes and the `Interaction` static class for attaching behaviors. On top of that, `Avalonia.Xaml.Interactions.Core` provides common triggers/actions like `EventTriggerBehavior`, `InvokeCommandAction`, `ChangePropertyAction`, and `DataTriggerBehavior`. The `Custom` package adds hundreds of specialized behaviors for controls (e.g., `AutoCompleteBoxOpenDropDownOnFocusBehavior`, `SplitViewStateBehavior`, `FocusTrapBehavior`). Drag-and-drop is handled by a dedicated framework with `DropHandlerBase`, `ManagedDragDropService`, and behaviors like `PanelDragBehavior`. Animations are built using Avalonia's composition API, with helpers like `AnimationFactory` and `FluidMoveAnimation`. The source generators in `Xaml.Behaviors.SourceGenerators` produce typed wrappers from attributes like `[GenerateTypedAction]` and `[GenerateTypedTrigger]`, reducing boilerplate and runtime reflection. Key entry points for consumers are the `Interaction.Behaviors` attached property in XAML, the `Interaction.ExecuteActions` method, and the various behavior/trigger/action classes. The library depends on Avalonia UI (StyledElement, Control, Visual, TopLevel, etc.) and optionally on ReactiveUI. It includes extensive documentation via DocFX, sample applications demonstrating all features, and unit tests using Avalonia's headless testing infrastructure. The codebase is well-structured with clean abstractions, though its large surface area and reliance on internal Avalonia APIs present some maintenance risks.
ReactPage (formerly ORY Editor) is a production-grade WYSIWYG page editor built in React. It provides a visual drag-and-drop interface for composing page layouts from a plugin system of content and layout cells. The editor stores its state as a structured JSON tree (not HTML), enabling versioning, migrations, and server-side rendering. It supports multi-language content, undo/redo, inline editing via Slate, and a read-only mode for lightweight rendering. The architecture is a monorepo with a core editor package, a rich set of content plugins (Slate rich text, image, video, spacer, divider, HTML5 video), a layout plugin (background with gradients/images), and a ReactAdmin integration. The editor is highly extensible: custom cell plugins can define their own renderers, controls (auto-generated forms via uniforms), cell styles, and data migrations. The Slate plugin itself is extensible via factory functions for marks, blocks, and data plugins. The project is used in production by several companies for CMS-like page building.
This repository provides an Angular wrapper for the dragula drag-and-drop library. It exposes a directive (`[dragula]`) to mark containers as part of a drag group, and a singleton service (`DragulaService`) to configure groups and subscribe to typed RxJS observables for all dragula events. The library supports two-way model binding (`[(dragulaModel)]`) to synchronize dragged data with component arrays, and offers a plugin system for mock drake objects during testing. The architecture cleanly separates concerns: the directive handles DOM registration and model updates, while the service manages group lifecycle and event relay from native dragula callbacks to Angular Observables. It is built with Nx monorepo tooling and includes a demo application, e2e tests, and CI/CD pipelines for building, testing, and publishing to npm. The codebase demonstrates mature Angular patterns, including proper lifecycle management, subscription handling, and typed event emitters.
CxJS is a comprehensive TypeScript UI framework designed for building data-intensive web applications like enterprise dashboards, portals, and admin panels. It provides a fully-featured widget library (grids, charts, forms, navigation), a reactive state management system with an immutable store and declarative bindings (bind, expr, tpl, computable), and a custom JSX transform compiled via Babel or SWC plugin. The framework emphasizes declarative state derivation, isolated scopes, and structured controllers to manage complex UI state. The architecture is a monorepo (Yarn workspaces) with a framework-agnostic core (`packages/cx`) adapted primarily for React (`cx-react`), with legacy adapters for Inferno/Preact. Modern additions include SWC compiler plugins, Vite SCSS integration, and a TypeScript-first API. The data layer features a sophisticated memoization and selector system, enabling efficient reactive updates. Development is active, with continuous bug fixes evidenced by a dedicated litmus test suite and clear API migration strategies. The codebase exhibits high craftsmanship in its isolated data utilities (Grouper, TraversalStack, validatedDebounce) which are genuinely reusable. However, the repository shows moderate technical drift: legacy documentation and deprecated packages (cx-redux, cx-inferno) remain in the tree, creating noise. Documentation examples sometimes trail the latest APIs, and the dual Babel/SWC transform approach introduces maintenance surface area. Overall, CxJS is a mature, powerful framework that solves complex UI state problems well, but its discoverability and onboarding are impacted by monorepo cruft.
Vue Cal is a full-featured Vue 3 calendar component library with zero external dependencies beyond Vue itself. It provides multiple views (day, week, month, year, years), event management (create, edit, delete, drag-and-drop, resize), schedules, special hours, extensive localization (50+ languages), dark/light theme via CSS variables, and comprehensive slot-based customization. The library is built entirely with the Composition API and is structured around core composables: `useVueCal` (main state), `useConfig` (prop parsing, locale loading), `useEvents` (event normalization, indexing, overlap detection), `useView` (navigation, cell generation), and `useDragAndDrop` (native HTML5 DnD with cross-instance support). The primary entry point is `src/vue-cal/index.js`, which exports the `VueCal` component, `useLocale` function, and a set of optional Date prototype extensions. Events are passed as an array of objects and reactively rendered; all interactions emit Vue events enriched with context (cell info, cursor position). The library is in active pre-release (v5.0.1-rc.46) with a stable release pending timezone support.