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.
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
The legal TSX the real projection engine hands to OXC: your bytes copied verbatim, TSRX controls replaced by scaffold markers.
The structural overlay from the byte-oriented scan: every TSRX control token and its byte span.
Raw oxc-tsrx --format=json diagnostics, mapped to your original bytes.
What oxc-tsrx-fmt produces for the current source.
output follows the editor as you type