glyph

Glyph is a powerful React-based framework designed for building modern, composable terminal User Interfaces (TUIs). Leveraging a full component model with CSS-like flexbox layout powered by Yoga, Glyph allows developers to create terminal applications as intuitively as they would for the web. Its features include efficient keyboard input management, focus management, and smart rendering that ensures only changes to character cells are written, enhancing performance.

Key Features

• Flexbox Layout: Utilize a comprehensive flexbox model to easily arrange elements in rows and columns, with support for alignment, wrapping, and padding.
• Rich Component Library: Create intricate UIs using various components such as Box, Text, Input, Button, Checkbox, Radio, Select, ScrollView, List, Menu, Progress, and more.
• Focus System: Implement tab navigation, focus scopes, and additional support for focus trapping with modals to create accessible applications.
• Keyboard Input Handling: Use the useInput hook and declarative <Keybind> component for comprehensive keyboard shortcut management, including vim-style key bindings.
• Smart Rendering: The double-buffered framebuffer with character-level diffing ensures that only modified cells are updated, optimizing the rendering process.
• True Colors Support: Define colors using named references, hex codes, or RGB values. Glyph automatically adjusts text color for contrast against colored backgrounds.
• TypeScript Support: Benefit from full type coverage, ensuring type safety and enhancing the development experience.

Example Usage

To create a simple Glyph application:

import React from "react";
import { render, Box, Text, Keybind, useApp } from "@nick-skriabin/glyph";

function App() {
  const { exit } = useApp();

  return (
    <Box style={{ border: "round", borderColor: "cyan", padding: 1 }}>
      <Text style={{ bold: true, color: "green" }}>Hello, Glyph!</Text>
      <Keybind keypress="q" onPress={() => exit()} />
    </Box>
  );
}

render(<App />);

Invoke the app with the command:

npx tsx app.tsx

Components Overview

Glyph provides a broad array of components for various use cases:

• Box: The fundamental building block for layout, enabling flexbox styles.
• Text: Styled text elements allowing for various text properties like alignment, color, and boldness.
• Input: Fields for user input, supporting various input types and customizable placeholder text.
• Button, Checkbox, and Radio: Interactive components for user engagement, complete with visual feedback and accessibility features.
• ScrollView and List: Containers for navigating large datasets or long lists, supporting keyboard navigation.
• Menu and Select: Perfect for creating dropdowns or menus with keyboard navigation and type-to-filter capabilities.

Additional Functionality

Glyph also includes hooks such as useInput, useFocus, and useApp that provide vital utilities for keyboard handling, element focus tracking, and core app functionality.

Conclusion

Glyph is a versatile choice for developers seeking to build complex terminal applications with the simplicity and intuitiveness of React. With its rich feature set and support for modern web development practices, Glyph allows for high-quality terminal UI development.