Drag-to-Resize Components

Setting component widths by entering percentage values is accurate but abstract. You type "60" and the component takes up 60% of the row — but whether that feels right only becomes apparent after you see the result. Adjusting usually involves a cycle of type, check, adjust, check again.

Drag-to-resize brings the adjustment into the canvas itself.

How It Works

In the builder, hovering over the right edge of any resizable component reveals a drag handle — a subtle vertical line with a double-headed arrow cursor. Click and drag the handle to resize the component. The component's width changes fluidly as you drag. The adjacent component in the same row adjusts simultaneously, keeping the row's total width at 100%.

As you drag, the current width percentage is shown in a small label near the drag handle. You can see the number updating in real time and release when you reach the proportion you want.

Direct Manipulation

The core advantage of drag-to-resize is directness. Instead of estimating "I want this panel to be about two-thirds of the width" and translating that into "67%" and then evaluating the result, you just drag until it looks right and release. The numeric value follows your visual judgment rather than preceding it.

For many layout decisions, visual proportion is the right input. The precise percentage matters only when you need to match specific widths — for a pixel-perfect header, for matching a design spec. For layout work that's about visual balance, drag-to-resize is faster and more intuitive.

Snap Points

Common proportions snap as you approach them. Dragging near 50/50 snaps to exactly equal widths. Near 33/67, it snaps to thirds. Near 25/75, it snaps to quarters. The snap points make it easy to create common layouts without needing to hit exact percentages manually.

Holding the modifier key while dragging disables snapping for fine-grained adjustments that need to be at a non-standard proportion.

Grid Row Resizing

Drag-to-resize also applies to row heights in grid layouts. Drag the bottom edge of a row to adjust its height. Content within the row reflows to fit the new dimensions. For rows with fixed-height components (images, charts with set aspect ratios), the row height constrains what's visible; for reflowing text content, the row expands to fit.

Accessible Alternative

Drag handles have an accessible keyboard equivalent. Select a component and use the resize shortcut to enter resize mode. Arrow keys adjust the width in 1% increments; Shift + arrow keys adjust in 5% increments. This ensures resizing is fully accessible regardless of input method.