u/iyioioio

I built and test a zero dependency TUI library with modern layout support using the Convo-Lang VSCode extension

I'm overhauling the CLI and adding a TUI to Convo-Lang. This is an early version of the TUI. Any feedback would be much appreciated.

I built the TUI on top of the @convo-lang/tui library I shared earlier this week: https://npmjs.com/package/@convo-lang/tui

If you want to learn more about Convo-Lang you can check out the website: https://learn.convo-lang.ai/

I created @convo-lang/tui, a zero dependency TUI library for building feature rich TUI applications in TypeScript. It is resource efficient (no React) and provides a layout system with support for flex and grid layouts.

I created it to re-build the Convo-Lang CLI REPL which I'm currently working on. But I think u/convo-lang/tui could be a useful for a lot of other people too.

GitHub: https://github.com/convo-lang/convo-lang/tree/main/packages/tui

NPM: https://www.npmjs.com/package/@convo-lang/tui

Short Example:

import { ConvoTuiCtrl } from '@convo-lang/tui/ConvoTuiCtrl';
import type { SpriteDef, TuiConsole, TuiTheme } from '@convo-lang/tui/tui-types';

const theme:TuiTheme={
    foreground:'#d7d7d7',
    background:'#111111',
    panel:'#1c1c1c',
    accent:'#60a5fa',
    active:'#facc15',
    danger:'#ef4444',
};

const root:SpriteDef={
    id:'root',
    layout:'column',
    bg:'background',
    children:[
        {
            id:'title',
            text:' My TUI App ',
            color:'accent',
            bg:'panel',
            textAlign:'center',
        },
        {
            id:'body',
            text:'Press Tab to focus the button, then Enter to quit.',
            flex:1,
            textAlign:'center',
            vTextAlign:'center',
        },
        {
            id:'quit',
            text:' Quit ',
            border:'danger',
            activeColor:'background',
            activeBg:'danger',
            onClick:evt=>evt.ctrl.dispose(),
        },
    ],
};

const tuiConsole:TuiConsole={
    stdout:process.stdout,
    stdin:process.stdin,
};

const ctrl=new ConvoTuiCtrl({
    console:tuiConsole,
    theme,
    defaultScreen:'home',
    screens:[
        {
            id:'home',
            defaultSprite:'quit',
            root,
        },
    ],
});

process.on('exit',()=>ctrl.dispose());
process.on('SIGTERM',()=>{
    ctrl.dispose();
    process.exit(0);
});

ctrl.init();

Full feature list:

• Image support
• Efficient terminal screen buffer rendering
• Multiple screens
• Screen lifecycle callbacks
• Sprite-based UI tree
• Inline, row, column, and grid layouts
• Flex sizing
• Fixed width and height sizing
• Margin, padding, and gaps
• Absolute positioning
• Plain text rendering
• Rich text spans
• Text wrapping, hard wrapping, clipping, and ellipses
• Horizontal and vertical text alignment
• Theme variables and direct hex colors
• Foreground and background colors
• Active foreground, background, and border styles
• Borders with multiple styles
• Links between screens and sprites
• Keyboard focus navigation
• Buttons
• Text inputs
• Mouse release, drag, and wheel events
• Scrollable containers
• Custom inline renderers
• Timed renderer intervals for animations
• Image rendering from encoded image data
• Custom console stream support

I created @convo-lang/tui, a zero dependency TUI library for building feature rich TUI applications in TypeScript. It is resource efficient (no React) and provides a layout system with support for flex and grid layouts.

I created it to re-build the Convo-Lang CLI REPL which I'm currently working on. But I think @convo-lang/tui could be a useful for a lot of other people too.

GitHub: https://github.com/convo-lang/convo-lang/tree/main/packages/tui

NPM: https://www.npmjs.com/package/@convo-lang/tui

Short Example:

import { ConvoTuiCtrl } from '@convo-lang/tui/ConvoTuiCtrl';
import type { SpriteDef, TuiConsole, TuiTheme } from '@convo-lang/tui/tui-types';

const theme:TuiTheme={
    foreground:'#d7d7d7',
    background:'#111111',
    panel:'#1c1c1c',
    accent:'#60a5fa',
    active:'#facc15',
    danger:'#ef4444',
};

const root:SpriteDef={
    id:'root',
    layout:'column',
    bg:'background',
    children:[
        {
            id:'title',
            text:' My TUI App ',
            color:'accent',
            bg:'panel',
            textAlign:'center',
        },
        {
            id:'body',
            text:'Press Tab to focus the button, then Enter to quit.',
            flex:1,
            textAlign:'center',
            vTextAlign:'center',
        },
        {
            id:'quit',
            text:' Quit ',
            border:'danger',
            activeColor:'background',
            activeBg:'danger',
            onClick:evt=>evt.ctrl.dispose(),
        },
    ],
};

const tuiConsole:TuiConsole={
    stdout:process.stdout,
    stdin:process.stdin,
};

const ctrl=new ConvoTuiCtrl({
    console:tuiConsole,
    theme,
    defaultScreen:'home',
    screens:[
        {
            id:'home',
            defaultSprite:'quit',
            root,
        },
    ],
});

process.on('exit',()=>ctrl.dispose());
process.on('SIGTERM',()=>{
    ctrl.dispose();
    process.exit(0);
});

ctrl.init();

Full feature list:

• Image support
• Efficient terminal screen buffer rendering
• Multiple screens
• Screen lifecycle callbacks
• Sprite-based UI tree
• Inline, row, column, and grid layouts
• Flex sizing
• Fixed width and height sizing
• Margin, padding, and gaps
• Absolute positioning
• Plain text rendering
• Rich text spans
• Text wrapping, hard wrapping, clipping, and ellipses
• Horizontal and vertical text alignment
• Theme variables and direct hex colors
• Foreground and background colors
• Active foreground, background, and border styles
• Borders with multiple styles
• Links between screens and sprites
• Keyboard focus navigation
• Buttons
• Text inputs
• Mouse release, drag, and wheel events
• Scrollable containers
• Custom inline renderers
• Timed renderer intervals for animations
• Image rendering from encoded image data
• Custom console stream support

Its a real terminal application vibe coded on top of the @convo-lang/tui NPM package

I added an animated typing masco to my website that lets you talk to an LLM using an old school Commodore64 style terminal.

You can check out the site at https://learn.convo-lang.ai/

I built a resource efficient, zero dependency TUI library for building feature rich TUI interfaces.

@convo-lang/tui gives you a compact sprite-based UI model for terminal apps: screens, layout, focus navigation, input, mouse events, scrolling, rich text, colors, borders, images, and custom renderers. The library is designed for low overhead rendering while still supporting modern interface patterns.

NPM: https://www.npmjs.com/package/@convo-lang/tui

GitHub: https://github.com/convo-lang/convo-lang/tree/main/packages/tui/src

I built a resource efficient, zero dependency TUI library for building feature rich TUI interfaces.

@convo-lang/tui gives you a compact sprite-based UI model for terminal apps: screens, layout, focus navigation, input, mouse events, scrolling, rich text, colors, borders, images, and custom renderers. The library is designed for low overhead rendering while still supporting modern interface patterns.

NPM: npmjs.com/package/@convo-lang/tui

GitHub: https://github.com/convo-lang/convo-lang/tree/main/packages/tui