tsquare

Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG. A small text language for low-fidelity screens, with several devices side by side and notes beside them. Built for LLMs to write: the prompt comes from the component catalog, and errors come back with line numbers so a model can fix its own output.

board "Login"
  screen phone "Sign in"
    heading "Welcome back"
    input "Email" placeholder="you@example.com"
    input password "Password"
    checkbox "Remember me" checked
    button primary "Sign in" fullWidth

Save that as login.tsq, then:

npx tsquare render login.tsq -o login.png --scale 2

Requires Node 20 or newer. To work on tsquare itself, clone the repo, run npm install, and use npm run render -- examples/notes-mobile.tsq -o notes.png --scale 2.

Docs

Getting started · The language · Components · Icons · Colors · Using it with AI

Playground

Online at tsquare.dev/playground, or locally:

npx tsquare playground   # http://localhost:4321

• Editor: syntax highlighting, autocomplete for components, options, props, icons and colors, and problems underlined by line. Paste a whole model reply and it keeps just the code block.
• Preview: renders as you type. Zoom and pan (⌘/Ctrl + scroll or pinch), jump to a single screen, or go full screen.
• Links: copy a share link that reopens the wireframe in the playground, or an image link (SVG, PNG, Markdown, HTML) to embed it anywhere.
• Examples with thumbnails, light and dark themes, a resizable split, and SVG/PNG export.
• Components: every component with its props and a rendered example. Prompt: the system prompt for models, with a copy button.

The local playground uses the same renderer as the CLI; its links point to tsquare.dev. In this repo, npm run playground runs it from source.

Image links

A wireframe can be embedded anywhere an image works (Notion, GitHub, docs sites) with a link that contains the wireframe itself:

![Login](https://tsquare.dev/svg/zNYwxDsIwEAT7vGJ…)

The playground's Copy link menu makes these; Embedding has the steps for Notion, GitHub and your own site. The text is compressed into the URL, not encrypted, so anyone with the link can read it; see privacy. encodeWireframe and decodeWireframe in the library produce and read the same links.

Use it with

With AI

• Claude: the tsquare skill teaches Claude the language and how to check its own wireframes.
• Any model: the system prompt, or the hosted MCP server for Claude, ChatGPT, Cursor, VS Code and other tools that take a remote MCP URL.

In your docs

• Docusaurus, Astro, MDX: remark-tsquare draws ```tsquare code blocks when the site is built.
• VitePress, Eleventy: markdown-it-tsquare, the same for sites built on markdown-it.
• Any web page: one script tag draws the code blocks in the reader's browser, with no build step.
• Notion, GitHub and anywhere an image works: image links.

**In y

... View full README on GitHub