The Terminal
for Svelte.

A beautifully typed, file-system ready terminal component. Give your app a CLI power-user interface in minutes.

GitHub

user@svelte-bash x

guest@host ~ $

Installation

Get started by installing the package via npm. It has zero dependencies other than Svelte itself.

npm install svelte-bash

Basic Usage

Import the component and pass a structure object to define your file system.

<script>
  import { Terminal } from 'svelte-bash';

  const files = {
    'readme.md': '# Hello World',
    'src': {
       'app.js': 'console.log("Hi")'
    }
  };
</script>

<Terminal 
    structure={files} 
    user="alice" 
    style="height: 300px"
/>

alice@host ~ $

Advanced Features

Custom Commands

Pass a commands object to handle custom logic. You can return a string, an array of lines, or even other Svelte components.

const cmds = {
  greet: (args) => `Hello ${args[0]}`,
  async: async () => {
     await fetch('/api');
     return 'Done!';
  }
};

<Terminal 
   commands={cmds} 
   style="height: 300px" 
/>

user@host ~ $

Autoplay / Show Mode

Great for tutorials. The terminal will type for you.

<Terminal 
  autoplay={[
    { command: 'git status' },
    { 
      command: 'git commit -m "wip"', 
      output: '...' 
    }
  ]}
  style="height: 300px"
/>

Deep Theming

Override standard colors with the theme prop.

<Terminal 
  theme={{
    background: '#282a36',
    prompt: '#ff79c6',
    cursor: '#f8f8f2'
  }}
  style="height: 300px"
/>