Templates & styling

The @{} block is the template. Use ordinary expressions for escaped text, @if for branches and @for for iteration. Props are checked through the native TypeScript content mapper. In client lists, stable unique string or number keys preserve row identity when items move.

export default function List({ names }: { names: string[] }) @{
  <section>
    @if (names.length === 0) {
      <p>No names yet.</p>
    } @else {
      <ul>
        @for (const name of names; key name) {
          <li>{name}</li>
        }
      </ul>
    }
  </section>
}

Import the namespace from renku/stylex, declare styles with stylex.create, and apply stylex.props spreads. The app needs no separate StyleX dependency. The build extracts rules into assets.stylesheet.

import * as stylex from "renku/stylex";

const styles = stylex.create({
  panel: {
    padding: 24,
    color: "#047857",
    backgroundColor: "#edf7f2",
    borderRadius: 3,
  },
});

export default function Panel() @{
  <aside {...stylex.props(styles.panel)}>
    Styles are compiled into the generated stylesheet.
  </aside>
}

Author templates in .tsrx, not JSX/TSX or HTML strings. Raw CSS, inline styles and authored classes are unsupported. StyleX can produce classes and custom properties as compiler output. Shared tokens belong in .stylex.ts files and can be imported by server and client components.

renku build runs TypeScript before bundling; compiler diagnostics enforce template rules and client import boundaries. Invalid state writes during setup or reactive reads are caught by runtime guards. The proposed typed async/context effect system is still research, not a feature of the current API.