Perro LogoPerro Engine

GitHub
← Back to Documentation

FUR Syntax

⚠️ Experimental - Pre-Release

FUR uses a bracket-based markup syntax similar to HTML or XML, but with square brackets and a simpler structure. Each component is defined with opening and closing tags.

Basic Structure

FUR files start with a [UI] root tag and contain nested components:

[UI]
    [Panel]
        [Text]
            Hello World
        [/Text]
    [/Panel]
[/UI]

Opening and Closing Tags

Components use opening tags [ComponentName]and closing tags [/ComponentName]:

[Panel]    Content goes here[/Panel]

The closing tag must match the opening tag name exactly, prefixed with /.

Attributes

Components can have attributes that control their appearance and behavior. Attributes are specified in the opening tag using key=value format:

[Panel bg=sea-5 padding=4]
    [Text font-weight=bold text-color=white text-size=xl]
        Styled Text
    [/Text]
[/Panel]

Multiple attributes are separated by spaces. Attribute values can be:

  • Strings: text-color=white
  • Numbers: padding=4
  • Keywords: font-weight=bold
  • Color names: bg=sea-5

Nested Components

Components can be nested to create complex layouts. Indentation is recommended for readability but not required:

[UI]    [Panel bg=slate-8 padding=8]        [Text text-size=lg]            Title        [/Text]        [Panel bg=slate-7 padding=4]            [Text]                Nested content            [/Text]        [/Panel]    [/Panel][/UI]

Component IDs

Components can have an id attribute for identification and signal emission. Components with IDs automatically emit signals when interacted with:

[UI]    [Button id=start]        Start Game    [/Button]    [Button id=pause]        Pause    [/Button][/UI]

A button with id=start will emit a start_Pressed signal when clicked. Scripts can listen for these signals using the on keyword.

Text Content

Text components contain their content between opening and closing tags:

[Text text-color=white]    This is the text content[/Text]

Text content can span multiple lines and will be rendered accordingly.

Complete Example

[UI]    [Panel bg=sea-5 padding=8]        [Text font-weight=bold text-size=xl text-color=white]            Main Menu        [/Text]         [Panel bg=slate-7 padding=4 margin-top=4]            [Button id=start bg=green-6 padding=8]                [Text text-color=white]                    Start Game                [/Text]            [/Button]             [Button id=quit bg=red-6 padding=8 margin-top=4]                [Text text-color=white]                    Quit                [/Text]            [/Button]        [/Panel]    [/Panel][/UI]

Related