Svelte Terminal

svelte-terminal

A terminal-like console window component for Svelte.

You can plug in your own command handler to respond to user input.

Live demo: https://candywater.github.io/svelte-terminal/

Screenshot

Install

pnpm add candywater/svelte-terminal#0.0.2

Roadmap / TODO

• Rounded layout
• Theme customization
• Custom title
• Custom commands
• Layout fixes
• Font fixes
• Fix input “shake” issue
• Syntax highlighting (if possible)
• Draggable window
• Mini / compact size
• Custom close behavior

Usage

Basic usage:

<script>
  import Terminal from "svelte-terminal";
</script>

<Terminal />

Customize the title, command handler, and font settings:

<script>
  function command(input, close) {
    if (input === ":about") return "this is a teapot!";
    return "I don't understand because I'm a teapot!";
  }
</script>

<Terminal
  title="your_title"
  consoleCommand={command}
  fontsize="0.85rem"
  fontfamily="Monaco"
  exactClose={() => {}}
/>

Writing your own commands

Your command function should look like this:

const HELP_INFO = `HELP INFO
Type the following commands:
:help  Show help
:about About this console
:exit  Exit the console`;

const ABOUT_INFO = `This is a console by candy water. ver 0.0.1
Visit https://github.com/candywater/svelte-terminal/ for more info.`;

const EXIT_INFO = `Have a nice day!`;
const ERROR_INFO = `Command not found. Type :help for help.`;

export function consoleCommand(input, closeWin = () => {}) {
  const str = input.trim();
  switch (str) {
    case ":help":
    case "help":
      return HELP_INFO;

    case ":about":
    case "about":
      return ABOUT_INFO;

    case ":exit":
    case "exit":
      setTimeout(closeWin, 350);
      return EXIT_INFO;

    default:
      return ERROR_INFO;
  }
}