tags

Tags are single words prefixed with special characters that provide a succinct but clear shortcut approach in the Rhyme language. These powerful shortcuts are used extensively throughout Rhyme to make your code more readable and easier to write.

what are tags?

Tags combine a special character prefix with a descriptive word to create instant functionality:

Quick to type - Just a few characters give you powerful features
Easy to remember - The prefix hints at what the tag does
Visual clarity - Special characters make tags stand out in your code

tag types

Rhyme includes several types of tags, each with its own special character:

#colors - Color values using the hash symbol
!icons - Icon references using the exclamation mark
%images - Image references using the percent sign

why tags matter

Tags are fundamental to Rhyme’s philosophy of making programming approachable. Instead of remembering complex syntax or importing libraries, you simply use intuitive shortcuts that feel natural.

Explore each tag type to see how they can simplify your Rhyme development!

-keywords

Keywords in Rhyme use a dash (-) prefix to customize the behavior of actions. They act as modifiers that change how an action displays or behaves.

how keyword tags work

Keywords are added after actions to modify their appearance or behavior. You can use multiple keywords on a single line, and the order doesn’t matter:

.text "Hello" -bold -underline
.text "Important!" -bold -red -large
.button "Submit" -primary -disabled

common keywords

Keywords provide quick ways to style and control elements without complex syntax:

#colors

Color tags in Rhyme provide a simple and intuitive way to apply colors to your content using a hashtag-based syntax. Instead of remembering complex hex codes or CSS color names, you can use friendly color tags like #red1, #blue3, or #green2 directly in your Rhyme code.

How Color Tags Work

Color tags follow a simple pattern: #color-name followed by an optional intensity number. For example:

#red - Basic red color (equivalent to #red6)
#red1 - Lightest red variant
#red6 - Medium red variant
#red12 - Darkest red variant (near black)

The Rhyme lexer automatically recognizes these color tags during parsing and converts them into the appropriate color values. This happens at compile time, so there’s no runtime overhead for color processing.

!icons

Icon tags in Rhyme provide a simple way to include icons in your app using an exclamation mark syntax. Instead of dealing with complex icon configurations or imports, you can use friendly icon tags like !home, !mdi:account, or !feather:search directly in your Rhyme code.

How Icon Tags Work

Icon tags follow a simple pattern: ! followed by an icon name, with optional icon set prefix. For example:

!home - Basic home icon using the default icon set
!mdi:account - Account icon from the Material Design Icons set
!feather:search - Search icon from the Feather icon set
!home4 - Home icon with size 4

The Rhyme lexer automatically recognizes these icon tags during parsing and converts them into the appropriate icon references.

%images

Images in Rhyme use a percent sign syntax to make working with visual content simple and intuitive.

coming soon

This section will cover:

How image tags work with the % syntax
Different ways to reference images
Image sizing and positioning
Working with local and remote images
Image optimization and performance
Best practices for images in Rhyme apps

Check back soon for complete documentation on images.

^fonts

Fonts in Rhyme use a caret (^) syntax to make typography simple and expressive.

coming soon

This section will cover:

How font tags work with the ^ syntax
Available font families and styles
Font sizing and weight options
Typography best practices
Custom font definitions
Combining fonts with other styling

Check back soon for complete documentation on fonts.

~sounds

Sounds in Rhyme use a tilde (~) syntax to add audio feedback and effects to your app.

coming soon

This section will cover:

How sound tags work with the ~ syntax
Built-in sound effects library
Playing custom audio files
Sound timing and control
Volume and audio settings
Best practices for audio in apps

Check back soon for complete documentation on sounds.

@resources

Resources in Rhyme use an at (@) syntax to reference and manage external assets and data sources.

coming soon

This section will cover:

How resource tags work with the @ syntax
Referencing external files and assets
Working with data sources
Resource loading and caching
Managing resource dependencies
Best practices for resource management

Check back soon for complete documentation on resources.