▼ Text.js

Text.js is a React framework for apps that render in the browser console.

Docs · Learn · Playground · OpenCode

English · Bahasa Indonesia · Deutsch · Español · Français · Italiano · Polski · Português (Brasil) · Tiếng Việt · Türkçe · Русский · हिन्दी · 日本語 · 한국어 · 简体中文 · 繁體中文 · العربية · עברית · فارسی · اردو

Quick start

bunx create-text-app@latest
cd my-app && bun install && bun dev

Open localhost:3000 and open the browser console. Text.js needs Bun 1.2+ or Node.js 22+ and Chrome, Edge, Firefox or Safari on desktop.

Example

// app/page.tsx
import { useState } from "react";
import { Box, Text, useInput } from "@textjs/app";

export default function Page() {
  const [count, setCount] = useState(0);

  useInput((e) => {
    if (e.key === "up") setCount((c) => c + 1);
    if (e.key === "down") setCount((c) => c - 1);
  });

  return (
    <Box className="flex-col border rounded p-1">
      <Text bold>▼ Hello, console</Text>
      <Text color="muted">count = {count}</Text>
    </Box>
  );
}

Each frame is laid out with Yoga, run-length encoded into %c spans and written in one console.log. A frame with no changed cells logs nothing. ARCHITECTURE.md covers the rendering pipeline.

Packages

Package	Version	Description
@textjs/app		App Router, the text CLI and route handlers
@textjs/react		Reconciler, components and hooks
@textjs/core		Cell buffer, layout and the %c console driver
@textjs/font		FIGlet font parser and renderer
@textjs/opencode		Local bridge between textjs.org/opencode and an OpenCode server
create-text-app		Project generator
eslint-plugin-textjs		ESLint rules for Text.js apps

The editor and browser extensions live here too:

• packages/vscode-textjs: the VS Code extension, with a live preview, App Router scaffolding and error code links
• packages/devtools-extension: the Chrome DevTools extension, with a component tree, frame inspector and timeline

Development

bun install
bun test packages/
bun run typecheck
bun run --cwd apps/web dev

The site runs at localhost:3000. CONTRIBUTING.md covers the other apps, the end-to-end scripts and the release process.

Contributing

Bug reports and pull requests are welcome. Read CONTRIBUTING.md first, and report security issues as described in SECURITY.md.

License

MIT. Bundled third-party files keep their own licenses: the FIGlet fonts in packages/font (BSD 3-Clause) and the fonts under apps/web and merch/fonts (SIL Open Font License 1.1).