Installation

#Requirements

• Bun 1.2+ or Node.js 22+
• Chrome, Edge, Firefox or Safari on desktop

#Create an app

bunx create-text-app@latest

Pick a template (starter, dashboard or opencode), then start the dev server:

cd my-appbun installbun dev

#Open the console

Visit http://localhost:3000 and open the console.

In Safari, first turn on Show features for web developers in Settings → Advanced.

Click the page to focus it, then type. Docking DevTools to the bottom gives the widest grid.

#Console settings

Turn off Preserve log in the console settings. Text.js appends one message per frame and clears the console to release old frames. With Preserve log on, DevTools ignores the clear and old frames accumulate.

#Manual setup

bun add @textjs/app react react-dom

{  "scripts": { "dev": "text dev", "build": "text build", "start": "text start" }}

import { Text } from "@textjs/app";export default function Page() {  return <Text className="p-1">Hello from console.log</Text>;}

#Without the framework

Mount any React tree into the console from an existing site:

import { renderToConsole, Box, Text } from "@textjs/react";await renderToConsole(  <Box className="border rounded p-1">    <Text bold>Hello, DevTools</Text>  </Box>,  { width: 100, height: 32 },);