{"id":25204403,"url":"https://github.com/aakashdinkarh/js-ts-playground","last_synced_at":"2026-05-02T06:44:31.964Z","repository":{"id":275442246,"uuid":"926093733","full_name":"aakashdinkarh/js-ts-playground","owner":"aakashdinkarh","description":"A browser-based JavaScript/TypeScript playground with a Chrome DevTools-like console. Features include real-time code execution, error handling, and detailed output formatting for various data types including Promises, functions, and objects. Built with React and TypeScript.","archived":false,"fork":false,"pushed_at":"2025-03-30T20:17:00.000Z","size":973,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T21:24:33.148Z","etag":null,"topics":["browser-ide","code-editor","code-execution","coding","development-tools","ide","interactive-coding","javascript","js-playground","online-editor","playground","ts-playground","typescript","web-development","web-ide"],"latest_commit_sha":null,"homepage":"https://aakashdinkar.in/js-ts-playground/","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/aakashdinkarh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-02T14:42:24.000Z","updated_at":"2025-03-01T20:44:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b6d8420-74bf-4134-9d7a-dde3f5577099","html_url":"https://github.com/aakashdinkarh/js-ts-playground","commit_stats":null,"previous_names":["aakashdinkarh/js-ts-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashdinkarh%2Fjs-ts-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashdinkarh%2Fjs-ts-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashdinkarh%2Fjs-ts-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashdinkarh%2Fjs-ts-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aakashdinkarh","download_url":"https://codeload.github.com/aakashdinkarh/js-ts-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266482,"owners_count":20910832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["browser-ide","code-editor","code-execution","coding","development-tools","ide","interactive-coding","javascript","js-playground","online-editor","playground","ts-playground","typescript","web-development","web-ide"],"created_at":"2025-02-10T08:17:46.608Z","updated_at":"2026-05-02T06:44:26.947Z","avatar_url":"https://github.com/aakashdinkarh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript/TypeScript Playground\n\nA browser-based JavaScript/TypeScript playground with a Chrome DevTools-like console. Built with React and TypeScript, this playground allows you to experiment with code and see the results in real-time.\n\n## Features\n\n- 🚀 Real-time code execution\n- 🎯 TypeScript support with live transpilation\n- 🛠️ Chrome DevTools-style console output\n- 🐛 Detailed error handling and stack traces\n- 📊 Rich formatting for complex data types:\n  - Promises with state tracking\n  - Functions with full body display\n  - Objects and Arrays\n  - Primitive types with syntax highlighting\n- ⚡ Auto-run capability\n- 🎨 Syntax highlighting\n- 📱 Progressive Web App (PWA) support\n- 🔄 Offline capability with smart caching:\n  - Monaco editor resources\n  - Application assets\n  - Intelligent cache management\n  - Automatic cache updates\n\n## Getting Started\n\n\n### Installation\n\n1. Clone the repository\n   ```bash\n   git clone https://github.com/aakashdinkarh/js-ts-playground.git\n   cd js-ts-playground\n   ```\n\n2. Install dependencies\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. Start the development server\n   ```bash\n   npm run start\n   # or\n   yarn start\n   ```\n\n4. Open your browser and navigate to `http://localhost:3000`\n\n## Usage\n\n1. Write your JavaScript or TypeScript code in the editor\n2. Code will auto-execute as you type (if enabled)\n3. View results in the console output below\n4. Use console methods like `console.log()`, `console.error()`, etc.\n5. Toggle TypeScript support using the language selector\n\n### Example\n\n```typescript\n// Basic example\nconsole.log(\"Hello, World!\");\n// Promise example\nasync function fetchData() {\nconst response = await fetch('https://api.example.com/data');\nconst data = await response.json();\nconsole.log(data);\n}\n// Object inspection\nconst user = {\nname: 'John Doe',\nage: 30,\nroles: ['admin', 'user']\n};\nconsole.log(user);\n```\n\n## Offline Support\n\nThe playground implements a sophisticated caching strategy that enables:\n\n- ⚡ Fast loading times with cached resources\n- 🔌 Offline functionality\n- 📦 Smart caching of:\n  - Monaco editor and TypeScript resources\n  - Application assets and static files\n  - Common file types (JS, CSS, images, fonts)\n- 🔄 Intelligent cache management:\n  - Automatic background updates\n  - Non-blocking cache operations\n  - Graceful fallback to expired cache on network failure\n- 💾 Two-tier caching system:\n  - Regular cache (24 hours) for application assets\n  - Long-term cache (7 days) for stable CDN resources\n\nThe playground will work even without an internet connection once you've visited it at least once. The service worker ensures optimal performance by:\n- Pre-caching critical resources during installation\n- Using a stale-while-revalidate strategy for dynamic content\n- Managing cache cleanup and updates in the background\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- Built with [React](https://reactjs.org/)\n- Code editing powered by [Monaco Editor](https://microsoft.github.io/monaco-editor/)\n\n## Support\n\nIf you find any bugs or have feature requests, please create an issue in the GitHub repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faakashdinkarh%2Fjs-ts-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faakashdinkarh%2Fjs-ts-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faakashdinkarh%2Fjs-ts-playground/lists"}