DEV Community

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

Posted on

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

#svelte #frontend #opensource #webcomponents

If you're building with Svelte 5 and you’ve ever needed a clean, lightweight, fully-typed terminal UI, I built something you might like.

Meet Svelte Bash — a zero-dependency, ~4kb gzipped, highly customizable terminal emulator component made specifically for Svelte 5 applications.

It includes everything you expect from a terminal component (and more):
Autoplay mode, virtual file system, custom commands, deep theming, history navigation, accessibility, and full TypeScript support.

- Live : https://svelte-bash.netlify.app/

🌟 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 solutions were either too heavy or not Svelte-native.

So I built 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.

<Terminal 
  autoplay={[
    { command: 'git status' },
    { command: 'git commit -m "wip"', output: '...' }
  ]}
/>
Enter fullscreen mode Exit fullscreen mode

✅ 2. Virtual File System (VFS)

Svelte Bash includes a mini virtual file system with real commands:

  • ls
  • cd
  • pwd
  • cat

You define your structure like this:

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

<Terminal structure={fileSystem} />
Enter fullscreen mode Exit fullscreen mode

✅ 3. Custom Commands

Add your own CLI commands — sync or async.

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

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

Use built-in presets or provide your own colors:

<Terminal 
  theme={{
    background: '#1a1b26',
    foreground: '#a9b1d6',
    prompt: '#7aa2f7',
    cursor: '#c0caf5'
  }}
/>
Enter fullscreen mode Exit fullscreen mode

✅ 5. Fully Typed with TypeScript

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

✅ 6. Lightweight & Fast

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

Ideal for production sites, documentation, and portfolio sections.

📦 Installation 

npm install svelte-bash
Enter fullscreen mode Exit fullscreen mode

🧩 Basic Usage 

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

<Terminal user="guest" machine="dev" />
Enter fullscreen mode Exit fullscreen mode

🧭 Use Cases

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

⭐ If You Like It, Please Star the GitHub Repo

Open-source projects grow with community support.
If Svelte Bash helps you in any way, a GitHub star would mean a ton to me — it boosts the project’s visibility and helps more Svelte developers discover it.

👉 GitHub: https://github.com/YusufCeng1z/svelte-bash

Thank you in advance! ❤️

💬 Feedback & Contributions

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

Top comments (0)