Skip to main content

03 — Drag-and-Drop Technology & Form-Builder UX (Web + React Native)

Research date: 2026-08-15. Version numbers, dates and licenses below were verified against the npm registry (npm view), the GitHub API, and the primary docs cited in Sources. Where a fact could not be verified from a primary source it is marked (unverified).

Summary​

  • @dnd-kit/react 0.5.0 (MIT, published 2026-06-11) is now the maintained line of dnd-kit; the legacy @dnd-kit/core 6.3.1 has had no release since 2024-12-05 and its docs are filed under /legacy. The new docs call it "production ready", but it is still 0.x semver, has a rolling beta dist-tag (0.5.1-beta-20260713), and a Nov-2025 roadmap question about core-vs-react stability is unanswered by the maintainer. Treat it as "stable enough, pin exactly, wrap behind an adapter." [1][2][3][4]
  • The new dnd-kit merges Mouse/Touch into one PointerSensor (touch default = 250 ms delay / 5 px tolerance; mouse = 200 ms delay or 5 px distance), keeps a KeyboardSensor (Space/Enter pick-up, arrows move 10 px, Escape cancel, Space/Enter/Tab drop), and ships an Accessibility plugin with role="button", aria-roledescription="draggable", live-region announcements and customizable screen-reader instructions — all localizable, which matters for Arabic. [5][6][7]
  • Atlassian pragmatic-drag-and-drop 3.0.0 (Apache-2.0, published 2026-08-14) is tiny (~4.7 kB core), framework-agnostic and virtualization-friendly, but is built on native HTML5 DnD; touch behaviour is unreliable per community reports (drops fail, long press-and-hold, no tunable delay), and its accessibility stance is "don't do keyboard drag — add an action menu (Move up/down/to top) + live-region announcements". [8][9][10][11]
  • react-dnd 16.0.1 was last published 2022-04-19; last commit 2025-07-06; 475 open issues; no built-in keyboard/screen-reader path. Do not adopt for new work. @hello-pangea/dnd 18.0.1 (Feb 2025; React 18/19) is a healthy react-beautiful-dnd fork but is lists only — no grids, no independent nested lists. react-aria-components 1.20.0 offers the most complete a11y DnD (mouse, touch long-press, keyboard, screen-reader "virtual drag") but only for its own collections (ListBox/GridList/Tree/Table). [12][13][14][15]
  • Raw HTML5 DnD is a trap for a builder: no reliable touch start, dataTransfer.getData() returns null in dragover (Chrome/Safari), drag image fixed at dragstart, no scrolling while dragging in some engines, browser-specific ghost rendering. Use it only for cross-window/file drops. [16]
  • WCAG 2.2 SC 2.5.7 Dragging Movements (Level AA) requires every drag operation to be achievable with a single pointer without dragging (e.g. select item → click "Move up/down"/"Move to…"). Keyboard support (SC 2.1.1) does not satisfy it on its own. This drives the builder design more than any DnD library choice. [17]
  • React Native: react-native-gesture-handler 3.2.1 (RNGH 3.0 released 2026-05-28, hook-based API, New Architecture only) and react-native-reanimated 4.5.3 (New Architecture only, needs react-native-worklets, peer RN 0.83–0.86); Reanimated 3.x still supports the old architecture but is "no longer actively maintained". Any RN drag/drop in Rasd Forms should assume New Architecture. [18][19][20]
  • RN sortable options: react-native-sortables 1.10.0 (grid/flex, RNGH 2/3 + Reanimated 3/4, both architectures, active, 970★, MIT), react-native-drax 1.1.0 (v1 rewrite on Reanimated 4 + RNGH 3, arbitrary drop zones, cross-list experimental, web supported), react-native-reorderable-list 0.18.1 (FlatList-based, 0.x API), and the well-known react-native-draggable-flatlist 4.0.3 (May 2025, 229 open issues, no New-Arch statement). [21][22][23][24]
  • Builder UX consensus (SurveyJS Creator v3.0.0 — 2026-08-11; Form.io @formio/js 5.5.1; KoboToolbox; Formbricks): three-pane palette / canvas / property inspector, tabbed Designer–Logic–JSON–Preview–Translations, per-component "Edit JSON", conditions-and-actions logic editor with AND/OR groups + fallback, code fallback (XLSForm/JSON) for power users, question library, and undo/redo. Formbricks (12.8k★) is built on @dnd-kit/core 6.3.1 + immer; Form.io uses dragula 3.7.3; Kobo's kpi still uses react-dnd 16 + jQuery UI; SurveyJS has its own DnD core and a transaction-based UndoRedoManager. [25][26][27][28][29][30]
  • Undo/redo: immer 11.1.16 produceWithPatches → [next, patches, inversePatches] (RFC-6902-style {op,path[],value}) is the cheapest correct primitive; zundo 2.3.0 (<700 B, zustand) for temporal stores; Yjs 13.6.32 Y.UndoManager (500 ms captureTimeout, trackedOrigins) if/when collaborative editing (Yjs + y-indexeddb 9.0.12 + Hocuspocus 4.6.0/y-websocket 3.1.0) is added. [31][32][33]

1. Web drag-and-drop libraries​

1.1 dnd-kit: legacy @dnd-kit/core v6 vs new @dnd-kit/react​

Fact@dnd-kit/core (legacy)@dnd-kit/react (new)
Latest / date6.3.1 / 2024-12-05; @dnd-kit/sortable 10.0.0 / 2024-12-040.5.0 / 2026-06-11; beta tag 0.5.1-beta-20260713; peers React 18/19
Packagescore, sortable, modifiers, utilities, accessibility@dnd-kit/react on top of @dnd-kit/dom, @dnd-kit/abstract, @dnd-kit/state, plus @dnd-kit/helpers (array move), @dnd-kit/collision; sibling adapters @dnd-kit/vue, /svelte, /solid
ProviderDndContext + useSensorsDragDropProvider (sensors, plugins, modifiers props; manager passed to handlers)
EventsonDragStart/Over/End/Cancel with active/overonDragStart, onDragOver, onDragEnd with event.operation.source/target and event.canceled
SensorsPointer, Mouse, Touch, KeyboardPointerSensor (mouse+touch+pen), KeyboardSensor, DragSensor (native HTML5, for external drops)
SortableSortableContext + strategy (rectSorting, verticalList, horizontalList, rectSwapping)useSortable({id, index, group, type, accept, handle, transition, collisionDetector}); no SortableContext, strategy inferred; optimistic sorting auto-reverted on cancel; collisionPriority for empty containers
FeedbackDragOverlay componentFeedback plugin (feedback option), plus DragOverlay still available
Plugins in @dnd-kit/dom—accessibility, cursor, feedback, scrolling (auto-scroll), selection, stylesheet
Repo17.5k★, MIT, last push 2026-07-13, 124 open issuessame repo (master now contains only the new packages)

Sources: [1][2][3][4][5][6][7].

Key API details verified from source (packages/dom/src/core):

  • Default keyboard bindings: start: ['Space','Enter'], cancel: ['Escape'], end: ['Space','Enter','Tab'], arrows move by offset: 10 px (legacy default was 25 px). [6]
  • Default touch activation: Delay({value: 250, tolerance: 5}); text-input targets get Delay 200/0; mouse gets Delay 200/10 or Distance 5; dragging from an explicit handle activates immediately. preventActivation avoids starting drags from nested interactive elements (buttons/inputs) — important in a builder where question cards contain inputs. [7]
  • Accessibility defaults: role: 'button', roleDescription: 'draggable', tabIndex: 0; screen-reader instructions and dragstart/dragover/dragend announcements are plain functions you can replace (e.g. Arabic strings, position-based wording). [5][6]
  • Migration guide states legacy Mouse/Touch sensors are merged, SortableContext and CSS.Transform.toString() are gone, and modifiers move to @dnd-kit/dom (RestrictToElement, RestrictToWindow, axis, SnapModifier). It contains no explicit statement on legacy maintenance; the frozen release history speaks for itself. [4]
  • Multiple-container guide: cross-list moves happen in onDragOver using move() from @dnd-kit/helpers; store a snapshot in onDragStart and restore if event.canceled. [7]
  • Legacy virtualization guidance: with react-window/react-virtualized use verticalListSortingStrategy or horizontalListSortingStrategy (the default rectSortingStrategy does not support virtualization); nested SortableContexts need unique ids. [34]

Risk read-out: the discussion "Clarification on roadmap: @dnd-kit/react vs @dnd-kit/core" (opened 2025-11-26) has no maintainer answer as of 2026-08-15 [3]; the repo shows a lot of automated "claude/…" fix branches and steady 0.x releases (0.5.0 in June 2026 with sortable disabled: {draggable, droppable} and sensor deep-equal fixes) [2]. Adopt, pin, and isolate.

1.2 Atlassian pragmatic-drag-and-drop (PDND)​

  • @atlaskit/pragmatic-drag-and-drop 3.0.0, published 2026-08-14 (Apache-2.0). Changelog: 3.0.0 = new direct export paths with deprecated shims (…/adapter/monitor-for-external, …/utils/reorder); 2.0.0 (2026-06-16) dropped TS4 types (TS5 minimum); 1.8.0 (2026-04-17) moved on-top rendering to the Popover API top layer. Companion packages: -hitbox 2.0.1, -auto-scroll 3.0.1, -live-region 2.0.0, -react-drop-indicator, -flourish, -react-accessibility. [8][9]
  • Design: thin wrapper over native HTML5 DnD; ~4.7 kB core, headless, framework-agnostic, "virtualization ready", one-way mirror of Atlassian's monorepo (no external PRs; 12.7k★, 103 open issues). [8]
  • Accessibility guidance (official): arrow-key drag "does not translate well"; instead give each draggable a single "More" (…) menu with move outcomes ("Move to top", "Move to Section B…"), name actions fully for AT ("Move task 'clean dishes' to top of backlog"), announce results with announce() from the live-region package, and manage focus after remounts. It does not cite WCAG numbers and does not address touch. [10]
  • Touch: GitHub discussion #93 reports drops failing ~90% of the time on touch and an over-long press-and-hold with no tunable delay; a Sept-2025 follow-up echoes it; no maintainer response. Native HTML5 DnD on iOS/Android does exist via long-press, but the reports conflict with the README's "full iOS/Android support" claim — treat touch as unverified/weak for a tablet builder. [11]

1.3 react-dnd, hello-pangea/dnd, react-aria​

  • react-dnd 16.0.1 (MIT): last npm publish 2022-04-19; last commit 2025-07-06 ("fix ESM import"); 475 open issues; peers include @types/node. Keyboard/screen-reader support only via third-party discord/react-dnd-accessible-backend. KoboToolbox kpi still depends on it (react-dnd ^16.0.1, react-dnd-html5-backend, alongside jquery-ui ^1.14.2 for the legacy Backbone formbuilder). [12][29]
  • @hello-pangea/dnd 18.0.1 (Apache-2.0, 2025-02-09; peers React 18/19; repo pushed 2026-08-14, 4.0k★): mouse/touch/keyboard, screen-reader announcements, auto-scroll, multi-list, "combine", multi-drag, virtual lists (claims 10 000+ items at 60 fps). Limitations: grid layouts not supported, no independent nested lists across levels — a poor fit for section→question→repeat-group trees. [13]
  • react-aria-components 1.20.0 (Apache-2.0, 2026-07-31): useDragAndDrop for ListBox/GridList/Tree/Table; mouse, touch (long-press), keyboard (Enter to lift, Tab cycles targets, arrows choose position, Enter drops, Escape cancels), and screen-reader virtual drag with announcements; drop positions root/on/before/after; onReorder, onMove (across levels), onInsert; drop operations move/copy/link/cancel; renderDragPreview, renderDropIndicator. Keyboard/SR paths are "implemented from scratch" and thus only work inside the browser window. Excellent for an outline tree panel; not a general canvas DnD engine. [14][15]

1.4 Native HTML5 DnD pitfalls (why every builder wraps or avoids it)​

Verified from a practitioner write-up and consistent with PDND's own workarounds: no touch initiation in desktop browsers, dataTransfer.getData() unreadable during dragover (Chrome/Safari) forcing shadow state, drag image only settable at dragstart and rendered differently per browser (Chrome ignores border-radius, Firefox translucent), removing the dragged node cancels the drag, no page scroll while dragging in some engines, only four cursor variants via dropEffect, Safari needs dataTransfer.items set synchronously. Legit use: dropping files/text from other windows. [16]

1.5 Touch vs pointer, keyboard, screen readers, WCAG 2.2​

  • SC 2.5.7 Dragging Movements (AA): "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential…" Sufficient technique G219; examples: select then click up/down buttons, context menu "Move to…", or type a position number. Independent of SC 2.1.1 (keyboard). [17]
  • Practical pattern used by Atlassian, React Aria and dnd-kit alike: (a) drag handle + activation delay on touch so scrolling still works, (b) keyboard lift/move/drop, (c) an action menu offering the same outcomes, (d) polite live-region announcements using position language ("moved to position 3 of 8 in Section Household"), (e) focus restored to the moved item. [5][10][15][17]
  • RTL nuance: keyboard "left/right" for indent/outdent must flip in Arabic UI; dnd-kit lets you rebind left/right codes per sensor instance. [6]

2. React Native drag-and-drop​

LibraryLatest (date)RequiresArchitectureNotes
react-native-gesture-handler3.2.1 (2026-08-14); legacy tag 2.32.0RN *New Arch only (3.x)3.0 released 2026-05-28: hook-based gestures (onActivate/onDeactivate), React-Compiler-compatible, SharedValues in gesture config, new Touchable; RectButton/BorderlessButton deprecated. [18][19]
react-native-reanimated4.5.3 (2026-07-22); reanimated-3 tag 3.19.5RN 0.83–0.86, react-native-worklets 0.10–0.11New Arch only (4.x); 3.x old arch, "no longer actively maintained"Docs' compat table lists 4.6.x as latest while npm latest is 4.5.3 (4.6.0 is nightly) — minor conflict. Web: worklets run on the JS thread, "efficiency… might be lower". [20][35]
react-native-sortables1.10.0 (2026-07-23), 970★, MITRNGH ≥2 (v3 recommended on iOS New Arch), Reanimated ≥3Old + NewSortable.Grid, Sortable.Flex, Sortable.Layer/Handle/Touchable/Pressable; auto-scroll, layout animations, haptics, insertion/swap strategies; multi-container and web not documented. [21]
react-native-drax1.1.0 (2026-03-23), 705★, MITReact ≥18, RN ≥0.68, Reanimated ^4, RNGH ≥2 (3 recommended)New Arch (Fabric)v1.0 full rewrite: DraxProvider/DraxView/DraxList/DraxScrollView/DraxHandle; arbitrary drop zones, payload filtering, 3 collision algorithms, cross-container reorder (experimental), reduced-motion respected, web supported. [22]
react-native-reorderable-list0.18.1 (2026-07-12), 320★, MITRNGH ≥2.12, Reanimated ≥3.12—FlatList-based, nested lists, drop indicators, auto-scroll; "0.x may introduce breaking changes". [23]
react-native-draggable-flatlist4.0.3 (2025-05-06), 2.2k★, MITRNGH ≥2, Reanimated ≥2.8not statedNestableScrollContainer/NestableDraggableFlatList, decorators; last push 2026-01-21, 229 open issues; community moving to alternatives. [24]
react-native-web0.21.2 (2026-06-02)——DOM-based; @dnd-kit/react/PDND can be used in RN-web builds only via DOM refs — feasible but not documented by either project (inference).

Take-aways: (1) the RN ecosystem has consolidated on RNGH 3 + Reanimated 4, both New-Architecture-only; (2) no RN library provides keyboard/screen-reader drag — the action-menu pattern is mandatory on native; (3) react-native-sortables is the best-maintained pure-reorder option, react-native-drax the only maintained arbitrary drop-zone framework; (4) low-end Android: keep drag as progressive enhancement, use FlashList/LegendList with DraxList if lists exceed ~100 rows.

3. Nested droppables, tree DnD and 200+ items​

  • Data model: flatten the tree (pages → sections → questions → repeat groups) into an ordered array with depth and parentId; render one virtualized sortable list; compute the projected depth from horizontal pointer offset (the classic dnd-kit "sortable tree" approach). The new useSortable group/type/accept fields express legal parents (e.g. a repeat_group accepts question and group, but not page). Legacy needs nested SortableContexts with unique ids or one flat context. [7][34]
  • Collision detection: with nested drop targets, prefer pointer-within/closest-edge over closest-center; new dnd-kit exposes collisionPriority (set Low on containers so items win). PDND uses -hitbox (attachClosestEdge, attachInstruction for trees). [7][8]
  • Performance at 200+ items: virtualize with @tanstack/react-virtual 3.14.9 or react-window 2.3.0; legacy dnd-kit needs verticalListSortingStrategy for virtual lists; hello-pangea and PDND both advertise virtualization; keep the property inspector outside the DnD provider so drag frames only re-render cards; memoize cards on (id, index, isDragging); collapse sections by default above a threshold; keyboard/menu moves are O(1) re-renders and are the fast path on low-end devices. [13][34][36]

4. Builder UX — what the incumbents actually do​

CapabilitySurveyJS Creator 3.0Form.io builderKoboToolbox FormbuilderFormbricksGoogle Forms / Typeform
LayoutToolbox (palette) + design surface + Property Grid; Page NavigatorSidebar groups (basic/advanced/layout/data/premium) + canvas + edit modal"+" under each question → type picker; right-side settings; question libraryCard list, per-block panelsSingle-column card canvas (GF); one-question-per-screen with logic map (TF) (unverified)
TabsDesigner, Preview/Test, Themes, Logic, JSON Editor (ace-builds peer dep), Translations; UI Preset EditorModal tabs Display / Data / Validation / API / Conditional / Logic / Layout; per-component "Edit JSON"Question Options / Skip Logic / Validation; XLSForm code fallbackConditional Logic on block—
Logic UILogic tab (rule list)Conditional tab (simple) + Logic tab (triggers/actions)Skip-logic builder ("Add a condition") or XLSForm expressionconditions (element/variable/hiddenField, ops equals/contains/isGreaterThan/isSubmitted), nested AND/OR connectors, actions jumpToBlock/jumpToEnding (+ require/calculate), ordered rules with fallbackGF: per-option "go to section"; TF: rules + logic map (unverified)
Undo/redoYes — UndoRedoManager with startTransaction/tryMergeTransactionevents addComponent/removeComponent/updateComponentnot documented; asterisk = unsavedimmer-based stateGF: Ctrl+Z (unverified)
DnD engineown dragdrop-survey-elements coredragula 3.7.3react-dnd 16 + jQuery UI@dnd-kit/core 6.3.1 + @dnd-kit/sortable 10 + @dnd-kit/modifiers 9—
Mobile builder"responsive… mobile to desktop" (marketing)nononoGF app: yes
Licenseper-developer commercial (renderer MIT)MITAGPLAGPL/EE (repo license "Other")SaaS

Sources: [25][26][27][28][29][30]. Additional Kobo details: multi-select questions with Ctrl/Cmd-click then "Create group with selected questions"; cascading selects imported by pasting a spreadsheet table; save-to-library for reuse; deploy step separate from save. [28]

Design patterns worth copying:

  1. Three-pane + tabs (SurveyJS): Designer / Logic / JSON / Preview / Translations. Translations as a first-class tab is essential for Arabic/English/French humanitarian forms.
  2. Per-component JSON escape hatch (Form.io "Edit JSON") and a whole-form JSON tab with schema validation, keeping GUI and JSON in sync — mirrors Kobo's GUI ↔ XLSForm dual mode that field teams already know.
  3. Conditions-and-actions logic editor (Formbricks/Kobo) with nested AND/OR, ordered rules, explicit fallback, and "test every branch" via preview.
  4. Question library / templates (Kobo) — humanitarian orgs reuse standard modules (household roster, WASH, protection).
  5. Transaction-based undo (SurveyJS): batch multi-property edits into one undo step; merge consecutive keystrokes into a single entry.

4.1 Undo/redo, versioning/diff​

  • Command pattern implemented with immer patches: enablePatches(), produceWithPatches(state, recipe) → [next, patches, inversePatches]; applyPatches to redo/undo; patches are {op: 'add'|'replace'|'remove', path: (string|number)[], value} (RFC 6902-inspired, array paths). Immer guarantees correctness, not minimality — compress before storing. immer 11.1.16 (2026-08-05). [31]
  • zundo 2.3.0 (2024-11-17) adds temporal undo/redo to zustand stores in <700 B; history-adapter pairs immer with Redux/Zustand. [32]
  • The same patch stream doubles as version diff (store patch batches per save, render a change log "Q12 label changed; Q7 moved from Section 2 to 3") and as a transport for later sync.

4.2 Collaborative editing (CRDT with Yjs)​

  • Yjs 13.6.32 (2026-08-04): model the form definition as Y.Map/Y.Array (or Y.Text for long labels), y-indexeddb 9.0.12 (last publish 2023-11-02, still widely used) for offline persistence, y-websocket 3.1.0 or Hocuspocus 4.6.0 for relay; awareness protocol for presence; Y.UndoManager({captureTimeout: 500, trackedOrigins}) gives per-user undo that ignores remote edits. Liveblocks 3.24.0 is the hosted alternative. [33]
  • Cost: dual state (JSON ⇄ Yjs types), ordering semantics for arrays under concurrent moves, and server infra — likely a Pro-tier feature, not MVP.

4.3 Keyboard shortcuts & mobile-builder feasibility​

  • Common shortcut set (from the products above, exact bindings vary): Ctrl/Cmd+Z / Shift+Z undo-redo, Ctrl/Cmd+D duplicate, Delete/Backspace remove, Alt/Option+↑↓ move, Enter to add next question, Esc to deselect; command palette (Ctrl/Cmd+K) is now expected. Google Forms' exact list could not be fetched (support page 404) (unverified).
  • Mobile builder: SurveyJS claims a responsive builder; Kobo/Form.io are desktop-only. Given dnd-kit's 250 ms touch delay and WCAG 2.5.7, a phone builder should be list-first with action menus and a bottom-sheet inspector, drag as optional enhancement with a visible handle. On RN, react-native-sortables (grid/flex) or react-native-drax cover reorder; nested tree editing on a phone is better done with "Move into…" pickers than free drag.

5. Comparison table — web DnD engines for the Rasd Forms builder​

Criterion@dnd-kit/react 0.5@dnd-kit/core 6.3PDND 3.0hello-pangea 18react-aria 1.20react-dnd 16
Maintenance (2026)active (Jun/Jul 2026)frozen since Dec 2024active (Aug 2026), no PRsactiveactive (Adobe)stale (2022 publish)
TouchPointerSensor, delay/toleranceTouchSensornative long-press, reported unreliableyeslong-pressTouchBackend
Keyboard dragyes (rebindable)yesno (menu pattern)yesyesno
Screen readerlive region + instructionssamelive-region pkgyesyes (virtual drag)no
Nested/treegroup/type/accept, collisionPrioritynested contextshitbox tree instructionsnoTree componentmanual
Virtualizationinferred (DOM-based)list strategiesyesyesyesmanual
Size (approx.)small (multi-pkg)~10 kB core~4.7 kB corelarger (redux)large (collections)medium
Fit for Rasdprimaryfallbacksecondary (external drops)nooutline tree onlyno

Implications & recommendations for Rasd Forms​

  1. Adopt @dnd-kit/react (pin 0.5.x exactly) behind an internal @rasd/dnd-adapter interface (useDraggableItem, useDropTarget, useSortableItem, DndRoot). Keep the adapter thin enough that a switch to legacy core 6.3.1 or PDND is a one-package change; re-evaluate when dnd-kit ships 1.0. [1][2][3][4]
  2. Design for WCAG 2.2 SC 2.5.7 first, drag second: every question/section card gets a "⋯" action menu with Move up / Move down / Move to top / Move to bottom / Move into… / Indent / Outdent / Duplicate / Delete, plus keyboard bindings, plus dnd-kit's KeyboardSensor. Ship this in the core (free) tier — it is also the entire reorder UX for phones and RN. [10][17]
  3. Localize the a11y layer: override dnd-kit screenReaderInstructions and announcements with Arabic/English/French strings using position-based wording; flip left/right key bindings for indent/outdent under dir="rtl". [5][6]
  4. Tree model + flat virtualized list: store the definition as a tree, edit it as a flattened array with depth projection; enforce parent rules via type/accept (page ⊃ section ⊃ question|repeat_group ⊃ question); cap depth (suggest 4) to keep XLSForm/ODK-style exports sane; virtualize with @tanstack/react-virtual when items > ~60; keep the inspector outside the DnD provider. [7][34][36]
  5. Touch tuning: keep dnd-kit defaults (250 ms/5 px on touch), always render a visible drag handle, set touch-action: none only on the handle so the canvas still scrolls; auto-scroll via the scrolling plugin. Verify on a low-end Android device (2 GB RAM class) before GA. [7]
  6. React Native strategy: target New Architecture (RN ≥ 0.83, RNGH 3.x, Reanimated 4.x + react-native-worklets); declare them as peer deps with explicit ranges; use react-native-sortables for in-section reorder and react-native-drax only if cross-zone drag is required; do not support Reanimated 3/old-arch in the builder (renderer can stay dependency-free). [18][19][20][21][22]
  7. Undo/redo via immer patches (command pattern): every builder mutation is a named command producing [patches, inversePatches]; coalesce keystrokes within ~500 ms (SurveyJS tryMergeTransaction, Yjs captureTimeout); persist the last N patch batches to IndexedDB/SQLite for crash recovery; expose history in the JSON code view as a change log. [30][31][33]
  8. Versioning/diff: derive form-version diffs from stored patch batches (RFC-6902-like) and render "what changed since deployed v3" — a feature Kobo lacks and field M&E teams ask for; keep patch paths keyed by stable question ids, not indices. [31]
  9. Builder shell: three-pane (collapsible palette / canvas / inspector) with tabs Designer, Logic, Translations, JSON, Preview; Preview offers device frame + RTL toggle + offline simulation; per-component "Edit JSON" (Form.io) and whole-form JSON with schema validation. [25][26]
  10. Logic editor: conditions-and-actions rules with nested AND/OR groups, ordered evaluation and explicit fallback (Formbricks), applicable to questions and groups (Kobo), with an expression-code mode for XLSForm-literate users; visual "logic map" can be a later Pro feature. [27][28]
  11. Question/section library as a first-class palette group (Kobo pattern) — humanitarian standard modules; store as JSON fragments that drop into the tree.
  12. Collaboration: not MVP. If added (Pro tier), mirror the definition into Yjs types, use y-indexeddb + Hocuspocus, Y.UndoManager with trackedOrigins per user; until then use optimistic locking with version numbers on save. [33]
  13. Avoid: raw HTML5 DnD for the canvas, react-dnd, hello-pangea (no nesting/grids). Consider react-aria's useDragAndDrop only for a dedicated outline-tree panel if you already adopt react-aria-components. [12][13][15][16]
  14. Bundle discipline for low-end Android: dnd-kit and the builder must be code-split from the runtime renderer (field devices load only the renderer); measure @dnd-kit/react + dom + helpers gzip size in CI and fail above a budget (suggest 25 kB).

Sources​

All accessed 2026-08-15.

  1. npm registry @dnd-kit/react (0.5.0, MIT, published 2026-06-11; beta 0.5.1-beta-20260713) and @dnd-kit/core (6.3.1, 2024-12-05) — https://www.npmjs.com/package/@dnd-kit/react , https://www.npmjs.com/package/@dnd-kit/core (verified via npm view)
  2. GitHub releases clauderic/dnd-kit — @dnd-kit/react@0.5.0, @dnd-kit/helpers@0.5.0 (2026-06-11) — https://github.com/clauderic/dnd-kit/releases
  3. Discussion #1842 "Clarification on roadmap: @dnd-kit/react vs @dnd-kit/core" (2025-11-26, unanswered) — https://github.com/clauderic/dnd-kit/discussions/1842
  4. dnd-kit docs — React quickstart & migration guide — https://dndkit.com/react/quickstart , https://dndkit.com/react/guides/migration
  5. dnd-kit legacy Accessibility guide — https://dndkit.com/legacy/guides/accessibility/
  6. dnd-kit source: packages/dom/src/core/sensors/keyboard/KeyboardSensor.ts, plugins/accessibility/defaults.ts, sensors/drag/DragSensor.ts — https://github.com/clauderic/dnd-kit/tree/master/packages/dom/src/core
  7. dnd-kit docs — useDraggable, useSortable, multiple sortable lists; source sensors/pointer/PointerSensor.ts — https://dndkit.com/react/hooks/use-draggable , https://dndkit.com/react/hooks/use-sortable , https://dndkit.com/react/guides/multiple-sortable-lists
  8. atlassian/pragmatic-drag-and-drop README — https://github.com/atlassian/pragmatic-drag-and-drop
  9. @atlaskit/pragmatic-drag-and-drop CHANGELOG (3.0.0 2026-08-14, 2.0.0 2026-06-16, 1.8.0 2026-04-17) — https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/core/CHANGELOG.md
  10. Atlassian Design — Pragmatic drag and drop accessibility guidelines — https://atlassian.design/components/pragmatic-drag-and-drop/accessibility-guidelines
  11. Discussion #93 "Mobile/Touch Support?" — https://github.com/atlassian/pragmatic-drag-and-drop/discussions/93
  12. react-dnd repo (last commit 2025-07-06; 475 open issues) and npm 16.0.1 (2022-04-19) — https://github.com/react-dnd/react-dnd
  13. hello-pangea/dnd README (18.0.1) — https://github.com/hello-pangea/dnd
  14. npm react-aria-components 1.20.0 (2026-07-31) — https://www.npmjs.com/package/react-aria-components
  15. React Aria — Drag and Drop — https://react-aria.adobe.com/dnd
  16. "HTML5 Drag & Drop — Not the API You're Looking For" (sam.today) — https://www.sam.today/blog/html5-dnd-the-api-that-is-gaslighting-you
  17. W3C — Understanding SC 2.5.7 Dragging Movements (WCAG 2.2, Level AA) — https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html
  18. Software Mansion blog — "Introducing Gesture Handler 3.0" (2026-05-28) — https://swmansion.com/blog/introducing-gesture-handler-3-0-hook-based-api-deeper-reanimated-integration-more-9185b0c8e305/
  19. GitHub release react-native-gesture-handler v3.0.0 — https://github.com/software-mansion/react-native-gesture-handler/releases/tag/v3.0.0
  20. Reanimated docs — Compatibility — https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/
  21. MatiPl01/react-native-sortables (1.10.0) and docs — https://github.com/MatiPl01/react-native-sortables , https://react-native-sortables-docs.vercel.app/
  22. nuclearpasta/react-native-drax (1.1.0) — https://github.com/nuclearpasta/react-native-drax
  23. omahili/react-native-reorderable-list (0.18.1) — https://github.com/omahili/react-native-reorderable-list
  24. computerjazz/react-native-draggable-flatlist (4.0.3) — https://github.com/computerjazz/react-native-draggable-flatlist
  25. SurveyJS Survey Creator overview; survey-creator-core 3.0.0 published 2026-08-11 — https://surveyjs.io/survey-creator/documentation/overview
  26. Form.io Form Builder developer guide; @formio/js 5.5.1 depends on dragula ^3.7.3 — https://help.form.io/dev/form-development/form-builder
  27. Formbricks — Conditional Logic docs; repo apps/web/package.json (@dnd-kit/core 6.3.1, immer 11.1.8) — https://mintlify.wiki/formbricks/formbricks/surveys/features/conditional-logic , https://github.com/formbricks/formbricks
  28. KoboToolbox — Formbuilder walkthrough & skip logic — https://support.kobotoolbox.org/formbuilder.html , https://support.kobotoolbox.org/skip_logic.html
  29. kobotoolbox/kpi package.json (react-dnd ^16.0.1, jquery-ui ^1.14.2, immer ^10.1.1) — https://github.com/kobotoolbox/kpi/blob/main/package.json
  30. surveyjs/survey-creator source plugins/undo-redo/undo-redo-manager.ts — https://github.com/surveyjs/survey-creator/tree/master/packages/survey-creator-core/src/plugins/undo-redo
  31. Immer docs — Patches — https://immerjs.github.io/immer/patches
  32. charkour/zundo (2.3.0) — https://github.com/charkour/zundo
  33. Yjs docs — Y.UndoManager; npm yjs 13.6.32, y-indexeddb 9.0.12, y-websocket 3.1.0, @hocuspocus/server 4.6.0 — https://docs.yjs.dev/api/undo-manager
  34. dnd-kit legacy — SortableContext (strategies, virtualization) — https://dndkit.com/legacy/presets/sortable/sortable-context/
  35. Reanimated docs — Web support — https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support/
  36. npm @tanstack/react-virtual 3.14.9, react-window 2.3.0 — https://www.npmjs.com/package/@tanstack/react-virtual , https://www.npmjs.com/package/react-window