Deck & Stair Designer

Deck Shape

Shape Main rectangle — width (east–west span)

ft in

Main rectangle — length (north–south span)

ft in

Deck Height

Height above grade (top of decking to the ground)

ft in

House Side

Edge against the house (ledger side)

Boards run parallel to this edge. This edge is excluded from stair placement.

Framing (Posts & Footings)

Beam species/grade Beam size Joist spacing

Joists are assumed 2x10 (real depth used for the Framing view) — not adjustable here, unlike beam size/species and joist spacing above. A 2x12 upgrade option is planned for the future material/labor calculator, not this visual tool.

Stairs

Add a landing at the top of the stairs

Each stair below starts from either the Main Deck or an earlier stair's own landing, and either runs down to Grade or stops at a new Stair Landing of its own — a small independent platform with its own posts and footings, which further stairs can then start from, to any depth. A Stair Landing is a different, separate concept from the deck-level landing bump-out above.

Railings

Include railings

Railing type Railing height (top rail above deck / tread surface)

ft in

Balusters are spaced per each style's real max gap (Westbury: 3-7/8" on straight runs, 3-5/8" on stairs; wood: 4" guard-code max), run along the deck perimeter (skipping the house edge and the stair opening), and raked along both sides of the stairs. "C10" is Westbury's Tuscany model/kit name (3/4" square baluster) — not a color, confirmed from the manufacturer's page. Hexes below are visual approximations of the powder-coat finish, not exact color-chip values.

Decking Color

Color

Placeholder swatches only. Real manufacturer color/texture data (Trex Transcend/Enhance, TimberTech AZEK/Prime+, Deckorators Vault/Voyage, etc.) would replace the COLORS object in the script — one entry per SKU, with a hex fallback plus a texture image URL.

Plan View (Top-Down, to scale)

Angled View Decking Framing