Elements and nesting
Use indentation, selectors, attributes, text, and interpolation to describe a component tree.
Every indented line becomes a child of the line above it. Indentation must use spaces; tabs are rejected with a source-located diagnostic.
Hero.btsxbtsx
main.page section#intro.hero h1 Beast p Indentation becomes structure.| BTSX | Meaning |
|---|---|
| section | HTML element |
| Card | Component reference |
| Theme.Provider | Dotted component reference |
| .card | div with class card |
| section.hero | section with class hero |
| section#intro.hero | section with an ID and class |
Attributes live in parentheses and may be separated by spaces or commas. Beast normalizes class to className and combines it with selector shorthand.
Button.btsxbtsx
Button(tone="primary" count={items.length} disabled) ContinueInline text follows a selector. Use #{...} for expressions and a pipe for a line that should always be interpreted as text.
Inbox.btsxbtsx
p Hello, #{user.name}. You have #{messages.length} messages. div.notice | This line is text, not an element selector.