# jsbin/jsbin

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jsbin-jsbin).**

4,421 stars · 1,264 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jsbin/jsbin
- Homepage: http://jsbin.com
- awesome-repositories: https://awesome-repositories.com/repository/jsbin-jsbin.md

## Description

JSBin is a collaborative JavaScript playground and online frontend sandbox for writing, executing, and debugging web code. It provides a real-time code editor and an integrated environment that instantly renders HTML, CSS, and JavaScript with a live preview.

The platform is designed for live coding demonstrations and pair programming, featuring a broadcasting environment that transmits keystrokes and code changes to other users instantly. It supports real-time synchronization for multiple developers through shared live sessions and includes a transpilation tool to convert alternative programming languages into standard web formats for browser execution.

Additional capabilities include remote JavaScript debugging, network request inspection, and the ability to stream rendered output to external devices for cross-platform testing. The system also supports snippet forking for version management and provides options for exporting project states to external hosting providers.

## Tags

### Development Tools & Productivity

- [Real-Time Collaborative Editing](https://awesome-repositories.com/f/development-tools-productivity/real-time-collaborative-editing.md) — Enables multiple developers to write and edit JavaScript code simultaneously through shared live sessions.
- [Frontend Prototyping](https://awesome-repositories.com/f/development-tools-productivity/interactive-prototyping/code-prototyping/frontend-prototyping.md) — Allows quickly writing and rendering HTML, CSS, and JavaScript to preview projects without local setup.
- [Broadcasting Environments](https://awesome-repositories.com/f/development-tools-productivity/live-coding-environments/broadcasting-environments.md) — Ships a broadcasting environment for streaming keystrokes and code changes for educational purposes.
- [Cross-Device Output Streaming](https://awesome-repositories.com/f/development-tools-productivity/cross-device-output-streaming.md) — Streams the rendered output of a code session to external devices for cross-platform testing. ([source](https://github.com/jsbin/jsbin#readme))
- [JavaScript and TypeScript Debugging](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/debugging-diagnostics/javascript-and-typescript-debugging.md) — Provides tools for testing and fixing JavaScript code in a browser while sharing live state with others.

### Web Development

- [Editor Live Previews](https://awesome-repositories.com/f/web-development/live-preview-systems/editor-live-previews.md) — Executes code as it is written and displays a live preview of the resulting output for immediate visual feedback. ([source](https://github.com/jsbin/jsbin#readme))
- [Frontend Technology Sandboxes](https://awesome-repositories.com/f/web-development/frontend-technology-sandboxes.md) — Provides an interactive environment for instantly rendering HTML, CSS, and JavaScript with a live preview.
- [WebSocket State Synchronization](https://awesome-repositories.com/f/web-development/state-syncing-reactivity/websocket-state-synchronization.md) — Syncs real-time keystrokes and editor states across multiple clients using bidirectional WebSocket communication.

### Part of an Awesome List

- [Language Transpilers](https://awesome-repositories.com/f/awesome-lists/devtools/language-transpilers.md) — Converts source code from alternative languages into browser-compatible formats for immediate execution. ([source](https://github.com/jsbin/jsbin/blob/master/README.markdown))
- [Development Environments](https://awesome-repositories.com/f/awesome-lists/devtools/development-environments.md) — Collaborates on JavaScript debugging and development.
- [ES6入门](https://awesome-repositories.com/f/awesome-lists/more/es6.md) — Listed in the “ES6入门” section of the Awesome Frontend awesome list.

### Business & Productivity Software

- [Real-time Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-tools/real-time-collaboration/real-time-collaborative-editors.md) — Synchronizes code changes across multiple connected users instantly for collaborative development and debugging. ([source](https://github.com/jsbin/jsbin/blob/master/TODO.md))
- [Code Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-tools/real-time-collaboration/real-time-collaborative-editors/code-editors.md) — Provides a shared editing space for multiple developers to modify source code simultaneously with syntax awareness.

### DevOps & Infrastructure

- [Code Execution Sandboxes](https://awesome-repositories.com/f/devops-infrastructure/execution-environments/code-execution-runtimes/code-execution-sandboxes.md) — Renders written code within an isolated iframe sandbox to prevent scripts from crashing the main application.

### Programming Languages & Runtimes

- [Source-to-JavaScript Transpilers](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-transpilers/source-to-javascript-transpilers.md) — Translates alternative programming languages into standard web formats for immediate execution in the browser.
- [On-the-Fly Module Transpilers](https://awesome-repositories.com/f/programming-languages-runtimes/on-the-fly-module-transpilers.md) — Converts non-standard languages into executable JavaScript directly in the browser for immediate runtime use.

### Software Engineering & Architecture

- [Operational Transformation Sync](https://awesome-repositories.com/f/software-engineering-architecture/data-sync-conflict-resolution/operational-transformation-sync.md) — Implements operational transformation to ensure multiple users can edit the same document simultaneously without conflicts.
- [URL State Serialization](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/url-state-serialization.md) — Encodes the current state of the code bin into the URL for instant sharing and restoration.

### Testing & Quality Assurance

- [Code Execution Playgrounds](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/component-testing/interactive-playgrounds/code-execution-playgrounds.md) — Provides a web-based environment combining a code editor with real-time execution and multi-user synchronization.
- [Cross-Device Testing Tools](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/test-frameworks/execution-and-infrastructure/test-infrastructure-configuration/cross-device-testing-tools.md) — Allows viewing the rendered output of a web project on different devices to verify cross-platform compatibility.

### User Interface & Experience

- [Keystroke Broadcasting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/live-code-execution/keystroke-broadcasting.md) — Broadcasts keystrokes and code execution in real time to demonstrate feature logic to others.