ReDemon UI: Reactive Synthesis by Demonstration for Web UI

TL;DR

ReDemon UI allows non-experts to create React web interfaces by demonstrating behaviors on mockups, automatically generating reactive code with correct state logic using synthesis techniques.

Contribution

It introduces a novel demonstration-based approach for synthesizing React applications, combining enumerative synthesis and LLMs for different UI complexities.

Findings

Successfully synthesizes React code from user demonstrations

Supports integration with standard UI prototyping workflows

Uses enumeration and LLMs for different complexity levels

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.