Write the UI in whatever you want. FSR runs the application.

import { useState } from "react";
import { Box, Spacer, Text, useInput } from "@snapfire/fsr/terminal/ink";
import type { RootProps } from "@generated/client";

export default function Cart({ items }: RootProps) {
  const [rows, setRows] = useState(items);
  const [at, setAt] = useState(0);
  useInput((input, key) => {
    if (key.upArrow) setAt(Math.max(at - 1, 0));
    if (key.downArrow) setAt(Math.min(at + 1, rows.length - 1));
    if (input === "x") setRows(rows.filter((_, i) => i !== at));
  });
  return (
    <Box flexDirection="column" borderStyle="round" paddingX={1}>
      <Text bold>Your cart</Text>
      {rows.map((r, i) => (
        <Box key={r.sku}>
          <Text color={i === at ? "yellow" : undefined}>{r.name}</Text>
          <Spacer />
          <Text>× {r.qty}</Text>
        </Box>
      ))}
    </Box>
  );
}

import type { Ctx } from "@snapfire/fsr/host";
import { file } from "@snapfire/fsr/host";

export async function load({ params }: Ctx<"/">) {
  const cart = JSON.parse(file.read("cart.json"));
  const limit = Number(params.limit ?? 10);
  return { items: cart.items.slice(0, limit) };
}

{
  "items": [
    { "sku": "mug", "name": "Ember mug", "qty": 2 },
    { "sku": "notebook", "name": "Flint notebook", "qty": 1 },
    { "sku": "tote", "name": "Ash tote", "qty": 1 }
  ]
}