Terminal Gallery

Explore different configurations, themes, and use cases for the Svelte Bash component. The code snippets are ready to be copy-pasted into your project.

neo@matrix:~$

1. The Hacker (Matrix Theme)

Perfect for CTF platforms or cybersecurity portfolios. Notice the typewriter effect typing the welcome message out character-by-character!

<Terminal
  theme="matrix"
  user="neo"
  promptStr="neo@matrix:~$ "
  typewriter={true}
  welcomeMessage={[
    "Wake up, Neo...",
    "The Matrix has you..."
  ]}
/>

dev@host ~ $

2. The Dracula Dev

A highly legible, high-contrast theme popular among dark-mode lovers. Notice the autoplay writing commands autonomously.

<Terminal
  theme="dracula"
  user="dev"
  welcomeMessage={["dracula-theme loaded..."]}
  autoplay={[
    { command: "echo 'Dracula is elegant'" },
    { command: "ls -la" }
  ]}
/>

root@host ~ $

3. Light-Theme Boot Logger

A beautifully clean light theme combining both bootplay (for fast pre-computation logs) and autoplay (for sequential interactive typing).

<Terminal
  theme="light"
  bootSpeed=150
  bootplay={[
    { output: "[OK] Loading kernel..." },
    { output: "[OK] Reached target..." }
  ]}
  autoplay={[
    { command: "whoami", output: "root" }
  ]}
/>

user@host ~ $

4. Nano Editor & Persistence

Fully supports editing files securely in the browser. Using the persist prop saves all your hard work to localStorage automatically.

<Terminal
  theme="dark"
  persist="gallery-fs"
  welcomeMessage={["Try: nano notes.txt"]}
/>

api@host ~ $

5. Async Custom APIs

Extend the shell by injecting Javascript closures. You can await network fetches, database calls, or anything else.

<Terminal
  theme="dracula"
  commands={{
    joke: async () => {
      const res = await fetch(".../joke");
      return await res.text();
    }
  }}
/>

ninja@host ~ $

6. Output Redirection

Built-in piping behavior. The terminal engine correctly intercepts > and >> to mutate the virtual filesystem without any custom code.

<Terminal
  theme="dark"
  welcomeMessage={[
    "Type: echo 'hello' > msg.txt"
  ]}
/>

sys@host ~ $

7. ZSH Syntax Highlighting

Missing Oh-My-Zsh? Just enable syntaxHighlight and the terminal will tokenize input on the fly. Built-in or custom commands turn green, strings turn yellow, and flags turn blue.

<Terminal
  theme="dracula"
  syntaxHighlight={true}
/>