Blessed Widget Generator

Generate blessed widgets for Node.js terminal UIs.

Capabilities

• Generate blessed widget definitions
• Create dashboard layouts
• Set up interactive forms
• Implement custom components
• Configure styling and borders
• Create event handling patterns

Usage

Invoke this skill when you need to:

• Build terminal dashboards with Node.js
• Create complex TUI layouts
• Implement monitoring interfaces
• Set up blessed project structure

Inputs

Parameter	Type	Required	Description
projectName	string	Yes	Project name
layout	string	No	Layout type (dashboard, form, list)
widgets	array	No	Widget definitions

Generated Patterns

Dashboard Layout

const blessed = require('blessed');
const contrib = require('blessed-contrib');

// Create screen
const screen = blessed.screen({
  smartCSR: true,
  title: 'System Dashboard',
});

// Create grid layout
const grid = new contrib.grid({
  rows: 12,
  cols: 12,
  screen: screen,
});

// CPU Line Chart
const cpuLine = grid.set(0, 0, 4, 6, contrib.line, {
  style: { line: 'yellow', text: 'green', baseline: 'black' },
  xLabelPadding: 3,
  xPadding: 5,
  showLegend: true,
  label: 'CPU Usage',
});

// Memory Gauge
const memGauge = grid.set(0, 6, 4, 6, contrib.gauge, {
  label: 'Memory Usage',
  stroke: 'green',
  fill: 'white',
});

// Log Box
const logBox = grid.set(4, 0, 4, 12, contrib.log, {
  fg: 'green',
  selectedFg: 'green',
  label: 'Logs',
});

// Process Table
const processTable = grid.set(8, 0, 4, 12, contrib.table, {
  keys: true,
  fg: 'white',
  selectedFg: 'white',
  selectedBg: 'blue',
  interactive: true,
  label: 'Processes',
  columnSpacing: 4,
  columnWidth: [10, 30, 10, 10],
});

// Update data
function updateDashboard() {
  // CPU data
  cpuLine.setData([{
    title: 'CPU',
    x: ['1', '2', '3', '4', '5'],
    y: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100],
  }]);

  // Memory
  memGauge.setPercent(Math.random() * 100);

  // Logs
  logBox.log(`[${new Date().toISOString()}] System event`);

  // Processes
  processTable.setData({
    headers: ['PID', 'Name', 'CPU', 'MEM'],
    data: [
      ['1234', 'node', '2.5%', '150MB'],
      ['5678', 'chrome', '15.2%', '500MB'],
    ],
  });

  screen.render();
}

// Key bindings
screen.key(['escape', 'q', 'C-c'], () => process.exit(0));

// Update interval
setInterval(updateDashboard, 1000);
updateDashboard();

screen.render();

Form Widget

const blessed = require('blessed');

const screen = blessed.screen({
  smartCSR: true,
  title: 'Configuration Form',
});

const form = blessed.form({
  parent: screen,
  keys: true,
  left: 'center',
  top: 'center',
  width: 60,
  height: 20,
  border: { type: 'line' },
  style: { border: { fg: 'blue' } },
});

// Input field
blessed.text({
  parent: form,
  top: 1,
  left: 2,
  content: 'Username:',
});

const usernameInput = blessed.textbox({
  parent: form,
  name: 'username',
  top: 1,
  left: 12,
  height: 1,
  width: 40,
  inputOnFocus: true,
  style: { fg: 'white', bg: 'black' },
});

// Password field
blessed.text({
  parent: form,
  top: 3,
  left: 2,
  content: 'Password:',
});

const passwordInput = blessed.textbox({
  parent: form,
  name: 'password',
  top: 3,
  left: 12,
  height: 1,
  width: 40,
  censor: true,
  inputOnFocus: true,
  style: { fg: 'white', bg: 'black' },
});

// Submit button
const submitBtn = blessed.button({
  parent: form,
  name: 'submit',
  content: ' Submit ',
  top: 6,
  left: 'center',
  shrink: true,
  style: {
    fg: 'white',
    bg: 'blue',
    focus: { bg: 'green' },
  },
});

submitBtn.on('press', () => {
  form.submit();
});

form.on('submit', (data) => {
  console.log('Form data:', data);
  process.exit(0);
});

screen.key(['escape', 'q'], () => process.exit(0));
screen.render();

Dependencies

{
  "dependencies": {
    "blessed": "^0.1.81",
    "blessed-contrib": "^4.10.1"
  }
}

Target Processes

• tui-application-framework
• dashboard-monitoring-tui
• interactive-form-implementation