1ch

Character-grid UI that runs in the browser. One <term-ui> element turns semantic HTML into a fixed-width terminal render -- boxes, tables, charts, progress bars, status lines -- all from standard tags.

Playground · Docs · npm

Install

npm install 1ch

Use

Register once, then forget about it:

import { registerTermUIElement } from "1ch";
import "1ch/style.css";
registerTermUIElement();

Drop it in with your preferred reactivity provider:

function DeployPanel() {
  const [build, setBuild] = useState(0);
  const { metrics } = useMetrics();

  return (
    <term-ui width="60" mode="dark">
      <section gap="1">
        <article title="deploy v2.4.1">
          <progress label="build" value={build} max="100"></progress>
          <progress label="tests" value="94" max="100"></progress>
        </article>
        <figure height="4" fill>
          {metrics.map(v => <data value={v} />)}
        </figure>
        <nav>
          <button onClick={() => deploy()}>deploy</button>
          <button onClick={() => rollback()}>rollback</button>
        </nav>
        <footer left=" healthy" right="64s ago "></footer>
      </section>
    </term-ui>
  );
}

<article> is a box. <progress> is a bar. <figure> is a chart. <nav> lays out horizontally. <footer> is a status line. No wrapper components, no special syntax -- just HTML that happens to render as a terminal.

Why

Tables draw with │─┼. Progress bars fill with ████░░░░. Buttons are [ deploy ]. Everything snaps to a character grid and it just looks right.

Who needs designs for internal tools when a character grid gives you a clean UI for free? Dashboards, admin panels, monitoring views, CLI-style apps -- just write the HTML and it looks like something you'd actually want to use.

Your CSS still works -- display: grid, gap, grid-template-columns get picked up from getComputedStyle and mapped to the grid. It's a web component, so React, Vue, Svelte, htmx, plain HTML -- whatever. onClick on a <button> fires like you'd expect.

Zero dependencies. Also does markdown and JSON (source-format="markdown" on the element).

Quick reference

| Element | Becomes | |---------|---------| | <article title="X"> | box | | <figure> | chart (text content, <data> children, or values) | | <footer left="X" right="Y"> | status bar | | <nav> | horizontal stack | | <progress> | bar | | <hr> / <hr label="X"> | separator / divider | | <pre> | code block | | <table> | table | | <section>, <div> | container (layout from CSS) |

Need custom behavior? Register your own compiler via registerHtmlTagCompiler(). Full details in the docs.

License

MIT