@tsquare-js/react

React components for tsquare wireframes: show a board from wireframe text, let people zoom and pan it, edit it in a playground, and render the ```tsquare blocks in a model's replies, even while they're still streaming in. Boards are drawn in the browser; nothing is sent anywhere.

npm install @tsquare-js/react

import Markdown from "react-markdown";
import { WireframeStreaming, createTsquareComponents } from "@tsquare-js/react";
import "@tsquare-js/react/styles.css";

const components = createTsquareComponents({ expandable: true });

export function Reply({ text, streaming }: { text: string; streaming: boolean }) {
  return (
    <WireframeStreaming value={streaming}>
      <Markdown components={components}>{text}</Markdown>
    </WireframeStreaming>
  );
}

Docs

tsquare.dev/docs/react, also in docs/:

• Wireframe: a board as an image, with an optional full-size view
• WireframeViewer: zoom, pan, a button per screen, and clicking elements
• WireframeEditor: write and edit wireframe text, with autocomplete and problems underlined (from @tsquare-js/react/editor)
• WireframePlayground: the editor and the board side by side (from @tsquare-js/react/editor)
• Markdown and chat: react-markdown, streaming replies
• Problems: showing them, or sending them back to the model
• Styling: the stylesheet, your colors, light and dark, class names

Development and releases: CONTRIBUTING.md. MIT license.