codebdy/rxdrag

★ 3,760TypeScriptAudience · vibe coderComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((rxdrag))
    What it does
      Drag-drop UI builder
      Visual logic engine
      Web-standard output
    Tech Stack
      TypeScript
      Node.js
      pnpm
    Use Cases
      Build pages visually
      Wire business rules
      Prototype low-code apps
    Setup
      pnpm install
      pnpm dev
      Node 16 required

mindmap root((rxdrag)) What it does Drag-drop UI builder Visual logic engine Web-standard output Tech Stack TypeScript Node.js pnpm Use Cases Build pages visually Wire business rules Prototype low-code apps Setup pnpm install pnpm dev Node 16 required

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Design a web app interface by dragging and dropping components onto a canvas without writing HTML or CSS.

USE CASE 2

Build interactive business logic flows visually using the built-in logic engine.

USE CASE 3

Prototype a low-code internal tool and configure API endpoints through a visual interface.

Tech stack

TypeScriptHTMLNode.jspnpm

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js 16+ and pnpm, API URLs must be configured in a config file inside the apps directory before starting.

License terms are not clearly described in the available documentation.

In plain English

RxDrag is a visual, low-code front-end builder written in TypeScript. The idea is that you can design web interfaces by dragging and arranging components on a canvas, rather than writing HTML and CSS by hand. It also includes a logic engine, which means you can wire up interactive behavior and business rules through a visual interface, not just design static page layouts. The project is built on top of standard HTML, so the output is web-standard rather than tied to a proprietary format. The project is described as highly extensible. The description and linked articles, which are written in Chinese on Juejin and Zhihu (popular Chinese developer platforms), go into detail about the design goals: building a scalable visual low-code front-end that is both thorough and complete. The community discussion channels listed are a QQ group and a WeChat group, suggesting this project is aimed primarily at Chinese-speaking developers. To run RxDrag locally, you install pnpm (a package manager for JavaScript projects), then run pnpm install followed by pnpm dev from the project root. The project requires Node.js version 16 or later. Before starting development, you configure the local and remote API URLs in a configuration file inside the apps directory. The English portion of the README is sparse. It covers the basic setup steps and points to community resources, but does not describe the full feature set, supported component libraries, deployment options, or how the logic engine works in practice. More detail is available in the Chinese-language articles linked at the top of the file.

Copy-paste prompts

Prompt 1

I'm using RxDrag, a TypeScript low-code visual UI builder. How do I add a custom component to the drag-and-drop canvas?

Prompt 2

I cloned RxDrag and ran pnpm dev. Where do I configure the remote API URL in the apps directory config file?

Prompt 3

Using RxDrag's visual logic engine, how do I wire a button click to call an external API and show the response on the page?

Prompt 4

How do I deploy a RxDrag project to a production web server after building it with pnpm?

Open on GitHub → Explain another repo

← codebdy on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.