Svelte Web Components

Terminal Component Examples

Basic Terminal with Syntax Highlighting

$ npm install svelte + svelte@5.0.0 added 1 package in 2.1s $ npm run build ✓ built in 1.23s

Error Examples

$ npm run test ✗ Test failed Error: Cannot find module 'missing-dependency' at require (internal/modules/cjs/loader.js:883:19)

Git Diff Example

$ git diff diff --git a/src/main.js b/src/main.js + console.log('New feature added'); - console.log('Old debug code'); const result = process();

Light Theme with Python Code

#!/usr/bin/env python3 def hello_world(): print("Hello, World!") return "success" if __name__ == "__main__": hello_world()

Different Sizes

$ echo "Small terminal" $ echo "Medium terminal (default)" $ echo "Large terminal"

Configuration Options

$ echo "Terminal without header" No header bar shown $ echo "Terminal without buttons" Header shown but no action buttons

Read-only Mode

$ cat README.md # Project Documentation This is a read-only terminal example. Text selection is enabled for easy copying.

Mixed Content Examples

$ docker build -t myapp . Successfully built abc123def456 $ docker run -p 8080:80 myapp ✓ Container started successfully [INFO] Server starting on port 3000 [WARN] Deprecated API usage detected [ERROR] Database connection failed [INFO] Retrying connection... ✓ Connected to database

Long Content with Scrolling

$ npm run build:production Building for production... ✓ Compiling TypeScript files ✓ Bundling JavaScript modules ✓ Optimizing CSS ✓ Generating source maps ✓ Minifying assets ✓ Copying static files ✓ Creating service worker Build completed successfully! Output files: + dist/index.html (2.1 KB) + dist/main.js (45.2 KB) + dist/main.css (8.7 KB) + dist/assets/ (125 files) Total bundle size: 1.2 MB Gzipped size: 320 KB $ npm run deploy 🚀 Deploying to production... ✓ Upload complete ✓ CDN cache invalidated ✓ Health checks passed Deployment successful! URL: https://myapp.example.com

Event Logging

Open your browser's developer console to see events from the components.