Beyond Drag-and-Drop: Rearranging AI Components Visually

Every demo of an AI app builder eventually reaches the same moment. The user generates a beautiful screen, points at a card near the bottom, and asks: "Can I just drag that to the top?" It's the most natural request in the world. It's also the one request RapidNative — a visual React Native editor that generates production-ready Expo apps from prompts — deliberately doesn't satisfy with a drag handle.

This post is about what we built instead, why it's better than drag-and-drop for AI-generated code, and the actual plumbing — iframe postMessage events, data-bx-path component identification, Redux selection state, and the AI regeneration loop — that makes rearranging components as fast as pointing at them.

Visual editing has evolved past drag handles — the next generation is point, prompt, regenerate. — Photo by Unsplash

Why RapidNative Doesn't Ship Drag-and-Drop

A visual React Native editor built around drag-and-drop sounds obvious until you look at what the dragged element actually is: a chunk of JSX inside a real .tsx file, nested in a component tree, styled with Tailwind classes, wired to Expo Router navigation, and potentially referenced from a Redux slice two folders over. A drag gesture that only reorders the DOM is a lie — the moment the user hits "export code," everything they rearranged visually vanishes because the source file never moved.

The alternative — building a drag system that patches the AST on every drop — is a real piece of software. FlutterFlow, Builder.io, and a handful of visual editors have shipped versions of it, and they're genuinely impressive. But every one of them pays the same tax: the UI library gets locked down to a fixed component palette, custom components become second-class citizens, and the moment you want something off the menu you drop out of the visual editor into a code pane. RapidNative's bet is that an AI agent writing JSX directly against the file tree is both more flexible and faster than any drag-and-drop API we could ship.

The marketing site states this explicitly in the FlutterFlow comparison: "FlutterFlow is a Visual IDE — you build by dragging, dropping, and configuring elements visually. RapidNative is AI-first — you describe the result you want, and we generate the implementation." The AI builder philosophy here is that the fastest path from "I want this card higher" to a working app isn't a drag handle. It's a click.

What "Rearranging Visually" Actually Means in RapidNative

The feature is called Point and Edit inside the product, and the workflow is this: click any rendered element in the live preview, type what you want in a floating input, and the AI regenerates the component — reordered, restyled, replaced, or deleted — in under two seconds. There's no component palette, no drag gesture, no "containers vs. items" conceptual model. If you can see it, you can prompt it.

What is Point and Edit? Point and Edit is RapidNative's visual rearrangement system. Click any rendered element in the mobile preview, describe the change in plain English ("move this card above the hero"), and the AI agent rewrites the JSX in the source file. Changes stream back into the preview within seconds. No drag handles, no component palette.

The preview iframe is the visual canvas — click anything, prompt anything. — Photo by Unsplash

The three moves this replaces

Every one of these would require a different interaction in a traditional visual React Native editor: a drag, a resize handle, a double-click, a right-click menu, a drag-into-container. In Point and Edit, they're all the same gesture — select something, say what you want.

Under the Hood: How Visual Selection Works

The hard part of any visual editor isn't the "visual" — it's the "editor." You need to know which pixel the user clicked, which JSX node that pixel came from, and which byte range in which .tsx file produced that JSX. RapidNative's selection pipeline solves this with three ingredients.

1. data-bx-path — the breadcrumb on every rendered element

When the AI generates a component, every JSX element in the output gets tagged at build time with a data-bx-path attribute whose value is the component's exact source location, formatted as file:line:column. A card rendered from mobile/app/(app)/index.tsx:42:8 carries that string. The preview is a real Lifo-powered Expo bundle rendering real React Native components inside an iframe — the attributes are injected by the Babel transform that runs during the preview build, so the live app behaves identically to the exported one.

This matters because it lets the editor jump straight from a click event to a code location without maintaining a parallel component tree. There's no "virtual DOM of the editor" to keep in sync. The DOM is the component tree, and every node knows where it came from.

2. The iframe postMessage protocol

The preview iframe can't call parent-window functions directly — they're on different origins — so communication happens through window.postMessage. Inside src/modules/editor/client/managers/MessageManager.ts, the parent listens for a small vocabulary of events:

case 'selectLayer':
  this.dispatch(selectLayer(this.unflattenLayerPayload(data.payload)));
  break;

case 'hoverElement':
  this.dispatch(setCurrentElementEventData(this.unflattenLayerPayload(data.payload)));
  break;

When you click an element in the preview, a lightweight overlay script inside the iframe reads data-bx-path from the clicked node (and its ancestors, for context), packages it into a payload with bounding-box coordinates, and posts it to the parent. The parent dispatches a Redux action, and the entire selection state updates in a single frame.

The one tricky bit is path flattening. For fullstack-supabase and fullstack-v2 templates, the Metro bundler flattens the mobile/ prefix out of module paths, so a file physically at mobile/app/index.tsx shows up in the running bundle as app/index.tsx. Artboard IDs in the editor use the unflattened form. The unflattenLayerPayload function in MessageManager prepends the root prefix back on, so the selected layer identity matches what Redux and the file-tree UI expect. This single translation is why "the editor says I clicked a different file than what I clicked" is almost never a bug — it was a bug for about a week in late 2025, and it hasn't been since.

3. Redux selection state

The editor keeps selection as plain state in editorSlice.ts:

selectedLayer: Layer | null;              // currently selected component
inspectMode: boolean;                      // whether click-to-select is enabled
selectedLayerDimensions: Dimensions | null; // bounding box for the highlighter overlay

Three fields, no cleverness. selectedLayer holds the identity (file path, line, column, element tag). selectedLayerDimensions holds the coordinates needed to draw the overlay — this gets recomputed on scroll, resize, and any HMR-triggered re-render. inspectMode is the toggle that turns click-to-select on and off, because once you're deep in a session you want to be able to interact with the preview as a user without the editor stealing clicks.

The SelectedComponentHighlighter component reads these fields and renders the visible result: the outline on the selected element, the small toolbar hovering above it, and the prompt input docked next to the selection. When the user types "move this to the top" and hits enter, the component dispatches an action that assembles the final AI prompt (selection path + user instruction + nearby code context) and hands it to the generation pipeline.

The selected JSX element, its source location, and the user's intent all converge into one prompt. — Photo by Unsplash

The AI That Does the Actual Rearrangement

Once the user has selected and prompted, the request flows to the coding agent. The agent isn't a one-shot LLM call — it's a tool-using loop with access to the file tree. For a rearrangement, it typically does three things:

1. Read the file. Even though the selected data-bx-path tells it exactly which lines are affected, the agent re-reads the full file to see the full component context — adjacent elements, imports, style tokens. This is cheap because the token count of a single screen is almost always under 2k.
2. Decide the edit. For a visual "move this up" the model emits a targeted edit_file or rewrite_file call that reorders JSX siblings, preserving every prop, every event handler, and every key. The system prompt specifically instructs the agent to preserve the exact JSX for anything it isn't being asked to change — "touch only what moved."
3. Verify the output. For fullstack-supabase projects, lints run against the updated file (unused imports, missing props, broken references). If the rearrangement orphans an import or shifts a variable out of scope, the agent catches it in the same turn and fixes it before the write lands.

The write hits the VFS (Virtual File System) — the Supabase-backed files table that is the source of truth for every project. From there, two things happen in parallel: Lifo rebundles the preview and streams the updated bundle into the iframe, and the device/QR workload syncs the same change over to the phone. The round trip from "user types prompt" to "user sees new order on the live preview" is usually under three seconds, which is faster than most drag-and-drop builders animate the drop.

For a deeper look at how user prompts steer the generation pipeline, our write-up on the AI feedback loop that turns user edits into agent instructions walks through the full orchestration layer. The 300ms preview pipeline covers how the rebundled output lands back on screen so quickly.

When You Still Want to Reorder — Three Practical Patterns

Point and Edit's superpower is that it collapses twenty different drag interactions into one gesture. But some of those twenty cases are faster if you know how to prompt them. Here are the patterns that come up constantly in RapidNative sessions, with the exact phrasing that works best.

1. "Move this above/below" + anchor. The AI needs a target. "Move this card up" is ambiguous — above what? "Move this card above the testimonials section" is unambiguous and lands in one shot. If you're not sure what the sibling is called, click it first and read the file path in the inspector toolbar.
2. "Swap these two." Multi-select is on the roadmap; for now, use language. Click the first element, then say "swap this with the pricing card below it." The agent reads the file, finds both JSX nodes, and does the swap in a single edit.
3. "Group these into a card." This is the composition move drag-and-drop can't do without a container palette. Click the first element, say "wrap this and the next two items in a styled card with a shadow and 16px padding." The AI generates a new wrapper component inline, moves the three children into it, and preserves their props. Try doing that with a drag gesture.

The real speedup isn't fewer clicks — it's being able to describe compound changes in one sentence. — Photo by Unsplash

People Also Ask

Can you drag and drop in RapidNative like FlutterFlow?

No. RapidNative deliberately doesn't ship a drag-and-drop component palette. Instead, it uses Point and Edit: click any rendered element in the preview, describe the change in natural language, and the AI regenerates the JSX. This keeps the generated code clean, extensible, and 100% exportable — nothing is locked to a visual builder format.

How does RapidNative identify which component I clicked?

Every rendered element in the preview iframe is tagged with a data-bx-path attribute containing its exact source location (file:line:column). When you click, an overlay script inside the preview reads that attribute and posts a message to the parent editor via window.postMessage. The editor dispatches a Redux action and updates the selection state — all in a single animation frame.

Does Point and Edit work with my own custom components?

Yes. Because the AI reads your actual source files rather than a fixed component catalog, custom components aren't second-class citizens. If your project defines a <FeatureCard> component, you can click any instance of it, say "add a badge in the top-right corner," and the agent will edit either the usage site or the component definition — whichever matches your intent.

Is the rearrangement reflected in the exported code?

Immediately. Every edit — including visual rearrangements — writes directly to the project files table. When you hit Export or clone the GitHub repo, you get the exact file contents the preview has been rendering. There's no "visual-only" state that doesn't persist to code.

What This Buys You Over Traditional Visual Editors

The honest comparison with FlutterFlow-style tools comes down to three trade-offs.

Expressiveness. Point and Edit lets you make compositional edits — "wrap these three items in a styled card," "convert this list to a horizontal scroller with snap," "swap this image for a Lottie animation" — that no drag-and-drop interaction can express in a single gesture. You pay for this with a slight learning curve on prompt phrasing.

Code quality. Because the output is JSX a human would write (because an LLM trained on human-written JSX wrote it), the exported app looks like something you'd ship from a React Native team. Drag-and-drop builders tend to emit configuration JSON that gets translated to code at export time, and the translation is often leaky.

Ceiling. The AI's ability to compose edits is bounded by model capability, not by what a UI designer thought to put in a toolbar. Every new model release automatically expands what Point and Edit can do — a drag-and-drop builder has to ship a new interaction for every new capability.

The trade-off cuts the other way for one specific case: pixel-perfect positional nudges, like "move this 4 pixels left." Drag-and-drop is better than language for sub-10-pixel adjustments. In practice, RapidNative users who want this reach for the code pane (Cmd/Ctrl+E opens it on any selected component) and edit the Tailwind class directly.

Try It Yourself

The fastest way to feel the difference between drag-and-drop and point-and-prompt is to generate a screen and start rearranging. Open the AI mobile app builder, describe any app in a sentence, and once the first screen renders, click the inspect icon and try the three prompts above on real elements. For teams working together on the same app, the real-time collaboration layer means every teammate sees every rearrangement land live.

RapidNative is free to start — 20 credits, no credit card, no "export is a paid feature" trap. See pricing or explore how teams go from idea to App Store with a visual React Native editor that treats drag-and-drop as a legacy interaction, not a core feature.