![\"Welcome](\"https://static.jsbin.com/images/dave.min.svg\")
\n \n\n
\n\n\n \n
\n \n
\n \n \n \n ![](\"https://static.jsbin.com/images/favicon.svg\")
File\n
\n File\n \n \n
\n \n
\n \n Login or Register\n
\n \n
\n \n \n ![](\"https://static.jsbin.com/images/github-32.png\")
\n Login or Register via GitHub\n \n \n Or\n use your email address\n \n
\n \n Login or Register via GitHub\n \n \n Or\n use your email address\n \n \n
\n\n \n \n \n Load cached copy from \n
\n\n\n \n
\n\n
\n \n
HTMLSaved
\n \n \n
\n \n
\n x
<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\"> feather.replace(); // DOM Elements const elements = { sidebar: document.getElementById('sidebar'), mainContent: document.getElementById('mainContent'), toggleBtn: document.getElementById('toggleBtn'), userBtn: document.getElementById('userBtn'), userDropdown: document.getElementById('userDropdown'), themeToggle: document.getElementById('themeToggle') }; // Event Handlers const toggleSidebar = () => { elements.sidebar.classList.toggle('collapsed'); elements.mainContent.classList.toggle('collapsed'); }; const toggleUserMenu = (e) => { e.stopPropagation(); elements.userDropdown.classList.toggle('active'); }; const handleThemeToggle = () => { document.body.setAttribute('data-theme', elements.themeToggle.checked ? 'dark' : 'light'); localStorage.setItem('theme', elements.themeToggle.checked ? 'dark' : 'light'); }; // Event Listeners elements.toggleBtn.addEventListener('click', toggleSidebar); elements.userBtn.addEventListener('click', toggleUserMenu); elements.themeToggle.addEventListener('change', handleThemeToggle); // Close dropdown when clicking outside document.addEventListener('click', (e) => { if (!elements.userBtn.contains(e.target)) { elements.userDropdown.classList.remove('active'); } }); // Initialize theme const initTheme = () => { const savedTheme = localStorage.getItem('theme') || 'light'; document.body.setAttribute('data-theme', savedTheme); elements.themeToggle.checked = savedTheme === 'dark'; }; // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { elements.userDropdown.classList.remove('active'); } }); // Initialize initTheme(); </script></body></html>\n
CSSSaved\n
\n \n \n
\n \n \n
\n \n
JavaScriptSaved\n
\n \n \n
\n \n \n
\n \n \n
\n Console\n \n
\n - :help
- :reset - destroy state and start afresh\n:history - list current session history\n:load <url> - to inject new DOM\n:load <script_url> - to inject external library\n load also supports following shortcuts:
jquery, underscore, prototype, mootools, dojo, rightjs, coffeescript, yui.
eg. :load jquery\n:clear - to clear contents of the console\n:about jsconsole
\n
\n Output\n \n \n \n ![](\"https://static.jsbin.com/images/popout.png\")
\n \n 1255px\n
\n \n \n 1255px\n \n \n \n \n \n \n
\n \n\n
\n\n \n You can jump to the latest bin by adding /latest to your URL\n
\n
\n \n \n
\n
\nKeyboard Shortcuts
\n| Shortcut | \nAction | \n
|---|---|
| ctrl + [num] | \nToggle nth panel | \n
| \n \n \n \n \n | \n|
| ctrl + 0 | \nClose focused panel | \n
| ctrl + enter | \nRe-render output. If console visible: run JS in console | \n
| Ctrl + l | \nClear the console | \n
| ctrl + / | \nToggle comment on selected lines | \n
| ctrl + ] | \nIndents selected lines | \n
| ctrl + [ | \nUnindents selected lines | \n
| tab | \nCode complete & Emmet expand | \n
| ctrl + shift + L | \nBeautify code in active panel | \n
| ctrl + s | \nSave & lock current Bin from further changes | \n
| ctrl + shift + s | \nOpen the share options | \n
| ctrl + y | \nArchive Bin | \n
Complete list of JS Bin shortcuts |
\n
\n \n \n
\n
\nJS Bin URLs
\n| URL | \nAction | \n
|---|---|
| / | \nShow the full rendered output. This content will update in real time as it's updated from the /edit url. | \n
| /edit | \nEdit the current bin | \n
| /watch | \nFollow a Code Casting session | \n
| /embed | \nCreate an embeddable version of the bin | \n
| /latest | \nLoad the very latest bin (/latest goes in place of the revision) | \n
| /[username]/last | \nView the last edited bin for this user | \n
| /[username]/last/edit | \nEdit the last edited bin for this user | \n
| /[username]/last/watch | \nFollow the Code Casting session for the latest bin for this user | \n
| /quiet | \nRemove analytics and edit button from rendered output | \n
| .js | \nLoad only the JavaScript for a bin | \n
| .css | \nLoad only the CSS for a bin | \n
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |
\n
\n\n\n\n\n\n\n\n ![]()
\n \n \n
\n\n
\n - \n
- Transfer \n
- Clone \n
- Save as template \n
- Export gist \n
- Download \n
- Delete \n
0viewers
\n