# tsquare > Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG. Multi-screen boards with notes, ready for your docs. tsquare is a small text language for low-fidelity UI wireframes. A board holds screens (phone, tablet, desktop), sticky notes and flow arrows between screens; tsquare draws it as a grayscale SVG or PNG. It's built for AI models to write: problems come back by line with suggestions, so a model can fix its own output. MIT licensed. - Write one: read the language reference in https://tsquare.dev/llms-full.txt, then render with `npx tsquare render board.tsq -o board.png`, the library (`npm install tsquare`), the MCP server at https://tsquare.dev/mcp, or an image URL from https://tsquare.dev/playground. - Code fences: ```tsquare blocks render in VS Code, Obsidian, React apps and Markdown sites (remark-tsquare, rehype-tsquare, markdown-it-tsquare). ## Docs - [Overview](https://tsquare.dev/docs.md): tsquare is a small text language for UI wireframes. A .tsq file describes a board of screens; the tsquare CLI checks it and renders it to SVG or PNG. - [Getting started](https://tsquare.dev/docs/getting-started.md): Install tsquare, write your first wireframe as a .tsq file, check it and render it to PNG or SVG with the CLI, or try it in the playground. - [The language](https://tsquare.dev/docs/language.md): A tsquare file (.tsq) describes one board: a canvas with one or more screens side by side, and optional notes beside them. - [Components](https://tsquare.dev/docs/components.md): Every component, grouped as in the playground. Each page has a rendered example, its source, how to write it, and its props. - [Icons](https://tsquare.dev/docs/icons.md): Icons come from Lucide (ISC license), an open-source set of line icons. - [Colors](https://tsquare.dev/docs/colors.md): Wireframes are grayscale, so they read as structure rather than design. There are three deliberate exceptions in the UI, and no other UI color props. - [Embedding wireframes](https://tsquare.dev/docs/embedding.md): Put tsquare wireframes in Notion, GitHub, docs sites and slides: image links from tsquare.dev, or SVG and PNG files you render yourself. - [Element positions](https://tsquare.dev/docs/element-positions.md): measureElements tells you where every element and flow arrow of a board is drawn, and which line of the wireframe text it came from. - [Using it with AI](https://tsquare.dev/docs/ai.md): tsquare is built for models to write. The pieces below are all generated from the component catalog, so they always match what the renderer accepts. - [VS Code](https://tsquare.dev/docs/vscode.md): The tsquare extension edits .tsq files with a live preview beside the editor. - [Obsidian](https://tsquare.dev/docs/obsidian.md): The tsquare plugin draws tsquare code blocks as wireframes in your notes, on desktop and mobile. - [tsquare for React](https://tsquare.dev/docs/react.md): @tsquare-js/react draws tsquare wireframes in React apps. Boards are drawn in the browser by the tsquare library; nothing is sent anywhere. - [Markdown plugins](https://tsquare.dev/docs/markdown-plugins.md): Three plugins draw tsquare code blocks as wireframes when your docs site is built. ## Components - [Board component](https://tsquare.dev/docs/components/board.md): Root canvas (artboard). Holds Screens side by side, plus optional Notes and Flow lines. Must be the root element. - [Screen component](https://tsquare.dev/docs/components/screen.md): One view of the product in a device frame. Children stack vertically. - [Note component](https://tsquare.dev/docs/components/note.md): Sticky-note annotation. Put it on the Board beside screens, or inside a Screen next to what it explains. - [Flow component](https://tsquare.dev/docs/components/flow.md): An arrow between two elements or screens, named with #id. Write each flow on its own line after the screens, indented like a screen (not inside one): flow… - [Stack component](https://tsquare.dev/docs/components/stack.md): Flex container. The main layout primitive (rows, columns, sidebars, toolbars). - [Grid component](https://tsquare.dev/docs/components/grid.md): Equal-width columns that wrap. Good for card grids and galleries. - [Card component](https://tsquare.dev/docs/components/card.md): Bordered container with optional title. Children stack vertically. - [Accordion component](https://tsquare.dev/docs/components/accordion.md): Collapsible section: a title row with a chevron, children below when open. Stack several for an FAQ. - [Divider component](https://tsquare.dev/docs/components/divider.md): Thin separator line. - [Spacer component](https://tsquare.dev/docs/components/spacer.md): Empty space. Without a size it grows to push siblings apart. - [Heading component](https://tsquare.dev/docs/components/heading.md): Heading text, level 1 (largest) to 3. - [Text component](https://tsquare.dev/docs/components/text.md): Body text, or placeholder lines when lines is set and text is not. - [Bullets component](https://tsquare.dev/docs/components/bullets.md): Bulleted, numbered or icon list of short lines. - [Image component](https://tsquare.dev/docs/components/image.md): Image placeholder: a box with an X through it, or a map. - [Chart component](https://tsquare.dev/docs/components/chart.md): Chart placeholder: a generic line, bar, area, pie or donut shape, no data. - [Icon component](https://tsquare.dev/docs/components/icon.md): Line icon from Lucide, or a brand logo (brand-google, brand-apple, …). - [Avatar component](https://tsquare.dev/docs/components/avatar.md): Round avatar with initials or a person silhouette. - [Badge component](https://tsquare.dev/docs/components/badge.md): Small pill label for counts or statuses. - [Button component](https://tsquare.dev/docs/components/button.md): Button. Primary is filled, secondary is outlined, ghost is text only. With menu and open, a dropdown menu. - [Input component](https://tsquare.dev/docs/components/input.md): Text field with optional label. Set multiline for a textarea. - [Checkbox component](https://tsquare.dev/docs/components/checkbox.md): Checkbox with label. - [Radio component](https://tsquare.dev/docs/components/radio.md): Radio button with label. - [Toggle component](https://tsquare.dev/docs/components/toggle.md): On/off switch with label on the left. - [Select component](https://tsquare.dev/docs/components/select.md): Dropdown field. With options and open, the list shows below it. - [Slider component](https://tsquare.dev/docs/components/slider.md): Slider with one handle, or two with range. - [Progress component](https://tsquare.dev/docs/components/progress.md): Progress bar, ring (circle), or stepper (steps). - [Calendar component](https://tsquare.dev/docs/components/calendar.md): Month calendar. - [NavBar component](https://tsquare.dev/docs/components/navbar.md): Top app bar. Place first in a Screen. - [TabBar component](https://tsquare.dev/docs/components/tabbar.md): Bottom tab bar for mobile. Place last in a Screen (before overlays). - [Tabs component](https://tsquare.dev/docs/components/tabs.md): In-page tabs with an underline on the active one. - [Pagination component](https://tsquare.dev/docs/components/pagination.md): Page numbers with previous and next. - [List component](https://tsquare.dev/docs/components/list.md): Vertical list of ListItems. - [ListItem component](https://tsquare.dev/docs/components/listitem.md): Row in a List. Omit title for a placeholder bar. - [Table component](https://tsquare.dev/docs/components/table.md): Table with headers. Rows are placeholder bars unless data is given. - [Modal component](https://tsquare.dev/docs/components/modal.md): Centered dialog over the screen. Must be a direct child of a Screen, listed last. - [Drawer component](https://tsquare.dev/docs/components/drawer.md): Panel sliding in from an edge: side nav (left), filters/details (right), or bottom sheet. Must be a direct child of a Screen, listed last. - [Toast component](https://tsquare.dev/docs/components/toast.md): Short message over the screen, e.g. after saving. Must be a direct child of a Screen, listed last. ## React - [Wireframe](https://tsquare.dev/docs/react/wireframe.md): shows a board as an image: the right choice for a wireframe inside a page, a card, a ticket or a chat message. - [WireframeViewer](https://tsquare.dev/docs/react/viewer.md): shows a board people can explore: zoom with the buttons, a pinch or Ctrl/Cmd + scroll, drag to pan, double-click to fit, and select a… - [WireframeEditor](https://tsquare.dev/docs/react/editor.md): is tsquare's code editor for writing wireframes: the one in the playground. - [WireframePlayground](https://tsquare.dev/docs/react/playground.md): puts the editor and the viewer side by side on one text: type on the left, see the board on the right. - [Markdown and chat](https://tsquare.dev/docs/react/chat.md): In a chat app, a model's replies are usually Markdown, rendered with react-markdown. When a reply contains a tsquare code block, tsquareComponents turns it… - [Problems](https://tsquare.dev/docs/react/problems.md): Wireframe text can have mistakes: a misspelled component, a prop that doesn't exist, a broken line. - [Styling](https://tsquare.dev/docs/react/styling.md): Style the @tsquare-js/react components with the optional stylesheet: CSS variables for colors and sizes, light and dark themes, stable class names. ## Optional - [Playground](https://tsquare.dev/playground): write a wireframe and see it drawn as you type - [Source on GitHub](https://github.com/tsquare-js/tsquare): the library, CLI, playground and evals - [npm package](https://www.npmjs.com/package/tsquare) - [Privacy](https://tsquare.dev/privacy)