https://github.com/YusufCeng1z/svelte-bash
A fully typed, lightweight, and customizable terminal emulator component for Svelte 5. Features a virtual file system, custom commands, themes, and autoplay mode for demos. 🚀
https://github.com/YusufCeng1z/svelte-bash
bash cli command-line console frontend shell svelte svelte-5 svelte-component terminal terminal-emulator typescript ui-component
Last synced: 6 months ago
JSON representation
A fully typed, lightweight, and customizable terminal emulator component for Svelte 5. Features a virtual file system, custom commands, themes, and autoplay mode for demos. 🚀
- Host: GitHub
- URL: https://github.com/YusufCeng1z/svelte-bash
- Owner: YusufCeng1z
- Created: 2025-12-10T04:13:29.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-11T03:46:27.000Z (7 months ago)
- Last Synced: 2025-12-26T08:47:47.064Z (6 months ago)
- Topics: bash, cli, command-line, console, frontend, shell, svelte, svelte-5, svelte-component, terminal, terminal-emulator, typescript, ui-component
- Language: Svelte
- Homepage: https://svelte-bash.netlify.app/
- Size: 158 KB
- Stars: 43
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-svelte - svelte-bash - A customizable terminal-style component for Svelte 5. (UI Components / Miscellaneous)
- awesome - YusufCeng1z/svelte-bash - A fully typed, lightweight, and customizable terminal emulator component for Svelte 5. Features a virtual file system, custom commands, themes, and autoplay mode for demos. 🚀 (Svelte)
README
# Svelte Bash
Svelte Bash
The ultimate lightweight, fully typed, and customizable terminal component for Svelte 5.
---
**Svelte Bash** is a high-performance terminal emulator component designed specifically for modern Svelte applications. It provides a realistic shell experience with a virtual file system, command history navigation, and advanced features like autoplay sequences for tutorials.
> **Note:** As of v1.0.1, svelte-bash has been refactored to use **Pure Vanilla CSS** internally. This means it has **ZERO dependencies** on Tailwind CSS and will render correctly in any project (including Bootstrap, Tailwind, or plain CSS projects). You do NOT need to install Tailwind.
Whether you are building a developer portfolio, a documentation site, or a web-based CLI tool, Svelte Bash offers the perfect balance of aesthetics and functionality.
## Key Features
* **Lightweight & Fast**: Zero external dependencies, ~4kb gzipped.
* **Virtual File System**: fully functional `ls`, `cd`, `cat`, and `pwd` commands.
* **Deep Theming**: Includes `dracula`, `matrix`, and `dark` presets, plus full CSS control.
* **Autoplay Mode**: Script commands to run automatically—perfect for landing page demos.
* **Accessible**: Proper focus management and keyboard history navigation (Up/Down arrows).
* **TypeScript**: Written in TypeScript for excellent type safety and autocomplete.
## Installation
```bash
npm install svelte-bash
```
## Usage
### Basic Example
Import the component and pass a `structure` object to define the virtual file system.
```svelte
import { Terminal } from 'svelte-bash';
const fileSystem = {
'readme.md': '# Hello World',
'src': {
'app.js': 'console.log("Hi")'
}
};
```
### Custom Commands
You can extend the terminal with your own commands by passing a `commands` object.
```svelte
import { Terminal } from 'svelte-bash';
const myCommands = {
// Return a string
hello: () => "Hello form svelte-bash!",
// Accept arguments
echo: (args) => args.join(' '),
// Async support
fetchdata: async () => {
const res = await fetch('https://api.example.com/data');
return await res.text();
}
};
```
### Autoplay (Show Mode)
Perfect for documentation or presentations. The terminal will automatically type and execute the provided sequence.
```svelte
```
## Theming
Svelte Bash allows comprehensive styling customization.
**Built-in Presets:**
- `dark` (default)
- `light`
- `dracula`
- `matrix`
**Custom Theme Object:**
```svelte
```
## API Reference
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `structure` | `FileStructure` | `{}` | Key-value pairs defining the virtual file system. |
| `commands` | `Record` | `{}` | Custom command handlers. |
| `theme` | `string` \| `Theme` | `'dark'` | Theme preset name or specific color object. |
| `user` | `string` | `'user'` | The username displayed in the prompt. |
| `machine` | `string` | `'machine'` | The machine name displayed in the prompt. |
| `welcomeMessage` | `string` \| `string[]` | `[]` | Message shown on initialization. |
| `autoplay` | `AutoplayItem[]` | `undefined` | Array of commands to execute automatically. |
| `readonly` | `boolean` | `false` | If true, user input is disabled. |
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT © [Yusuf Cengiz](https://github.com/YusufCeng1z)