Your First App

Let’s build something real! In this guide, we’ll create a simple greeting app that demonstrates the basics of Rhyme.

What We’ll Build

A friendly app that:

• Asks for your name
• Remembers it
• Gives you a personalized greeting
• Shows a fun animation

The Code

Here’s the complete app:

start greeting-app

# Welcome screen
.title "Welcome to Rhyme!"
.text "Let's get to know each other"

# Get the user's name
.text-field => $name
  -label: "What's your name?"
  -placeholder: "Enter your name"

# Greeting button
.button "Say Hello" -primary => 
  if $name
    .title "Hello, " + $name + "!"
    .text "Welcome to the world of Rhyme apps!"
    confetti
  else
    notify "Please enter your name first" -warning
  end

How It Works

Let’s break down what each line does:

1. start greeting-app - Names your app (every app needs a start block)

2. .title "Welcome to Rhyme!" - Creates a large title using the .title action

3. .text "Let's get to know each other" - Adds regular text below the title

4. .text-field => $name - Creates an input field that:

   • Saves what you type into a variable called $name
   • Has a label and placeholder text to guide the user

5. .button "Say Hello" -primary => - Creates a styled button that:

   • Uses the -primary modifier for a colored button
   • Runs code when clicked (that’s what => means)

6. if $name ... else ... end - Checks if the user entered a name:

   • If yes: Shows a personalized greeting and confetti animation
   • If no: Shows a warning notification

Try It Yourself

1. Copy the code above
2. Open the Rhyme Playground
3. Paste it in and click “Run”
4. Try clicking the button without entering a name first
5. Enter your name and click again to see the greeting and confetti!

Make It Your Own

Try these modifications:

Change the Colors

.button "Say Hello" -primary -green =>

Add More Fields

.text-field => $age
  -label: "How old are you?"
  -type: number

# In the button code:
.text "You are " + $age + " years old!"

Add Sound Effects

# In the button code:
play ~event-success
confetti

Remember the Name

# After showing the greeting:
save $name to "user-name"

# Next time the app loads:
load "user-name" => $name

What You Learned

In this first app, you used:

• UI Actions: .title, .text, .text-field, .button
• Variables: Storing and using data with $name
• Logic: The if action for conditional behavior
• Effects: confetti for visual feedback
• Notifications: notify for user messages

Next Steps

Now that you’ve built your first app:

• Learn about Variables to work with data
• Explore UI Actions to build interfaces
• Try the Input Actions for user interaction
• Check out Flow Actions for app logic

Ready for more? Build a Todo List app or explore the Action Reference!