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.
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.
GB Studio is a production-grade Electron desktop application for creating Game Boy and Game Boy Color games without writing code. It is a full visual IDE: scene and tilemap editors, sprite/metasprite editor, a music tracker with piano roll and instrument editing, a script event system (event definitions compile to GBVM bytecode), asset management for backgrounds/sprites/tilesets/fonts/sounds, and a debugger with ROM usage analysis. A separate web app (GBS Music) shares core music logic and offers a standalone browser-based tracker. The application is architecturally substantial: the Electron main process hosts multiple isolated renderer windows (splash, project, music, preferences, plugins), the renderer uses React 19 with Redux Toolkit for normalized entity state, Web Workers offload image processing and background scans, and a shared lib layer is reused across desktop and web builds.
Onlook is a browser-based visual editor for building and modifying Next.js + Tailwind CSS websites. It provides a Figma-like canvas where users can directly manipulate React components, with changes written back to source code via AST-based transformation. The application integrates an AI chat assistant that can generate code, edit files, and run terminal commands through a set of well-defined tools (e.g., search-replace, file edit, bash). The monorepo architecture separates concerns into packages for AI agents, code parsing, font management, UI components, database access (Drizzle + Supabase), git operations, and sandbox management (CodeSandbox). It also includes a complete billing system (Stripe), GitHub integration for project import, custom domain management, and a publish/deployment pipeline. The codebase demonstrates strong engineering practices with type-safe tRPC APIs, MobX state management in the editor, extensive use of Radix UI primitives, and a consistent monorepo toolchain (Bun workspaces, ESLint, Prettier). While the editor engine is somewhat monolithic, individual packages like the AST parser, font helpers, and utility library are well-isolated and testable.
ESPHome Designer is a Home Assistant custom component that provides a visual drag-and-drop editor for designing display layouts on ESP32/ESP8266 devices running ESPHome. It supports multiple rendering protocols including native ESPHome C++ lambdas, LVGL, OpenEPaperLink (OEPL), and OpenDisplay (ODP). The editor features a canvas with zoom/pan, snap-to-grid, drag-and-drop, lasso selection, and a property panel for configuring widget attributes. Widgets are organized as plugins, each providing render, export, and lifecycle hooks for all supported output formats. The system can generate complete ESPHome YAML configurations including hardware definitions, sensor registrations, font loading, and display lambdas. The architecture is split between a Python backend (Home Assistant integration) and a JavaScript frontend (Vite-built SPA). The backend provides REST APIs for layout CRUD, entity history proxying, image/RSS proxying, hardware profile management, and PNG rendering. The frontend manages state via an AppState singleton with undo/redo, communicates with the backend through a bridge, and supports offline YAML parsing. An AI integration allows generating layouts from natural language prompts using multiple providers (Gemini, OpenAI, OpenRouter). The codebase demonstrates strong engineering practices with a plugin-based architecture, adapter pattern for multi-format export, schema-driven property panels, and extensive test coverage (200+ Vitest tests plus Python tests). It is actively maintained with CI/CD pipelines, quality gates, and regular releases. While the widget plugin surface is large and some legacy modules coexist with newer code, the overall design is modular and extensible.
This repository implements a Home Assistant custom integration that adds a visual, drag-and-drop card builder for Lovelace dashboards. Users can design custom dashboard cards by composing blocks (text, icons, gauges, charts, weather, etc.) in a canvas, configuring styles, entity bindings, and actions—all without writing YAML or code. The system includes a dedicated panel within Home Assistant, a custom Lovelace card renderer (`custom:card-builder-renderer-card`) for runtime display, and a marketplace for sharing cards via cardbuilder.pro. Architecturally, the project is split into a Python backend (`custom_components/card_builder/`) and a TypeScript/Lit frontend (`frontend/`). The backend handles integration setup, WebSocket APIs for CRUD on cards, presets, media, and account management. The frontend is a single-page application with panel views (dashboard, card list, editor), a designer canvas with Moveable-based manipulation, and a block system where each block declares its configuration, editor UI, and rendering logic. Key subsystems include a style resolver with preset inheritance and entity bindings (direct, map, threshold, condition, template), a drag-and-drop manager with adapters for canvas and containers, a chart data provider for history/statistics, and a document model with versioned migration. The codebase demonstrates high craftsmanship in its block abstraction, style system, and binding engine—patterns that could be extracted for other visual editors. However, some files are large and tightly coupled, with lingering FIXME comments and a few fragile DOM workarounds. The integration is actively maintained, with a clear roadmap and pro version planned, though the external marketplace dependency introduces some risk.
Container Tool Kit (CTK) is a web application that provides a visual editor for Docker Compose and Kubernetes manifest files. Users can create and manage projects by dragging and dropping services, volumes, and networks onto a canvas, editing node configurations through detailed forms, and viewing the resulting YAML/JSON in a synchronized code editor. The backend is built with FastAPI and PostgreSQL, handling project persistence, user authentication (JWT-based), manifest generation (including calling kompose for Kubernetes), and project import from remote YAML URLs. The frontend is a React/TypeScript single-page application using jsPlumb for the interactive canvas, Formik for form management, and Monaco Editor for code editing. The application supports both anonymous and authenticated usage, with features like autosave, visibility toggles, and pagination for project lists.
Icestudio is an open-source graphical FPGA design and programming environment. It allows users to create digital circuits by dragging, dropping, and wiring blocks representing logic elements, I/O, constants, memory, and code. The tool then compiles the design into Verilog, runs the open-source FPGA toolchain (yosys, nextpnr, apio) to generate a bitstream, and uploads it to a wide variety of Lattice iCE40 and ECP5 boards. The application is built as a desktop app using NW.js (Node.js + Chromium) with an AngularJS 1.x frontend, JointJS for diagramming, and a custom plugin system for extensibility. It supports over 60 FPGA boards, includes a package manager (iceHub) for block collections, a serial terminal plugin, a board editor, and an integrated toolchain shell. The codebase is mature but relies on several deprecated technologies (AngularJS, NW.js, Grunt) and lacks automated tests, making modernization risky. Key reusable elements include the event bus, plugin manager, orthogonal wire router, and file system indexer.
Make.md is an Obsidian plugin (manifest id `make-md`) that turns a plain vault into a structured knowledge workspace. In production it registers custom leaf views (Spaces, Navigator, Blink), patches Obsidian's workspace and CodeMirror editor, and maintains a metadata layer called `Superstate` indexed by web workers. It ships a React-based frame layout engine where notes/spaces are rendered as configurable frame trees with style/action expressions evaluated at runtime, an MDB layer that reads and writes SQLite `.mdb` files via sql.js, and a predicate/filter/aggregate system powering table, calendar, list, and chart views. The plugin also includes a custom mathjs-based formula language, an HTML export pipeline, and a D3-driven visualization pipeline.