We present a new technique for synthesizing dynamic, constraint-based visual layouts from examples.
%
Our technique tackles two major challenges of layout synthesis.
%
First, realistic layouts, especially on the web, often contain hundreds of elements,
so the synthesizer needs to \emph{scale} to layouts of this complexity.
%
Second, in common usage scenarios, examples contain \emph{noise},
so the synthesizer needs to be tolerant to imprecise inputs.
%
To address these challenges we propose a two-phase approach to synthesis,
where a \emph{local inference} phase rapidly generates a set of likely candidate constraints that satisfy the given examples,
and then a \emph{global inference} phase selects a subset of the candidates that generalizes to unseen inputs.
%
This separation of concerns helps our technique tackle the two challenges:
the local phase employs \emph{Bayesian inference} to handle noisy inputs,
while the global phase leverages the \emph{hierarchical} nature of complex layouts
to decompose the global inference problem into inference of independent sub-layouts.

We implemented this technique in a tool called \textsc{Mockdown}
and evaluated it on nine real-world web layouts,
as well as a series of widespread layout components % extracted from the web layouts.
and an existing dataset of 644 Android applications.
%
Our experiments show
that \textsc{Mockdown} is able to synthesize a highly accurate layout for the majority of benchmarks
from just three examples
(two for Android layouts),
and that it scales to layouts with over 600 elements,
about 30x more than has been reported in prior work on layout synthesis.