Svelte Bash: A Lightweight Terminal Component for Svelte 5 (Autoplay, VFS, Themes, Custom Commands)

Source: Dev.to

Why I Built Svelte Bash

I needed a terminal component for demos, documentation, and interactive tutorials—something lightweight, theme‑able, and easy to embed in any Svelte page. Most existing solutions were either too heavy or not Svelte‑native, so I created Svelte Bash from scratch with these goals:

• Modern Svelte 5 features
• Zero dependencies
• Small enough for landing pages
• Realistic terminal behavior
• Easily extendable with your own commands

Key Features

1. Autoplay Mode (Scripted Demos)

Perfect for landing pages, tutorials, and docs. Commands type and execute automatically.

2. Virtual File System (VFS)

A mini virtual file system with real commands (ls, cd, pwd, cat). Define your structure like this:

const fileSystem = {
  'readme.md': '# Hello World',
  src: {
    'app.js': 'console.log("Hi")'
  }
};

3. Custom Commands

Add your own CLI commands—sync or async.

"Hello from Svelte Bash!",
echo: (args) => args.join(' '),
fetchdata: async () => {
  const res = await fetch('https://api.example.com');
  return await res.text();
}

4. Deep Theming (Dark, Light, Dracula, Matrix + Custom Themes)

Use built-in presets or provide your own colors:

5. Fully Typed with TypeScript

Every prop, command, and VFS entry includes precise TypeScript definitions.

6. Lightweight & Fast

• Zero dependencies
• ~4 KB gzipped
• Optimized for Svelte 5 runes
• No runtime overhead

Ideal for production sites, documentation, and portfolio sections.

Installation

npm install svelte-bash

Basic Usage

import { Terminal } from "svelte-bash";

Use Cases

• Developer portfolios
• Landing page demos
• Interactive documentation
• Web‑based CLI tools
• Coding tutorials
• Onboarding experiences

Star the Project

If Svelte Bash helps you, a GitHub star would mean a lot—it boosts visibility and helps more Svelte developers discover it.

GitHub:
Live demo:

Feedback & Contributions

I’d love to hear your suggestions, feature ideas, or bug reports. Issues and PRs are always welcome.