Each TAML tag is rendered as a element with corresponding CSS classes:

- Root wrapper: .taml
- Colors: .taml-red, .taml-green, .taml-blue, etc.
- Bright colors: .taml-bright-red, .taml-bright-green, etc.
- Backgrounds: .taml-bg-red, .taml-bg-green, etc.
- Bright backgrounds: .taml-bg-bright-red, .taml-bg-bright-green, etc.
- Text styles: .taml-bold, .taml-italic, .taml-underline, etc.

Examples

$3

`tsx
import { Taml } from '@taml/react';
import '@taml/react/styles.css';

// Simple colored text
{"Error: File not found"}

// Nested formatting
{"Critical: System failure"}

// Background colors
{" WARNING "}
`

$3

`tsx
function LogViewer({ logs }) {
return (


// Usage
const logs = [
"2024-12-07 10:30:15 [INFO] Application started",
"2024-12-07 10:30:16 [SUCCESS] Database connected",
"2024-12-07 10:30:45 [WARN] High memory usage",
"2024-12-07 10:31:02 [ERROR] Connection failed",
];
`

$3

`tsx
function TerminalOutput() {
return (


`tsx
function SafeTamlRenderer({ content }) {
const handleError = (error) => {
console.error('Failed to parse TAML:', error.message);
};

return (
onError={handleError}
fallback={Invalid TAML content}
>
{content}

);
}
`

Styling

$3

The package includes default CSS styles that map TAML tags to appropriate colors and formatting. Import the stylesheet:

`tsx
import '@taml/react/styles.css';
`

$3

You can override the default styles or add your own:

`css
/ Override default colors /
.taml-red {
color: #ff4444;
}

/ Add custom terminal styling /
.terminal .taml {
font-family: 'Courier New', monospace;
background: #1e1e1e;
color: #ffffff;
padding: 1rem;
border-radius: 4px;
}

/ Dark mode support /
@media (prefers-color-scheme: dark) {
.taml-white {
color: #ffffff;
}
.taml-black {
color: #808080;
}
}
`

$3

For dynamic theming, you can use CSS custom properties:

`css
.taml {
--taml-red: #ff0000;
--taml-green: #00ff00;
--taml-blue: #0000ff;
}

.taml-red {
color: var(--taml-red);
}
`

Advanced Usage

$3

The package exports utility functions for advanced use cases:

`tsx
import {
generateClassName,
combineClassNames,
renderTamlNode
} from '@taml/react';
import { parseAml } from '@taml/parser';

// Generate CSS class name from TAML tag
const className = generateClassName('brightRed'); // 'taml-bright-red'

// Combine multiple class names
const combined = combineClassNames('taml', 'custom', undefined); // 'taml custom'

// Parse TAML to AST (import from @taml/parser)
const ast = parseAml('Hello');

// Render AST node to React element
const element = renderTamlNode(ast);
`

$3

The component includes built-in performance optimizations:

- Memoization: Parsed results are cached for identical input strings
- Efficient rendering: Minimal React element creation
- Tree shaking: Only import what you need

`tsx
import { clearRenderCache, getCacheStats } from '@taml/react';

// Clear the render cache if needed
clearRenderCache();

// Get cache statistics
const stats = getCacheStats();
console.log(Cache size: ${stats.size}/${stats.maxSize});
`

TypeScript Support

Full TypeScript support with comprehensive type definitions:

`tsx
import type { TamlProps, TamlTag } from '@taml/react';
import type { TamlNode } from '@taml/ast';

// Component props are fully typed - children MUST be a string
const props: TamlProps = {
children: "Error", // ✅ String literal
className: 'custom',
onError: (error: Error) => console.error(error),
fallback: Fallback
};

// This would cause a TypeScript error:
// const invalidProps: TamlProps = {
// children: Error, // ❌ JSX element - TypeScript error
// };

// TAML tags are type-checked
const validTag: TamlTag = 'red'; // ✓
const invalidTag: TamlTag = 'purple'; // ✗ TypeScript error

// AST node types are imported from @taml/ast
const node: TamlNode = { / ... / };
`

Common Mistakes

$3

// ✅ Correct - This treats as TAML markup
{"Error"}
`

$3

// ✅ Correct - This passes the string content to be parsed
{"Error"}
`

$3

`bash


Clone the repository

`bash


Run all tests

License

MIT License - see LICENSE file for details.

---

Part of the TAML ecosystem - Visit the TAML Specification for more information about the Terminal ANSI Markup Language.