ReDemon UI: Reactive Synthesis by Demonstration for Web UI

TL;DR

ReDemon UI tackles the challenge of creating reactive web UIs without extensive programming by enabling demonstrations on a static mockup to synthesize React components. It employs an initial enumerative synthesis for simple UIs and falls back to an LLM-based synthesizer for more complex cases, guided by reactive parameters extracted from user timelines. The frontend provides a three-pane interface for sketching, demonstration, and viewing synthesized code, with iterative refinement via additional demonstrations. The approach promises more reliable, user-driven UI synthesis that integrates with standard prototyping workflows and reduces reliance on natural language prompts.

Abstract

ReDemon UI synthesizes React applications from user demonstrations, enabling designers and non-expert programmers to create UIs that integrate with standard UI prototyping workflows. Users provide a static mockup sketch with event handler holes and demonstrate desired runtime behaviors by interacting with the rendered mockup and editing the sketch. ReDemon UI identifies reactive data and synthesizes a React program with correct state update logic. We utilize enumerative synthesis for simple UIs and LLMs for more complex UIs.

Figures (1)

• Figure 1: In demo mode, users can structurally edit the sketch to demonstrate the runtime behaviors of the UI.