• Line-based — one statement per line, no semicolons required
• Comments start with #
• Blocks use > { to open and } to close
• File extension: .cato
• Entry point: main.cato (auto-executed on the view page)

# This is a comment
console.out("Hello, Cato")

Declared with var.type name = value. Types are descriptive labels — they don't enforce runtime type checks.

var.text greeting = "Hello"
var.number count = 42
var.boolean active = true
var.element btn = element.getById('abc123')

Reassignment:

greeting = "Goodbye"
count = count + 1

Types

Comparison

Math

var.number result = 10 + 5 * 2
var.text msg = "Hello " + "World"

If / Else

if (count > 10) > {
    console.out("big number")
} else > {
    console.out("small number")
}

While

Loops have a 10,000 iteration safety limit to prevent infinite loops.

var.number i = 0
while (i < 5) > {
    console.out(i)
    i = i + 1
}

Define reusable functions with func. Parameters are local to the function. Functions can return values with return.

func greet(name) > {
    console.out("Hello " + name)
}

func add(a, b) > {
    return a + b
}

# Call them
greet("Cato")
var.number sum = add(10, 20)
console.out(sum)

Functions can call other functions:

func double(n) > {
    return n * 2
}

func quadruple(n) > {
    return double(double(n))
}

console.out(quadruple(5))

Scope

• Function parameters are local — they don't overwrite variables with the same name in the outer scope
• Functions can read and modify global variables
• Functions defined in imported files are available after the use statement

Use use to load functions from other .cato files in the same script repo. Imported functions are namespaced under the alias you provide.

use "helpers.cato" as helpers
use "ui.cato" as ui

# Call functions via their namespace
helpers.greet("Cato")
ui.setupUI()
var.number val = helpers.add(10, 20)

How It Works

• use "filename.cato" as alias fetches and parses the file from the script repo
• All func definitions in the imported file are registered under alias.funcName
• Each file is only loaded once (no circular import issues)
• Import order matters — use statements should come before code that depends on them

Multi-File Example

helpers.cato:

func clamp(val, min, max) > {
    if (val < min) > {
        return min
    }
    if (val > max) > {
        return max
    }
    return val
}

main.cato:

use "helpers.cato" as helpers

var.element box = element.getById('mybox')
var.number x = helpers.clamp(500, 0, 400)
box.x = x
console.out("Clamped x to: " + x)

Elements are the custom components placed on the canvas (text boxes, images, buttons, shapes). Reference them by their element ID.

var.element btn = element.getById('abc123')

The element ID is shown in the designer panel and stored in the database.

var.element el = element.getById('myel')
el.x = 100
el.y = 200
el.width = 300
el.height = 150
el.zIndex = 10
el.visible = false

el.hide()
el.show()
el.moveTo(200, 300)
el.resize(150, 50)

el.onClick > {
    console.out("clicked!")
}

Text content displayed on the canvas. Supports Mewize formatting (@mentions, links, emotes) when processed via the designer.

Designer-only: fontFamily (Nunito, Jockey One, monospace, serif) • textAlign (left, center, right)

var.element label = element.getById('mylabel')
label.text = "Hello World"
label.color = "#ff5500"
label.fontSize = 24

Displays an image on the canvas.

Designer-only: alt (accessibility text) • objectFit (contain, cover, fill)

var.element pic = element.getById('mypic')
pic.src = media.getUrl('photo.png')
pic.src = "https://example.com/image.jpg"

A clickable button with a label. Most commonly used with onClick events.

var.element btn = element.getById('mybtn')
btn.text = "Click Me"
btn.color = "#19f5aa"
btn.bgColor = "#47508b"

btn.onClick > {
    btn.text = "Clicked!"
    btn.bgColor = "#5a6aae"
}

btn.onHover > {
    btn.bgColor = "#5a6aae"
}

btn.onLeave > {
    btn.bgColor = "#47508b"
}

A rectangle or circle shape. Useful as backgrounds, dividers, containers, or visual decorations. Can also be a target for media.playVideo().

Designer-only: shape (rectangle/circle) • borderColor • borderWidth • borderRadius

var.element box = element.getById('mybox')
box.bgColor = "#ff0000"

# Use a shape as a video container
media.playVideo('clip.mp4', 'mybox')

Output text to the script output panel on the view page.

console.out("Hello, Cato")
console.out("Count: " + count)
console.clear()

Media files (sound, image, video) are uploaded via the designer's Media panel. Reference them by filename in CatoScript.

Sound

Video

URL

# Background music with sound effects
var.element btn = element.getById('mybutton')
var.element pic = element.getById('mypic')

pic.src = media.getUrl('background.png')

media.setSoundVolume('bgm.mp3', 0.3)
media.setSoundLoop('bgm.mp3', true)
media.playSound('bgm.mp3')

btn.onClick > {
    media.playSound('click.wav')
}

Delayed and repeating execution. Uses the event handler block syntax with a seconds argument.

var.element label = element.getById('mylabel')
var.number count = 0

# Show message after 3 seconds
timer.wait(3) > {
    label.text = "Hello!"
}

# Update a counter every second
timer.interval(1) > {
    count = count + 1
    label.text = "Count: " + count
}

Controls the main content video on video-type creations. The view page uses a custom video player with full script integration.

Playback Control

State Getters

Video Events

# Show/hide elements based on video playback
var.element subtitle = element.getById('sub1')
subtitle.visible = false

video.onTimestamp(5) > {
    subtitle.text = "Welcome to MewGem"
    subtitle.visible = true
}

video.onTimestamp(10) > {
    subtitle.text = "Let's get started"
}

video.onTimestamp(15) > {
    subtitle.visible = false
}

video.onPause > {
    console.out("Video paused at " + video.getTime())
}

video.onEnd > {
    console.out("Video finished!")
    subtitle.text = "Thanks for watching"
    subtitle.visible = true
}

Controls the main base content on image-type and text-type creations. This is the primary media set when the creation was created — not an element added in the designer.

For video and audio creations, use video.* and the audio player instead.

Image Content Properties

Text Content Properties

Content Events

Works on both image and text base content.

# Play a sound when the base image is clicked
content.onClick > {
    media.playSound('meow.mp3')
}

# Change text content color on hover
content.onHover > {
    content.color = "#19f5aa"
}

content.onLeave > {
    content.color = "#ffffff"
}

# Swap the base image on click
content.onClick > {
    content.src = media.getUrl('alternate.png')
}

Controls the profile page elements when CES is used on a user profile. Available only on profile-type creations.

Read-Only Properties

Live Properties (read current state)

Writable Properties (assignment syntax)

Methods

State Persistence

Events

# Greet visitors (free)
profile.onVisit > {
    if (profile.isVisitorLoggedIn == true) > {
        profile.statusText = "Welcome, " + profile.visitorName + "!"
    } else > {
        profile.statusText = "Welcome to my profile!"
    }
}

# Dynamic theming (requires membership)
profile.setBoxGradient("#1a1a2e", "#2d2d5e", 135)
profile.setTextColor("#e0e0ff")
profile.setUsernameColor("#19f5aa")

# Persistent visit counter
var.number visits = profile.getState("visitCount")
visits = visits + 1
profile.setState("visitCount", visits)
profile.bioText = "Profile views: " + visits

Visitor messaging system for profile pages. Allows logged-in visitors to leave messages on a profile (like a guestbook).

# Simple guestbook
var.element msgLabel = element.getById('messages')
var.element postBtn = element.getById('postbtn')
var.element input = element.getById('msginput')

postBtn.onClick > {
    visitor.postMessage(input.text)
    input.text = ""
}

Interactive Button Demo

# Interactive button demo
var.element btn = element.getById('mybutton')
var.element label = element.getById('mylabel')
var.number clicks = 0

console.out("Script loaded!")

btn.text = "Click me"
label.text = "Clicks: 0"

btn.onClick > {
    clicks = clicks + 1
    label.text = "Clicks: " + clicks
    console.out("Click #" + clicks)

    if (clicks == 10) > {
        btn.text = "Done!"
        btn.color = "#ff0000"
    }
}

btn.onHover > {
    btn.bgColor = "#5a6aae"
}

btn.onLeave > {
    btn.bgColor = "#47508b"
}

Interactive Video with Controls

# Interactive video with button triggers
var.element skipBtn = element.getById('skipbtn')
var.element label = element.getById('timelabel')

skipBtn.onClick > {
    video.skipForward(10)
}

video.onTimeUpdate > {
    var.number t = video.getTime()
    label.text = "Time: " + t
}

Video with Shape Container

# Play video inside a shape element
var.element frame = element.getById('videoframe')

frame.onClick > {
    media.playVideo('intro.mp4', 'videoframe')
    media.setVideoLoop('intro.mp4', true)
}

1. Content is viewed at /view/{name}
2. Engine loads the content, elements, and script repo
3. main.cato source is sent to the processor for parsing
4. Parser returns an AST (abstract syntax tree)
5. Client-side runtime executes the AST against the DOM elements on the canvas
6. Event handlers are registered and fire on user interaction