Projects sharing features with Craft.js

react-draggable is a drag and drop library and coordinate-based position manager for React. It functions as a component wrapper that adds draggable behavior to user interface elements, enabling them to be moved via mouse or touch interactions. The library provides touch-enabled interaction tools that unify pointer events across desktop browsers and touch screen devices. It utilizes CSS transforms to handle element movement and coordinate tracking. The system covers movement constraints such as axis restriction and boundary clamping to confine elements within specific areas. It includes posit

react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit

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

Builder is a low-code web platform and content management system designed for the visual construction of responsive websites. It functions as an artificial intelligence-powered design tool that translates natural language prompts into structured page layouts, while providing a drag-and-drop interface for real-time editing and component arrangement. The platform distinguishes itself by integrating data-driven development directly into the design process, allowing users to bind interface elements to backend database content without manual coding. It supports extensibility through custom script

h5-Dooring is a suite of no-code tools comprising a content management system, visual page designers, and a JSON-to-HTML generator for creating mobile-optimized websites. It provides a visual page builder for constructing landing pages and interactive sites using a block-based interface, alongside a no-code form builder for creating data collection forms with integrated analysis and export tools. The system utilizes a JSON-to-page transformation process to automatically convert structured data into functional web pages. It features a dedicated designer for mobile landing pages and splash scre

Elementor is a visual page builder for WordPress that provides a drag-and-drop interface for creating responsive layouts and custom themes. It functions as a comprehensive design system manager and theme builder, allowing for the creation of global website components such as headers, footers, and archive pages without writing code. The platform distinguishes itself through a dedicated popup builder with custom trigger conditions and a visual landing page creator that utilizes pre-made kits. It includes a global style registry to synchronize fonts and colors across all site elements and a widg

Vue Page Designer is a framework for building interactive, component-based visual editors within web applications. It provides a drag-and-drop interface that allows users to construct mobile-responsive web layouts by arranging pre-built components onto a canvas, enabling low-code page composition without manual coding for every layout change. The library distinguishes itself through a modular plugin architecture that allows developers to register custom interface elements, expanding the available building blocks for unique design requirements. It utilizes a recursive rendering strategy driven

Brick Design is a low-code page builder framework used to create drag-and-drop visual editors that generate production-ready layout and styling code for user interfaces. It functions as a visual layout engine and UI component orchestrator, providing the tools necessary to manage component constraints, nesting rules, and visual property configurations. The framework includes a dynamic template generator that utilizes logic rendering and expression variables to create reusable, data-driven page templates. It also operates as a multi-device design tool, offering viewport switching and adaptive s

mall-cook is a low-code e-commerce platform and visual page builder designed to create online shopping stores and storefronts without writing manual code. It functions as a schema-driven UI framework that maps JSON property schemas to reusable components for real-time interface generation. The system acts as a multi-platform storefront generator, producing compatible shopping sites for mobile browsers and mini-programs from a single configuration. It utilizes a drag-and-drop interface to orchestrate page layouts and manage component properties. The platform covers e-commerce storefront desig

Puck is a visual page editor and layout tool for React. It functions as a CMS page builder and component orchestrator, allowing for the design and arrangement of structured content pages through a drag-and-drop interface. The system utilizes a pluggable component registry to integrate external React components into the visual canvas. It employs schema-driven mapping and JSON-based serialization to store and persist page structures as portable data objects. The platform covers the domain of no-code page building and CMS content management, providing a visual reconciliation system to synchroni

mobx-react is a library that provides state bindings to connect React components to MobX observable state. It functions as a component state synchronizer, ensuring that user interface elements automatically re-render only when the specific observed data they consume changes. The project enables a decoupled state architecture by moving business logic and domain state into standalone stores, separating data management from the React component tree. It facilitates global state distribution across deep component hierarchies using providers and context to avoid manual prop drilling. The library c

Gods-pen is a Vue.js visual page builder and no-code landing page platform for creating responsive mobile marketing pages. It functions as a dockerized content management system and an extensible component framework, enabling the design and publishing of pages with integrated form collection and analytics tracking. The platform features a component marketplace manager for uploading, downloading, and monetizing reusable UI elements across different projects. It provides a comprehensive system for custom component development, utilizing a scaffolding system and schema-driven property mapping to

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,

luban-h5 is a low-code web framework and visual mobile page builder used to design interactive mobile web pages. It functions as a JSON-based page renderer that converts design configurations into live pages for end-user delivery and includes a visual form builder for creating interactive input fields and tracking submission statistics. The project features a PSD to HTML converter that parses Photoshop files into functional HTML pages to automate the design-to-code workflow. It distinguishes itself through a plugin-based system that allows for the development of custom UI components and speci

interact.js is a JavaScript interaction library used to implement drag and drop, resizing, and multi-touch gestures within web browsers. It provides a specialized interaction framework for scalable vector graphics, allowing these elements to be moved and resized. The library features a multi-touch gesture engine that recognizes complex patterns such as pinch and rotate, and a coordinate snapping engine for aligning elements to grids or restricting movement within boundaries. It also includes a cross-frame state synchronizer to share interaction states and input events across multiple browser

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures. The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. The system provides interactive capabilities for moving items between multiple containers, filtering visibility based

This project is a web-based document editor designed for the creation and formatting of professional resumes. It provides an interactive interface where users can organize content through a drag-and-drop system, allowing for the visual arrangement of document sections and immediate feedback on layout changes. The application distinguishes itself by utilizing a component-based composition model that synchronizes the visual representation of the resume with an underlying data structure. It maintains session continuity by persisting user-defined content directly within the browser, removing the

unstated-next is a lightweight state management library for React that shares state and logic across components. It functions as a tool to transform custom hooks into shared state containers, providing a minimalist approach to synchronizing data without the use of complex external state stores. The project uses a provider-consumer pattern to decouple state definition from its usage. It wraps custom hooks into context containers to reduce manual boilerplate, allowing state and methods to be broadcast from a central provider to deeply nested child components. The system supports state containe

Valtio is a proxy-based state management library and reactive state engine that provides a mutable state store. It allows application state to be updated through direct object mutations rather than immutable patterns, using JavaScript proxies to track changes and trigger updates. For React applications, it includes a synchronization hook that ensures components re-render only when the specific properties they access are modified. The system supports reactive data derivation through computed properties that automatically update when their underlying dependencies change. It maintains reactivity

Builder is a visual content management system and design-to-code tool that transforms visual layouts into functional code for frontend frameworks. It operates as a headless visual editor, allowing for the creation and modification of site layouts through a drag-and-drop interface. The system enables the conversion of design mockups into components for React, Vue, Svelte, and Qwik applications. It decouples layout and design management from the frontend rendering engine, allowing users to update and publish content changes to live applications without redeploying the entire codebase. The plat

GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a

Puck is a headless visual CMS and React visual page editor that provides a drag-and-drop interface for designing page layouts and managing content. It functions as a JSON-based content management system, storing page structures as JSON and exposing them via API for dynamic rendering within applications. The project enables dynamic route authoring by mapping visual editor instances to specific URL paths, allowing content editing for any page. It integrates a visual authoring layer into existing applications to facilitate the design of page structures using custom React components. The system

Draft-js is a framework for building customizable rich text editors within React applications. It functions as a content editable framework that separates the underlying data model from the visual rendering layer, acting as a rich text content engine to manage complex text data and formatting. The project utilizes an immutable state management system to ensure consistent updates and predictable undo history. It manages editor state through persistent data structures, providing an immutable data state manager to prevent accidental mutation. The framework includes capabilities for high perform

Manta is a local-first financial tracker and PDF invoice generator that utilizes a schema-driven form builder to capture and validate structured user information. It serves as a system for managing billing records and invoice statuses directly on the user device to ensure data privacy and offline access. The project features a drag-and-drop document editor and a PDF template management system, allowing users to arrange fields and apply corporate branding without writing code. These tools enable the creation of professional billing documents by injecting structured data into reusable layout sk

Dva is a state management library and client-side application framework designed for building user interfaces with React and Redux. It functions as an asynchronous logic orchestrator and a single page application router, organizing application data through a structured data flow of reducers, effects, and subscriptions. The framework distinguishes itself through the use of generator functions to manage asynchronous workflows and sequential side effects, keeping these operations separate from synchronous state updates. It implements namespace-based model organization to group business logic and

Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux