Tags

In Rhyme, certain special characters are prefixes that tell the system what kind of thing you’re referencing or how you want something to look. You’ll see them as arguments to actions — referencing icons and sounds — and as style modifiers that change how an element looks.

Icons — !

The ! (bang) prefix references an icon by name.

!mdi:home
!mdi:download
!mdi:check-circle

The full format is !iconset:iconname. The default icon set is mdi (Material Design Icons), so you can drop the prefix and just write:

!home
!download
!check-circle

Pass an icon wherever an action accepts one:

.icon !home
.button "Go home" !home

Icons inside text strings

You can embed an icon directly inside a string using parentheses:

.text "Tap (!home) to return home"
.text "(!mdi:check #green) All done"

The format is (!iconname) or (!iconname #color). The icon renders inline within the text, like an emoji in a sentence.

To browse available icon names, visit materialdesignicons.com.

Sounds — ~

The ~ (tilde) prefix names a sound resource. Load it from a URL first, then trigger it by name:

load-audio ~bell "https://example.com/bell.mp3"
play-audio ~bell

The name after ~ is yours to choose — ~bell, ~click, ~bgmusic. Whatever name you give when loading, use the same name when controlling playback.

Action	What it does
load-audio ~name "url"	Loads a sound from a URL
play-audio ~name	Plays the sound once
loop-audio ~name	Plays the sound on repeat
pause-audio ~name	Pauses playback
resume-audio ~name	Resumes from where it paused
stop-audio ~name	Stops and resets to the beginning
set-audio-volume 75	Sets the volume (0 = silent, 100 = full)

Style modifiers — -

Dash modifiers change how an element looks. They go after the action and its content, as trailing tokens:

.text "Important" -bold
.text "Fine print" -muted
.text "SALE" -uppercase
.text "Old price" -strike

You can stack multiple modifiers on the same action:

.text "Warning" -bold -uppercase

Common modifiers:

Modifier	Effect
-bold	Bold text
-em	Italic / emphasis
-muted	Dimmed, secondary-level text
-strike	Strikethrough
-uppercase	Converts text to all caps
-mono	Monospace font
-paren	Wraps the content in parentheses

Inline text formatting

Inside a string, you can apply styles and create links using (...) syntax.

Styled text — ('...')

.text "Please ('do not' #red -bold) share your password"
.text "This feature is ('experimental' #orange)"

The format is ('text' #color -modifier). The color and modifier are optional.

Inline links — ([...])

.text "Tap ([settings]) to change your preferences"
.text "Visit ([https://example.com] -new) our website"

For a block name, [settings] navigates to that block when tapped. For a URL, it opens the link. Adding -new opens it in a new tab.

Placeholder text — (fake)

During development, you can fill space with realistic-looking dummy text:

.text "(fake 10 words)"
.text "(fake 2 sentences)"

Useful for prototyping layouts before real content is ready. Placeholder text does not appear in published apps.

Element and shape modifiers — .

The . prefix has two roles.

As a statement opener, it names the element to render:

.text "Hello"
.button "Submit"
.row

As a chained modifier, multiple dots before an element name control its shape and position:

.circle.inset-image !home
.right.rounded.inset-image "https://example.com/photo.jpg"

Common shape modifiers: .circle, .rounded, .right, .soft. They chain directly to the element name with no spaces.

Images

Images are passed to element actions as URL strings. There’s no special prefix character:

.image "https://example.com/photo.jpg"
.image value [$profile-photo]

There is no syntax for embedding an image inline within a text string — images are always standalone element actions.

---

Quick reference

Type	Prefix / syntax	Example	What it produces
Icon	!	!home, !mdi:download	Renders a named icon
Inline icon	(!...) in a string	"Tap (!home)"	Icon embedded in text
Sound	~	~bell	Names an audio resource
Style modifier	- after action	.text "hi" -bold	Changes element appearance
Inline styled text	('...' #color)	"('warning' #red)"	Colored/styled text span
Inline link	([...])	"([settings])"	Inline navigation link
Placeholder	(fake N words)	"(fake 5 words)"	Dev-only dummy text
Element action	. prefix	.text, .button	Renders a UI element
Shape modifier	.chained	.circle.inset-image	Controls element shape
Image	(none)	"https://…"	URL passed as argument