AGS

Features

Use a familiar language

AGS uses the world's most used langauge: JavaScript/TypeScript. The rendering library which let's you use an XML like syntax in JavaScript is inspired by web frameworks such as React and Solid.

tsx

function Bar() {
  const [counter, setCounter] = createState(0)
  const time = createPoll("", 1000, "date")

  return (
    <window visible anchor={TOP | LEFT | RIGHT}>
      <centerbox>
        <label $type="start" label={time} />
        <button $type="end" onClicked={() => setCounter((c) => c + 1)}>
          <label label={counter((c) => `clicked ${c} times`)} />
        </button>
      </centerbox>
    </window>
  )
}

Batteries included

Most common operations and queries you want to do are available from Astal libraries. With most of the backend code provided, all you have to worry about is building the UI.

tsx

function BatteryLabel() {
  const percentage = createBinding(Battery.get_default(), "percentage")
  return <label label={percentage((p) => `${Math.round(p * 100)}%`)} />
}

function MediaPlayers() {
  const players = createBinding(Mpris.get_default(), "players")
  return (
    <For each={players}>
      {(player) => (
        <button
          label={createBinding(player, "title")}
          onClicked={() => player.play_pause()}
        />
      )}
    </For>
  )
}

Styled with css

GTK supports styling with CSS. AGS also provides support for SASS. Although it's only a subset of what you can do on the web, most things you'd want are supported, such as CSS variables, keyframes, transforms, and more.

List of supported CSS features

css

button {
  animation: wiggle 2s linear infinite;
}
@keyframes wiggle {
  0% { transform: rotateZ(0); }
  7% { transform: rotateZ(0); }
  15% { transform: rotateZ(-15deg); }
  20% { transform: rotateZ(10deg); }
  25% { transform: rotateZ(-10deg); }
  30% { transform: rotateZ(6deg); }
  35% { transform: rotateZ(-4deg); }
  40% { transform: rotateZ(0); }
  100% { transform: rotateZ(0); }
}