[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme:hqtui":3},"\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fprofullstack\u002Fhqtui\u002FHEAD\u002Fassets\u002Flogo.png\" alt=\"HQTUI — High Quality Terminal UI for TypeScript\" width=\"560\" \u002F>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\u003Cstrong>High Quality Terminal UI for TypeScript\u003C\u002Fstrong>\u003Cbr \u002F>\nbtop-grade dashboards with a one-import API, dark by default, zero runtime dependencies.\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fhqtui.com\" rel=\"nofollow ugc noopener\">hqtui.com\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@profullstack\u002Fhqtui\" rel=\"nofollow ugc noopener\">npm\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Fhqtui.com\u002Fdocs\" rel=\"nofollow ugc noopener\">docs\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Fbbs.hqtui.com\u002F\" rel=\"nofollow ugc noopener\">discussions\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fnodejs.org\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNode-%E2%89%A5%2022.6-5FA04E?logo=nodedotjs&logoColor=white\" alt=\"Node 22.6 or newer\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fbun.sh\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBun-%E2%89%A5%201.1-000000?logo=bun&logoColor=white\" alt=\"Bun 1.1 or newer\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdeno.com\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDeno-2.x-000000?logo=deno&logoColor=white\" alt=\"Deno 2\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fprofullstack\u002Fhqtui\u002FHEAD\u002Fassets\u002Fscreens\u002Fdashboard.png\" alt=\"HQTUI dashboard\" \u002F>\u003C\u002Fp>\n\u003Cp align=\"center\">\u003Cem>Every screenshot on this page is a real frame from \u003Ccode>hqtui-demo\u003C\u002Fcode>, captured at 2x.\u003C\u002Fem>\u003C\u002Fp>\u003Cp>Run it yourself on whichever runtime you already have:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">bunx @profullstack\u002Fhqtui-demo                    # Bun\nnpx  @profullstack\u002Fhqtui-demo                    # Node 22.6+\ndeno run -A npm:@profullstack\u002Fhqtui-demo         # Deno 2\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Add \u003Ccode>--sim\u003C\u002Fcode> to any of them for a deterministic simulation instead of your real machine.\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch2>Why\u003C\u002Fh2>\n\u003Cp>Terminal apps do not have to look like 1990s ncurses software. HQTUI owns the terminal\ndirectly — ANSI\u002FVT sequences, a typed-array framebuffer, differential rendering, Braille\ngraphics and truecolor — so a dashboard written in TypeScript can look and feel like a\nmodern desktop app while starting instantly and running fine over SSH.\u003C\u002Fp>\n\u003Cp>No ncurses. No browser DOM. No React. No native addon. No network access. Ever.\u003C\u002Fp>\n\u003Ch2>Install\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">bun  add @profullstack\u002Fhqtui        # Bun is the default runtime\nnpm  add @profullstack\u002Fhqtui        # Node 22.6+ works too\ndeno add npm:@profullstack\u002Fhqtui    # Deno 2\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Hello, terminal\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-ts\">import { createApp } from \"@profullstack\u002Fhqtui\";\n\nconst app = await createApp();\n\napp.render(({ ui }) => {\n  ui.panel({ title: \"Hello\" }, (panel) => {\n    panel.text(\"Hello, terminal.\");\n  });\n});\n\nawait app.start();\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>That is the whole API surface you need to start. \u003Ccode>createApp()\u003C\u002Fcode> already gives you a dark\ntheme, truecolor with automatic 256\u002F16-colour fallback, mouse tracking, the alternate\nscreen, resize handling, 30fps adaptive rendering (15 over SSH), and a terminal that is\nrestored no matter how the process dies — Ctrl+C, SIGTERM, or an uncaught exception.\u003C\u002Fp>\n\u003Ch2>A real dashboard\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-ts\">import { createApp } from \"@profullstack\u002Fhqtui\";\n\nconst app = await createApp({ fps: 30 });\n\napp.render(({ ui, theme }) => {\n  ui.grid({ columns: [\"2fr\", \"1fr\"], rows: [14, \"1fr\"], gap: 1 }, (grid) => {\n    grid.panel({ title: \"CPU\" }, (p) => {\n      p.graph({ values: cpuHistory, min: 0, max: 100, fill: true });\n      p.meters(cores.map((value, i) => ({ label: `P${i}`, value })), { columns: 2 });\n    });\n\n    grid.panel({ title: \"Memory\" }, (p) => {\n      p.meter({ label: \"Used\", value: 0.42, text: \"6.7 GiB\" });\n      p.keyValues([{ label: \"Cached\", value: \"4.0 GiB\" }]);\n    });\n\n    grid.panel({ title: \"Processes\", colSpan: 2 }, (p) => {\n      p.table({\n        rows: processes,\n        columns: [\n          { key: \"pid\", title: \"PID\", width: 7, align: \"right\" },\n          { key: \"name\", title: \"Name\" },\n          { key: \"cpu\", title: \"CPU%\", width: 6, align: \"right\" },\n        ],\n      });\n    });\n  });\n});\n\nawait app.start();\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>See it running\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">bunx @profullstack\u002Fhqtui-demo                    # Bun\nnpx  @profullstack\u002Fhqtui-demo                    # Node 22.6+\ndeno run -A npm:@profullstack\u002Fhqtui-demo         # Deno 2\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Any of them takes \u003Ccode>--sim\u003C\u002Fcode> to run a deterministic simulation instead of your real machine.\u003C\u002Fp>\n\u003Cp>Ten sc\u003C\u002Fp>\n",1788652555234]