` in the browser, supporting Flexbox and Grid layouts.
```tsx
import { Box, Text } from "tinky";
// Flexbox layout
Left
Right
// Grid layout
Col 1
Col 2
Col 3
// With borders and padding
Styled Box
```
### Text
The `
` component renders styled text with colors, bold, italic, and more.
```tsx
import { Text } from "tinky";
Blue text
Highlighted
Styled text
Hex colors work too!
```
### Static
The `` component renders static content that won't be updated. Perfect for logs and history.
```tsx
import { Static, Text } from "tinky";
const logs = ["Log 1", "Log 2", "Log 3"];
{(log, index) => {log}};
```
### Transform
The `` component allows you to transform the output of its children.
```tsx
import { Transform, Text } from "tinky";
output.toUpperCase()}>
hello
;
// Renders: HELLO
```
### Newline & Spacer
```tsx
import { Box, Text, Newline, Spacer } from "tinky";
// Newline - adds vertical space
Line 1
Line 2
// Spacer - flexible space in flex containers
Left
Right
```
## 🪝 Hooks
### useInput
Handle keyboard input in your components.
```tsx
import { useInput, useApp } from "tinky";
function MyComponent() {
const { exit } = useApp();
useInput((input, key) => {
if (key.escape) {
exit();
}
if (key.upArrow) {
// Handle up arrow
}
if (input === "q") {
exit();
}
});
return Press 'q' to quit;
}
```
### useApp
Access the app instance to control exit behavior.
```tsx
import { useApp } from "tinky";
function MyComponent() {
const { exit } = useApp();
// Exit with error
exit(new Error("Something went wrong"));
// Exit normally
exit();
}
```
### useFocus & useFocusManager
Manage focus for interactive components.
```tsx
import { useFocus, Box, Text } from "tinky";
function FocusableItem({ label }: { label: string }) {
const { isFocused } = useFocus();
return (
{label}
);
}
```
### useStdin, useStdout, useStderr
Direct access to stdin, stdout, and stderr streams.
```tsx
import { useStdout, useEffect } from "tinky";
function MyComponent() {
const { write } = useStdout();
useEffect(() => {
write("Hello from stdout!\n");
}, []);
return null;
}
```
## 🎨 Styling
### Flexbox Properties
```tsx
```
### Grid Properties
```tsx
```
### Border Styles
```tsx
// ┌─┐
// ╔═╗
// ╭─╮
// ┏━┓
// +--+
```
### Colors
Tinky supports multiple color formats:
```tsx
// Named colors
// Hex colors
// RGB colors
// ANSI 256 colors
```
## 🔧 API Reference
For complete API documentation, see the [API Docs](./docs/api/globals.md).
### render(element, options?)
Render a React element to the terminal.
```tsx
import { render } from "tinky";
const { unmount, waitUntilExit, rerender, clear } = render(, {
stdout: process.stdout,
stdin: process.stdin,
stderr: process.stderr,
exitOnCtrlC: true,
patchConsole: true,
});
// Wait for the app to exit
await waitUntilExit();
// Rerender with new props
rerender();
// Unmount the app
unmount();
// Clear the output
clear();
```
### incrementalRendering
Use `incrementalRendering` to control how Tinky updates interactive frames.
Run mode diffs terminal cells and writes minimal changed runs. Line mode diffs
whole lines and rewrites changed lines.
```tsx
import { render } from "tinky";
render(, {
// Equivalent to: { strategy: "run" }
incrementalRendering: true,
});
render(, {
incrementalRendering: { strategy: "line" },
});
render(, {
incrementalRendering: { enabled: false },
});
```
Tinky automatically falls back to non-run paths in `debug`, screen-reader, and
CI environments. For strategy trade-offs and behavior details, read
[Incremental rendering guide](./docs/incremental-rendering.md).
### measureElement(ref)
Measure the dimensions of a rendered element.
```tsx
import { measureElement, Box, useRef, useEffect } from "tinky";
function MyComponent() {
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
const { width, height } = measureElement(ref.current);
console.log(`Size: ${width}x${height}`);
}
}, []);
return Content;
}
```
## 🧪 Testing
Tinky uses Bun for testing. Run the test suite:
```bash
bun test
```
To benchmark incremental rendering locally, run:
```bash
bun run perf:render
```
To enforce the performance threshold used by CI, run:
```bash
bun run perf:gate
```
## 📄 License
MIT © [ByteLandTechnology](https://github.com/ByteLandTechnology)
## 🙏 Acknowledgements
- [Ink](https://github.com/vadimdemedes/ink) — The original React for CLIs
- [Taffy](https://github.com/DioxusLabs/taffy) — High-performance CSS layout engine
- [React](https://reactjs.org/) — The UI library that makes this possible