Random Skeleton Screen Layout Generator

Description

Generate static placeholder rectangles inside supplied nonoverlapping component slots with delegated area and bounding-box evidence.

An interface fixture makes content and state explicit so a consumer can test a rendering or interaction. Literal labels, modeled states, and calculated geometry remain separate from what a browser or assistive technology actually displays or announces.

Generate static placeholder rectangles inside supplied nonoverlapping component slots with delegated area and bounding-box evidence.

When to use this tool

Use this generator to create reproducible skeleton screen layout cases from the supplied model or bank. Inspect the returned evidence before using cases in a test or exercise.

How to use the tool and how it works

Supply canvasWidthPx, canvasHeightPx, slots, textLines, lineHeightPx, lineGapPx, textWidthPercent in the field shapes below. Set seed when you need an explicit replay.
Run the tool and correct any input error. For generated controls, distinguish a successful fixture containing an invalid case from failure to generate the fixture.
Read rectangles, bounds. Use the conventions below and keep answer-bearing fields separate when presenting an exercise.

Validate nonoverlapping in-canvas slots, draw text line counts and percentage widths, and construct image rectangles or square avatar bounds. Return rectangle areas and a delegated overall bounding box in pixel coordinates.^[1]

Delegated operations used for this result: rectangle area; bounding box. Their calculation or parsing conventions apply to the corresponding result fields.^{[2, 3]}

Input field	Meaning and units	Accepted input
canvasWidthPx	Canvas Width Px	Required. Finite number; strictly above 0.
canvasHeightPx	Canvas Height Px	Required. Finite number; strictly above 0.
slots	Slots	Required. Array of Object; no unknown keys.; minimum items 1; maximum items 32.
slots[].id	Literal identifier used to match records, independently of their display labels.	Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 64.
slots[].kind	Kind	Required. Text; one of "text", "avatar", "image".
slots[].x	X	Required. Finite number; minimum 0.
slots[].y	Y	Required. Finite number; minimum 0.
slots[].width	Width	Required. Finite number; strictly above 0.
slots[].height	Height	Required. Finite number; strictly above 0.
textLines	Text Lines	Required. Object; no unknown keys.
textLines.minimum	Minimum	Required. Safe integer; minimum 1; maximum 16.
textLines.maximum	Maximum	Required. Safe integer; minimum 1; maximum 16.
lineHeightPx	Line Height Px	Required. Finite number; strictly above 0.
lineGapPx	Line Gap Px	Required. Finite number; minimum 0.
textWidthPercent	Text Width Percent	Required. Object; no unknown keys.
textWidthPercent.minimum	Minimum	Required. Safe integer; minimum 1; maximum 100.
textWidthPercent.maximum	Maximum	Required. Safe integer; minimum 1; maximum 100.
seed	Optional numeric seed; takes precedence over context randomness. Without either, use the fixed tool.io default seed.	Optional. Safe integer.

Output field	Interpretation	Returned shape
rectangles	Rectangles	Required. Array of Object; no unknown keys.; minimum items 1; maximum items 256.
rectangles[].slotId	Slot Id	Required. Text.
rectangles[].kind	Kind	Required. Text; one of "text", "avatar", "image".
rectangles[].x	X	Required. Finite number; minimum 0.
rectangles[].y	Y	Required. Finite number; minimum 0.
rectangles[].width	Width	Required. Finite number; strictly above 0.
rectangles[].height	Height	Required. Finite number; strictly above 0.
rectangles[].areaPxSquared	Area Px Squared	Required. Finite number; strictly above 0.
bounds	Bounds	Required. Object; no unknown keys.
bounds.minX	Min X	Required. Finite number.
bounds.minY	Min Y	Required. Finite number.
bounds.maxX	Max X	Required. Finite number.
bounds.maxY	Max Y	Required. Finite number.
bounds.width	Width	Required. Finite number.
bounds.height	Height	Required. Finite number.
randomness	Replay metadata: source is seed or context; seed is the normalized 32-bit seed or null for a context source.	Required. Object; no unknown keys.
randomness.seed	Optional numeric replay seed; normalization and precedence are explained below.	Required. Safe integer. or Null.
randomness.source	Source	Required. Text; one of "context", "seed".

An explicit safe-integer seed takes precedence over injected context randomness and is normalized to an unsigned 32-bit integer. With no seed and no context source, replay uses the fixed tool.io default seed. A context source must return finite values from zero inclusive to one exclusive; its advancing state must be retained separately. randomness records the source and normalized seed, or null for context. These generators are not cryptographic random sources.

json

{
  "input": {
    "canvasWidthPx": 200,
    "canvasHeightPx": 60,
    "slots": [
      {
        "id": "title",
        "kind": "text",
        "x": 0,
        "y": 0,
        "width": 120,
        "height": 40
      },
      {
        "id": "avatar",
        "kind": "avatar",
        "x": 140,
        "y": 0,
        "width": 40,
        "height": 40
      }
    ],
    "textLines": {
      "minimum": 2,
      "maximum": 2
    },
    "lineHeightPx": 10,
    "lineGapPx": 5,
    "textWidthPercent": {
      "minimum": 50,
      "maximum": 100
    },
    "seed": 42
  },
  "output": {
    "rectangles": [
      {
        "slotId": "title",
        "kind": "text",
        "x": 0,
        "y": 0,
        "width": 86.4,
        "height": 10,
        "areaPxSquared": 864
      },
      {
        "slotId": "title",
        "kind": "text",
        "x": 0,
        "y": 15,
        "width": 111.6,
        "height": 10,
        "areaPxSquared": 1116
      },
      {
        "slotId": "avatar",
        "kind": "avatar",
        "x": 140,
        "y": 0,
        "width": 40,
        "height": 40,
        "areaPxSquared": 1600
      }
    ],
    "bounds": {
      "minX": 0,
      "minY": 0,
      "maxX": 180,
      "maxY": 40,
      "height": 40,
      "width": 180
    },
    "randomness": {
      "seed": 42,
      "source": "seed"
    }
  }
}

Limitations and assumptions

Worst-case text lines must fit their slots and generated rectangle count is bounded. Avatar output is a square placeholder, not an image crop. This does not measure font layout or render a loading screen.
A replay requires the same complete input and implementation. Randomized construction does not guarantee uniform coverage of every feasible output; finite samples can repeat unless a distinct-selection rule is explicitly stated.
The field tables state structural bounds; cross-field constraints and bounded search or output budgets also apply. Unknown keys are rejected where the object contract disallows them. Input errors are distinct from null fields and deliberate invalid controls in a successful output.

Alternative or Complementary methods

For a supplied example, inspect the returned construction or delegated check directly. To evaluate a consumer, also test cases chosen for its own boundaries; a generated finite corpus does not establish exhaustive coverage.

References

Tool behavior and example: Random Skeleton Screen Layout Generator — tool.io
Calculation or validation: geometry/rectangle-area — tool.io
Calculation or validation: geometry/bounding-box — tool.io

Similar or alternative tools

Random Landmark Region Layout Fixture Generator
Assemble caller landmark templates in sampled order with optional repeated-role label controls, retaining lexical attributes and exact same-tag label collisions without a document accessibility verdict.
Random Heading Hierarchy Mutation Corpus Generator
Mutate caller heading sequences at a constructible interior position to introduce an upward skip, retaining baseline and mutated markup and the existing outline heuristic.