Skip to main content

Simple Box

Create a basic box widget with styling and positioning.

Code​

import { Screen, Box } from "@unblessed/node";

const screen = new Screen({ smartCSR: true });

const box = new Box({
  parent: screen,
  top: "center",
  left: "center",
  width: "50%",
  height: "50%",
  content:
    "{bold}{cyan-fg}Hello unblessed!{/cyan-fg}{/bold}\\n\\n" +
    "This is a simple box widget.\\n\\n" +
    "Press q to quit.",
  tags: true,
  border: {
    type: "line",
  },
  style: {
    fg: "white",
    bg: "black",
    border: {
      fg: "cyan",
    },
  },
});

screen.key(["q", "C-c"], () => process.exit(0));
screen.render();

Try it Live​

Visit the Home Page and select "Simple Box" from the examples to see this running in your browser!

Key Concepts​

Positioning​

  • top: 'center' - Center vertically
  • left: 'center' - Center horizontally
  • Can use percentages ('50%') or absolute values (10)

Sizing​

  • width: '50%' - 50% of parent width
  • height: '50%' - 50% of parent height

Styling​

  • tags: true - Enable styled text tags like {bold} and {cyan-fg}
  • border - Add borders (line, bg, none, etc.)
  • style - Colors and attributes

Next Steps​