TSRX Playground

Real oxc-tsrx · oxc-tsrx-fmt. On the published static preview, output is pre-generated; run the local development server for live editing.

playground.tsrx
type Task = { id: string; label: string; done: boolean };

function TaskRow({ task }: { task: Task }) @{
  <li>{task.label}</li>;
}

export function TaskList({ tasks }: { tasks: Task[] }) @{
  const pending = tasks.filter((task) => !task.done);

  <section class="tasks">
    @if (pending.length > 0) {
      <ul>
        @for (const task of pending; key task.id) {
          <TaskRow task={task} />;
        }
      </ul>;
    } @else {
      <p>All done!</p>;
    }
  </section>;
}
pre-generated example · static preview native lint and format run only on the local development server