UI DSL Parser Test

Type a DSL expression in the left panel to see the parsed data structure on the right.

Example DSL expressions:

[header nav main footer] <header [nav main] footer> [# a b | c d | e] <header/title [nav/menu main/content] footer/info> [a b(2) c] - b gets 2 parts, a and c get 1 part each [a(1/2) b c] - a gets 1/2 part, b and c get 1 part each [header(1/2) <nav1(2) nav2> footer] - nested with ratios

DSL Input

Layout Dimensions

Width:

Height:

Outer Margin (page edge):

Inner Margin (between boxes):

Border Width:

Padding:

Border Radius:

SVG Preview

Waiting for input...

Parsed Output

Waiting for input...