{"id":49830809,"url":"https://github.com/gusdeyw/s-console","last_synced_at":"2026-05-13T20:48:55.746Z","repository":{"id":168956154,"uuid":"630737661","full_name":"gusdeyw/s-console","owner":"gusdeyw","description":"A lightweight, customizable JavaScript console library for web applications. Built with TypeScript and styled with UnoCSS.","archived":false,"fork":false,"pushed_at":"2025-11-13T01:59:22.000Z","size":124,"stargazers_count":3,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-13T20:48:52.094Z","etag":null,"topics":["component-library","console","interactive-visualizations","javascript","simulation","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gusdeyw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-04-21T03:25:17.000Z","updated_at":"2025-11-13T02:06:42.000Z","dependencies_parsed_at":"2025-10-04T14:28:42.622Z","dependency_job_id":"95924d33-e740-4d0c-bb6a-e2930dc895c3","html_url":"https://github.com/gusdeyw/s-console","commit_stats":null,"previous_names":["gusdeyw/s-console"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/gusdeyw/s-console","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusdeyw%2Fs-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusdeyw%2Fs-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusdeyw%2Fs-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusdeyw%2Fs-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gusdeyw","download_url":"https://codeload.github.com/gusdeyw/s-console/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusdeyw%2Fs-console/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32999522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","console","interactive-visualizations","javascript","simulation","typescript"],"created_at":"2026-05-13T20:48:55.002Z","updated_at":"2026-05-13T20:48:55.737Z","avatar_url":"https://github.com/gusdeyw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/v1_screenshot.png\" alt=\"S-Console Screenshot\" /\u003e\n\u003c/p\u003e\n\n# S-Console\n\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eA lightweight, customizable JavaScript console library for web applications\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/gusdeyw/s-console/actions/workflows/build-library.yml\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/gusdeyw/s-console/build-library.yml?branch=main\u0026label=build\" alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/gusdeyw/s-console/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/release/gusdeyw/s-console?label=version\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/gusdeyw/s-console/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/gusdeyw/s-console\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://cdn.jsdelivr.net/gh/gusdeyw/s-console@latest/dist/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/CDN-jsDelivr-orange\" alt=\"CDN\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?logo=typescript\u0026logoColor=white\" alt=\"TypeScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=white\" alt=\"Vite\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/UnoCSS-333333?logo=tailwind-css\u0026logoColor=white\" alt=\"UnoCSS\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://gusdeyw.github.io/s-console/\"\u003e🚀 Live Demo\u003c/a\u003e • \n  \u003ca href=\"https://github.com/gusdeyw/s-console\"\u003e📦 GitHub\u003c/a\u003e • \n  \u003ca href=\"https://cdn.jsdelivr.net/gh/gusdeyw/s-console@latest/dist/\"\u003e📡 CDN\u003c/a\u003e\n\u003c/p\u003e\n\nBuilt with TypeScript and styled with UnoCSS.\n\n## Features\n\n- 🎨 Customizable appearance (font size, font family, themes)\n- ⌨️ Built-in commands (help, clear, font adjustment)\n- ⚡ Keyboard shortcuts for common actions:\n  - Ctrl/Cmd + L: Clear console\n  - Ctrl/Cmd + K: Clear input field\n  - Escape: Blur/unfocus input field\n- 🔧 Easy command creation and management\n- 🌐 Global window access for debugging\n- 📦 Multiple build formats (ESM, CJS, UMD, IIFE)\n- 🎯 TypeScript support with full type definitions\n\n## Tech Stack\n\n- **TypeScript** - Type-safe development\n- **Vite** - Build tool and dev server\n- **UnoCSS** - Utility-first CSS framework\n- **HTML Templates** - Dynamic UI generation\n\n## Installation\n\n### CDN (Recommended)\n```html\n\u003c!-- Include CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/gusdeyw/s-console@latest/dist/s-console.css\"\u003e\n\n\u003c!-- Include JavaScript (choose one format) --\u003e\n\u003c!-- ES Module --\u003e\n\u003cscript type=\"module\"\u003e\n  import sconsole from 'https://cdn.jsdelivr.net/gh/gusdeyw/s-console@latest/dist/s-console.es.js';\n  const console = new sconsole('my-container');\n\u003c/script\u003e\n\n\u003c!-- Or UMD (for older browsers) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/gusdeyw/s-console@latest/dist/s-console.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const console = new sconsole('my-container');\n\u003c/script\u003e\n```\n\n### Build from Source\n```bash\n# Clone the repository\ngit clone https://github.com/gusdeyw/s-console.git\ncd s-console\n\n# Install dependencies\nnpm install\n\n# Build the library\nnpm run build\n\n# Use the files from dist/ folder\n# - dist/s-console.es.js (ES Module)\n# - dist/s-console.cjs.js (CommonJS)\n# - dist/s-console.umd.js (UMD)\n# - dist/s-console.iife.js (IIFE for browser)\n# - dist/style.css (Styles)\n```\n\n### Direct Usage\n```html\n\u003c!-- Copy built files to your project and include them --\u003e\n\u003clink rel=\"stylesheet\" href=\"./dist/style.css\"\u003e\n\u003cscript src=\"./dist/s-console.iife.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Or use ES modules --\u003e\n\u003cscript type=\"module\"\u003e\nimport { sconsole } from './dist/s-console.es.js';\n\u003c/script\u003e\n```\n\n## Quick Start\n\n### 1. HTML Setup\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/s-console/style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"my-console\"\u003e\u003c/div\u003e\n    \u003cscript src=\"path/to/s-console.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2. JavaScript Initialization\n```javascript\n// Basic initialization\nconst console = new sconsole('my-console');\n\n// With custom options\nconst console = new sconsole('my-console', {\n    fontSize: '16px',\n    fontFamily: 'Arial',\n    theme: 'dark'\n});\n```\n\n## API Reference\n\n### Constructor\n\n```typescript\nnew sconsole(containerId?: string, options?: Partial\u003cConsoleOptions\u003e)\n```\n\n**Parameters:**\n- `containerId` (optional): HTML element ID where console will be mounted\n- `options` (optional): Configuration options\n\n### ConsoleOptions Interface\n\n```typescript\ninterface ConsoleOptions {\n    fontSize: string;     // Default: '14px'\n    fontFamily: string;   // Default: 'monospace'\n    theme: string;        // Default: 'dark'\n}\n```\n\n### Methods\n\n#### `addCommand(key: string, callback: () =\u003e void)`\nAdd a custom command to the console.\n\n```javascript\nconsole.addCommand('hello', () =\u003e {\n    console.appendToConsole('Hello, World!');\n});\n```\n\n#### `appendToConsole(message: string)`\nAdd a message to the console output.\n\n```javascript\nconsole.appendToConsole('This is a message');\nconsole.appendToConsole('\u003cspan style=\"color: red;\"\u003eHTML message\u003c/span\u003e');\n```\n\n#### `updateOptions(options: Partial\u003cConsoleOptions\u003e)`\nUpdate console options dynamically.\n\n```javascript\nconsole.updateOptions({\n    fontSize: '18px',\n    fontFamily: 'Courier New'\n});\n```\n\n#### `clear()`\nClear the console output and input field.\n\n```javascript\nconsole.clear();\n```\n\n### Built-in Commands\n\nThe console comes with several built-in commands:\n\n- `help` - List all available commands\n- `clear` - Clear console output\n- `options` - Show current configuration\n\n## Usage Examples\n\n### Basic Command Setup\n```javascript\n// Initialize console\nconst myConsole = new sconsole('console-container');\n\n// Add custom commands\nmyConsole.addCommand('time', () =\u003e {\n    myConsole.appendToConsole(new Date().toLocaleString());\n});\n\nmyConsole.addCommand('random', () =\u003e {\n    const num = Math.floor(Math.random() * 100);\n    myConsole.appendToConsole(`Random number: ${num}`);\n});\n\nmyConsole.addCommand('info', () =\u003e {\n    myConsole.appendToConsole('S-Console v1.0.0');\n    myConsole.appendToConsole('Built with TypeScript and UnoCSS');\n});\n```\n\n### Advanced Example with Custom Styling\n```javascript\n// Custom styled console\nconst styledConsole = new sconsole('styled-console', {\n    fontSize: '16px',\n    fontFamily: 'Fira Code, monospace',\n    theme: 'dark'\n});\n\n// Add command with formatted output\nstyledConsole.addCommand('status', () =\u003e {\n    styledConsole.appendToConsole('\u003cspan style=\"color: green;\"\u003e✓ System Online\u003c/span\u003e');\n    styledConsole.appendToConsole('\u003cspan style=\"color: blue;\"\u003eℹ Memory Usage: 45%\u003c/span\u003e');\n    styledConsole.appendToConsole('\u003cspan style=\"color: orange;\"\u003e⚠ 3 Warnings\u003c/span\u003e');\n});\n\n// Dynamic font adjustment\nstyledConsole.addCommand('bigtext', () =\u003e {\n    styledConsole.updateOptions({ fontSize: '20px' });\n});\n```\n\n### Integration with Existing Applications\n```javascript\n// Global access for debugging\nwindow.debugConsole = new sconsole('debug-panel');\n\n// Add application-specific commands\ndebugConsole.addCommand('reset', () =\u003e {\n    // Your app reset logic\n    localStorage.clear();\n    debugConsole.appendToConsole('Application reset complete');\n});\n\ndebugConsole.addCommand('version', () =\u003e {\n    debugConsole.appendToConsole(`App Version: ${APP_VERSION}`);\n});\n```\n\n## TypeScript Support\n\nS-Console is built with TypeScript and provides full type definitions:\n\n```typescript\nimport { sconsole } from 's-console';\nimport type { ConsoleOptions } from 's-console/types';\n\nconst options: ConsoleOptions = {\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    theme: 'dark'\n};\n\nconst typedConsole = new sconsole('container', options);\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build library\nnpm run build\n```\n\n## TODO - Roadmap \u0026 Improvements\n\n### 🚀 Core Functionality Enhancements\n- [ ] **Command Arguments Support** - Allow commands to accept parameters (e.g., `echo hello world`)\n- [ ] **Command History** - Add up/down arrow navigation through previous commands\n- [ ] **Tab Completion** - Auto-complete commands and provide suggestions\n- [ ] **Multi-line Command Support** - Allow commands that span multiple lines\n- [ ] **Command Aliases** - Support for creating command shortcuts/aliases\n- [ ] **Command Groups/Namespaces** - Organize commands into categories (e.g., `file.list`, `system.info`)\n- [ ] **Async Command Support** - Better handling for commands that return promises\n- [ ] **Command Validation** - Add input validation and error handling for commands\n\n### 🎨 UI/UX Improvements\n- [ ] **Theme System** - Implement proper light/dark theme switching with CSS custom properties\n- [ ] **Resizable Console** - Allow users to resize the console window\n- [ ] **Draggable Console** - Make the console window draggable\n- [ ] **Minimize/Maximize** - Add minimize and maximize functionality\n- [ ] **Custom CSS Classes** - Allow custom styling through configuration\n- [ ] **Animation Effects** - Add smooth transitions and typing animations\n- [ ] **Console Positioning** - Support different positioning (top, bottom, floating)\n- [ ] **Responsive Design** - Better mobile and tablet support\n\n### 📊 Advanced Features\n- [ ] **Command Output Formatting** - Support for tables, progress bars, and structured data\n- [ ] **File Operations** - Built-in commands for file system operations (where applicable)\n- [ ] **Console Logs Integration** - Capture and display console.log, console.error, etc.\n- [ ] **Export/Import** - Save and load console history and commands\n- [ ] **Plugin System** - Architecture for extending console with plugins\n- [ ] **Scripting Support** - Execute multiple commands in sequence\n- [ ] **Variable Storage** - Store and retrieve variables within console session\n- [ ] **Network Commands** - Built-in fetch/HTTP request capabilities\n\n### 🔧 Developer Experience\n- [ ] **Better TypeScript Types** - More comprehensive type definitions and generics\n- [ ] **Event System** - Emit events for command execution, console state changes\n- [ ] **API Improvements** - More intuitive method names and parameter handling\n- [ ] **Error Handling** - Comprehensive error handling and user feedback\n- [ ] **Debug Mode** - Enhanced debugging capabilities and verbose logging\n- [ ] **Command Documentation** - Auto-generated help text for commands\n- [ ] **Configuration Schema** - JSON schema for configuration validation\n\n### 📦 Build \u0026 Distribution\n- [ ] **NPM Package** - Publish to npm registry for easier installation\n- [ ] **Bundle Size Optimization** - Reduce library size and improve tree-shaking\n- [ ] **CSS-in-JS Option** - Eliminate need for separate CSS file\n- [ ] **Framework Integrations** - React, Vue, Angular wrapper components\n- [ ] **CDN Optimization** - Better CDN delivery and version management\n\n### 🧪 Testing \u0026 Quality\n- [ ] **Unit Tests** - Comprehensive test coverage with Jest/Vitest\n- [ ] **E2E Tests** - End-to-end testing with Playwright or Cypress\n- [ ] **Visual Regression Tests** - Ensure UI consistency across changes\n- [ ] **Performance Tests** - Benchmark console performance with large outputs\n- [ ] **Browser Compatibility Tests** - Automated testing across browsers\n- [ ] **Accessibility Testing** - WCAG compliance and screen reader support\n\n### 📝 Documentation \u0026 Examples\n- [ ] **Interactive Documentation** - Live examples and playground\n- [ ] **Video Tutorials** - Screen recordings showing features\n- [ ] **Migration Guide** - Guide for upgrading between versions\n- [ ] **Cookbook** - Common use cases and recipes\n- [ ] **API Reference** - Complete method and property documentation\n- [ ] **Contribution Guide** - Detailed guide for contributors\n\n### 🔒 Security \u0026 Performance\n- [ ] **XSS Prevention** - Sanitize HTML input and output\n- [ ] **Memory Management** - Limit console history to prevent memory leaks\n- [ ] **Performance Optimization** - Virtualized rendering for large outputs\n- [ ] **Input Sanitization** - Validate and sanitize user input\n- [ ] **CSP Compliance** - Content Security Policy compatibility\n\n### 🌟 Nice-to-Have Features\n- [ ] **Syntax Highlighting** - Color coding for different command types\n- [ ] **Command Templates** - Pre-built command templates for common tasks\n- [ ] **Keyboard Shortcuts** - Customizable keyboard shortcuts\n- [ ] **Multi-Console Support** - Multiple console instances on same page\n- [ ] **Console Sharing** - Share console sessions via URL or export\n- [ ] **Command Scheduling** - Schedule commands to run at intervals\n- [ ] **Integration APIs** - Easy integration with monitoring and logging systems\n\n## Browser Support\n\n- Modern browsers (Chrome, Firefox, Safari, Edge)\n- ES6+ support required\n- CSS Grid and Flexbox support required\n\n## Community Contributors\n\nS-Console is built by an amazing community of contributors who share a passion for creating great tools. Everyone contributes happily to make this project better! 🌟\n\n### Contributors\n\nWe'd like to thank our amazing contributors! 🙏\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/gusdeyw\"\u003e\n        \u003cimg src=\"https://github.com/gusdeyw.png?size=100\" width=\"80\" height=\"80\" alt=\"gusdeyw\"/\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\u003cb\u003egusdeyw\u003c/b\u003e\u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/davidgeri\"\u003e\n        \u003cimg src=\"https://github.com/davidgeri.png?size=100\" width=\"80\" height=\"80\" alt=\"davidgeri\"/\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\u003cb\u003edavidgeri\u003c/b\u003e\u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Join Our Community\n\nWe welcome contributions from everyone! Whether it's code, documentation, bug reports, or feature suggestions - every contribution makes a difference.\n\n\u003ca href=\"https://github.com/gusdeyw/s-console/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=gusdeyw/s-console\" alt=\"Contributors\" /\u003e\n\u003c/a\u003e\n\n#### How to Contribute\n\nPlease see our [Contributing Guide](./CONTRIBUTING.md) for detailed information on how to get started with contributing to S-Console.\n\n## License\n\nMIT License - see LICENSE file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgusdeyw%2Fs-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgusdeyw%2Fs-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgusdeyw%2Fs-console/lists"}