whatisgithub

What is rxdrag?

codebdy/rxdrag — explained in plain English

Analysis updated 2026-06-26

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

In one sentence

RxDrag is a drag-and-drop visual builder for web interfaces that lets you design pages and wire up interactive logic without writing HTML, CSS, or JavaScript by hand.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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.

What is it built with?

TypeScriptHTMLNode.jspnpm

How does it compare?

codebdy/rxdragscribbletune/scribbletunehomarr-labs/homarr
Stars3,7603,7603,763
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity3/52/53/5
Audiencevibe coderdeveloperops devops

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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?

Frequently asked questions

What is rxdrag?

RxDrag is a drag-and-drop visual builder for web interfaces that lets you design pages and wire up interactive logic without writing HTML, CSS, or JavaScript by hand.

What language is rxdrag written in?

Mainly TypeScript. The stack also includes TypeScript, HTML, Node.js.

What license does rxdrag use?

License terms are not clearly described in the available documentation.

How hard is rxdrag to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is rxdrag for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.