Collaborative JavaScript Debugging App

Related tags

Editors jsbin
Overview

IMPORTANT: this current version of jsbin (v4.x.x) is no longer actively maintained and the new version of jsbin (v5) is currently in active development. This means that pretty much all the docs in this repo will be soon out of date. Please be warned ❤️

☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️ ☝️


JS Bin

JS Bin is an open source collaborative web development debugging tool.

If you use JS Bin locally...

It likely means you're not going to subscribe as a pro user - which is how we're sustaining our project, which is cool, but please consider donating via Gratipay here.

What can JS Bin do?

  • Write code and have it both save in real-time, but also render a full preview in real-time
  • Help debug other people's JavaScript, HTML or CSS by sharing and editing urls
  • CodeCast - where you share what you're typing in JS Bin in real-time
  • Remote rendering - view the output of your JS Bin on any device on any platform, updating in real-time
  • Processors, including: coffee-script, LESS, Markdown and Jade.
  • Debug remote Ajax calls

Find out more about JS Bin's features via the YouTube JS Bin playlist.

Who built this?

JS Bin was built by Remy Sharp and is completely open source and available at http://github.com/jsbin/jsbin. You can also follow @rem on Twitter where he'll tweet about JavaScript, HTML 5 and other such gems.

If you would like to work with Remy and his company, Left Logic on a front end development project, please get in touch.

UX was kindly donated by Danny Hope who also tweets as @yandle.

The vast majority of the port from PHP to Node in June 2012 was done by Aron Carroll who also plays in github as @aron.

A short history

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code - new tabs doesn't). Once you're happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

The original idea spawned from a conversation with another developer in trying to help him debug an Ajax issue. The original aim was to build it using Google's app engine, but in the end, it was John Resig's Learning app that inspired me to build the whole solution in JavaScript with liberal dashes of jQuery and a tiny bit of LAMP for the saving process.

Version 1 of JS Bin took me the best part of 4 hours to develop back in 2008, but version 2 was been rewritten from the ground up and is completely open source.

Build Process

JS Bin has been designed to work both online at jsbin.com but also in your own locally hosted environment - or even live in your own site (if you do host it as a utility, do let us know by pinging @js_bin on twitter).

Historically JS Bin was built on PHP, but has since moved to Node. The PHP flavour is no longer supported, however everything else released in v3.0.0 of JS Bin is available in both, but all releases after are only supported in the Node environment. Your PHP mileage may vary!

For detailed instructions on how to build JS Bin please see the running your own JS Bin document.

If you install Node.js installation is easy:

$ npm install -g jsbin
$ jsbin

Optionally point JS Bin to your config:

$ JSBIN_CONFIG=~/config.local.json jsbin

Then open your browser to http://localhost:3000 and you have a fully working version of JS Bin running locally.

API

A simple REST based API exists for anonymous users if it is enabled in your config.*.json, or can be restricted to registered users with a key specified in ownership.api_key

Authentication is required for all API requests unless one of the following api configuration options are set:

  • api.allowAnonymousReadWrite - if set to true allows GET and POST operations to the API anonymously (without an API key)
  • api.allowAnonymousRead - if set to true allows GET operations to the API anonymously (without an API key)

By default, config.default.json has api.allowAnonymousRead set to true.

Curl authentication examples:

$ curl http://{{host}}/api/:bin -H "Authorization: token {{token_key}}"
$ curl http://{{host}}/api/:bin?api_key={{token_key}}

End points are:

  • GET /api/:bin - Retrieve the latest version of the bin with that specified ID
  • GET /api/:bin/:rev - Retrieve the specific version of the bin with the specified ID and revision
  • POST /api/save - Create a new bin, the body of the post should be URL encoded and contain html, javascript and css parameters
  • POST /api/:bin/save - Create a new revision for the specified bin, the body of the post should be URL encoded and contain html, javascript and css parameters

Backers

Become a backer and show your support to our open source project.

Sponsors

Does your company use JS Bin? Ask your manager or marketing team if your company would be interested in supporting our project. Support will allow the maintainers to dedicate more time for maintenance and new features for everyone. Also, your company's logo will show on GitHub --who doesn't want a little extra exposure? Here's the info.

Comments
  • Sticky: Can't register if github username is taken

    Sticky: Can't register if github username is taken

    JS Bin has had it's "regular" registration removed due to aggressive abuse by spammers.

    If, however you still can't register with JS Bin through github, I can manually add your email address to a whitelist that will let you through the regular registration.

    However this will only be available to users who have a proven history on the internet, and I'll be looking to github history first. Think of it like the ebay reputation: if you're new, then it's going to weigh against you.

    Also, this is entirely a manual process and will only happen during new releases. If this becomes too much of a drain, I will remove the functionality, or if this is abused by users requesting access when they actually already have a github account and could use that, I'll also remove the functionality. It's entirely up to you.

    To apply for this whitelist you need to do at least two things:

    1. Comment on this thread with who you are, and that you've tried to sign in with github and any extra background that proves you're a good citizen of the web!
    2. DM the @js_bin twitter account with your email address and the link to your comment on this thread.

    If you don't include the link to your comment on the thread, your request will be ignored.

    Sorry, lots of rules, but it's just me running the show!

    stale 
    opened by remy 215
  • URGENT: need script to remove spam [now fixed, but still needs some work]

    URGENT: need script to remove spam [now fixed, but still needs some work]

    So, here's the situation: spammers have filled the database with crud to 100% capacity. I woke up this morning at 6am to a few tweets and emails from users notifying me of this:

    https://twitter.com/eggheadio/status/580925169671127041

    I've got the start of a script that identifies spam users, but there's nothing consistent in the spammy bins (though usually they don't have any CSS or JS).

    The bigger problem is: I'm solo parenting my two young kids over the next 2 days and I don't have time to fix this. This sucks, but my kids come first.

    So, I'm calling on you - can you help?

    I reckon this is one approach:

    1. Flag all spammy users (they come from a small subset of email domains) (script included below).
    2. Get all bins from spammy users and delete them
    3. Find bins that have HTML over a certain size... 2k? and no JS (so it's roughly fitting a profile) and has anonymous URL structure (url.length > 6) and remove.

    This is a aggressive, but the disk space is at capacity and saving doesn't work at all right now.

    Constraints:

    1. The database is >15million records, so you can't just do a massive delete query, it needs to find records in chunks and needs to ideally remove individually.
    2. User should be flagged with UPDATE ownership SET flagged=1 WHERE name="bad-guy"

    Notes:

    1. User table is called ownership
    2. User bin tables is called owners - yes, I know, shit names
    3. Bins are stored in sandbox
    var Sequelize = require('sequelize');
    var sequelize = new Sequelize('database', 'root', 'password');
    
    var spammy = ['spam-email.com'];
    
    sequelize.query("SELECT * FROM `ownership`", { type: sequelize.QueryTypes.SELECT})
      .then(function(users) {
        var targets = users.filter(function (user) {
          var match = spammy.filter(function (spam) {
            return (user.email.indexOf('@' + spam) !== -1)
          });
          return match.length > 0;
        });
    
        targets.forEach(function (spam) {
    
        });
    
    console.log(targets.length);
      })
    
    help wanted 
    opened by remy 82
  • Preprocessors

    Preprocessors

    JS Bin v3 was written to support preprocessors. It's pretty simple to add new ones: https://github.com/remy/jsbin/commit/0fdf06

    I originally imaged that I could get SASS working locally, but I'm not 100% convinced.

    I wanted to put this out to the public as to which preprocessors you think should be supported by default (note that "by default" means you'll be able to write plugins for jsbin that add new preprocessors - along with other things).

    Current thinking:

    • HAML (using ported JS version)
    • Jade?
    • SASS (if possible)

    Anything else? Are these bad ideas? I know jsfiddle has support for JavaScript 1.7 - is there demand for that too?

    opened by remy 52
  • nginx server to deliver static content

    nginx server to deliver static content

    I think this will be necessary.

    Desperately need someone who knows what they're doing with nginx to route all static content through nginx and route dynamic content to the node server.

    Please get in touch if you think you can help!

    Edit

    I should also add that WebSockets and EventStreams (i.e. persistent connections) are made to the Node server - so I'm expecting nginx would hand over those requests, rather than proxy them through itself? Like I said - I've not used nginx at all, so this may all be obvious to someone else!

    opened by remy 47
  • Quasi ownership

    Quasi ownership

    So due to overwhelming feedback, it looks like the ownership urls will look like this:

    http://jsbin.com/remy/canvas/12/edit
    

    The aim is to have a login-less system, where you can set your home location - in this case remy. When you save or clone a new bin it will automatically get associated with your home location.

    You will be able to navigate to:

    http://jsbin.com/remy/list
    

    And it will show a list of those associated bins saved. Perhaps with a preview option (which I've gone ahead and already made).

    Note that there's nothing stopping someone from setting their home to remy too - I'm okay with that as it's a feature of the login-less system. To be honest, this is a pro-user type feature anyway, average devs probably won't use this feature.

    Questions that remain are:

    1. If you set a home location, should this appear in the url all the time? (as per the link above).
    2. Should the home location in fact be invisible - and just jsbin.com/list show the associated bins?
    3. If home locations are invisible, it would be easy to forget that the location isn't set at all.
    4. There will be a way to disown a bin from a home location.
    5. If we do have home visible, when you navigate to jsbin.com it will redirect you to your home location automatically.

    Any other things that should be considered here?

    feature accepted 
    opened by remy 41
  • Issues with Exporting as Gist

    Issues with Exporting as Gist

    Hello,

    Recently I have been having issues exporting my workspaces as Gists. A few months ago I use to be able to export a gist and it would appear GitHub with my account. Now when I "Export as Gist" the Gist appears as Anonymous even when I am logged in with my linked GitHub account.

    This issue is common across several computers, browsers and with other users.

    stale 
    opened by Bijesse 30
  • Varnish

    Varnish

    The /etc/default/varnish config:

    # Configuration file for varnish
    #
    # /etc/init.d/varnish expects the variables $DAEMON_OPTS, $NFILES and $MEMLOCK
    # to be set from this shell script fragment.
    #
    
    # Maximum number of open files (for ulimit -n)
    NFILES=131072
    
    # Maximum locked memory size (for ulimit -l)
    # Used for locking the shared memory log in memory.  If you increase log size,
    # you need to increase this number as well
    MEMLOCK=82000
    
    # Default varnish instance name is the local nodename.  Can be overridden with
    # the -n switch, to have more instances on a single server.
    INSTANCE=$(uname -n)
    
    # This file contains 4 alternatives, please use only one.
    
    ## Alternative 1, Minimal configuration, no VCL
    #
    # Listen on port 6081, administration on localhost:6082, and forward to
    # content server on localhost:8080.  Use a 1GB fixed-size cache file.
    #
    # DAEMON_OPTS="-a :6081 \
    #              -T localhost:6082 \
    #            -b localhost:8080 \
    #            -u varnish -g varnish \
    #            -S /etc/varnish/secret \
    #            -s file,/var/lib/varnish/$INSTANCE/varnish_storage.bin,1G"
    
    
    ## Alternative 2, Configuration with VCL
    #
    # Listen on port 6081, administration on localhost:6082, and forward to
    # one content server selected by the vcl file, based on the request.  Use a 1GB
    # fixed-size cache file.
    #
    DAEMON_OPTS="-a :6081 \
                 -T localhost:6082 \
                 -f /etc/varnish/default.vcl \
                 -S /etc/varnish/secret \
                 -s file,/var/lib/varnish/$INSTANCE/varnish_storage.bin,1G"
    

    My own defaults.vcl:

    # node is the defalut
    backend default {
       .host = "127.0.0.1";
       .port = "8000";
       .connect_timeout = 1s;
       .first_byte_timeout = 2s;
       .between_bytes_timeout = 60s;
       .max_connections = 800;
    }
    
    # nginx is running on port 80
    backend nginx {
       .host = "127.0.0.1";
       .port = "81";
       .connect_timeout = 5s;
       .first_byte_timeout = 30s;
       .between_bytes_timeout = 60s;
       .max_connections = 800;
    }
    
    sub vcl_recv {
        if (req.http.host ~ "^static.jsbin.com") {
           set req.backend = nginx;
           return (lookup);
        }
    
        if (req.http.Accept) {
           if (req.http.Accept ~ "text/event-stream") {
             return (pipe);
           }
        }
    
    
        return (pass);
    }
    
    sub vcl_miss {
      if ( req.backend != nginx ) {
        set bereq.first_byte_timeout = 1m;
      }
    }
    

    Varnish is running as the following (result of ps):

    root      6331     1  0 07:50 ?        00:00:00 varnishd -f /etc/varnish/default.vcl -s malloc,1G -T 127.0.0.1:2000
    nobody    6332  6331  0 07:50 ?        00:00:55 varnishd -f /etc/varnish/default.vcl -s malloc,1G -T 127.0.0.1:2000
    
    opened by remy 26
  • Installing jsbin via NPM on Windows 7 x64

    Installing jsbin via NPM on Windows 7 x64

    I'm trying to install jsbin using the command:

    npm install -g jsbin

    My first error was issue #338, which I resolved by adding Git (/bin) to my PATH. Then I hit the issue with bcrypt #94, which I solved by installing OpenSSL-Win32 (and OpenSSL-Win64 for good measure) and adding them (/lib and /bin) to my PATH.

    From there, I updated my Python 2.7.3 to 2.75. I installed SQLite WIndows (and sqlite3 in node). I already had the Windows 7.1 SDK and Visual Studio 2010 and Visual Studio 2012 installed, but I also installed the C++ 2005, 2008, 2010 and 2012 (x86 and 84) libraries. I ran Windows Update. I also installed the Visual Studio 2010 C++ Express edition as recommended by other posts.

    Nothing so far has prevailed. I should note I can install various other packages without issue (Grunt, Brunch, Yeoman, etc).

    This is the result of my last attempt, running:

    npm -dd install -g jsbin

    Any hope?

    NOTE: the npm-debug.log does not appear to fully reflect all of the errors I see in the command prompt (which I cannot see all of much less copy/paste, because this is Windows). Nonetheless, log begins: https://gist.github.com/3805457

    bug - confirmed 
    opened by crfroehlich 25
  • Log in issue (it worked before, but not now)

    Log in issue (it worked before, but not now)

    @remybach can you send me the step it's failing on.

    You need to open you devtools and watch the network access, then post the result for the sethome request (inside that JSON response is the step it failed at which might help myself and @aron find the source of the issue).

    It should look something like this:

    failed log in

    opened by remy 23
  • can't login with github

    can't login with github

    On jsbin.com, after I press login and login or register via github, nothing happens, it just returns me back to homepage with the yellow login or register button still there.

    When I did it first time, it did actually ask me for rights, after I confirmed them, it threw me back to index without registering or logging me in and this has been happening ever since(minus that rights step).

    bug - confirmed 
    opened by fxck 22
  • Milestone Proliferation

    Milestone Proliferation

    I really can't make heads or tails of the JS Bin version numbers. I can see if I hit Ctrl+S, it generates a new version, but it also increases the version number for other actions that I have been unable to identify.

    I end up with countless versions that serve no purpose. Also, I like to keep a separate window open to test the result in a full browser window. But the version keeps changing and I'm chasing errors until I figure out the version (and URL) changed again.

    Also, is there even a way to delete unnecessary versions?

    bug - pending confirmation 
    opened by SoftCircuits 22
  • Typo when registering

    Typo when registering

    I went to register on the site:

    https://jsbin.com/register

    I noticed when this message came up:

    I am so sorry, but only sign in via Github is accepted now. If you have trid to register through Github already and cannot get in, please see this thread for an alternative method.

    tried is spelled wrong.

    (I realize this isn't an issue with jsbin's source code, but couldn't find a contact on the jsbin site)

    opened by ururk 0
  • Payment for upgrade is impossible - link to Stripe learn more.

    Payment for upgrade is impossible - link to Stripe learn more.

    During attempt of payment, instead payment completed, I got message about Stripe “intent” functionality needed to proceed with payment (probably something with 3Ds payment confirmation, but I am not sure). Please, could you add option to pay via PayPal? It looks like this issue will be fixed in 1,000 years or never, so PayPal is much quicker solution. I want to pay for upgrade, and I am denied. That is insane.

    opened by learningonthebeach 0
  • Add Library import fails

    Add Library import fails

    The Add Library button doesn't work the way expected. It prepends the script tag to the html output instead of putting it into . Problem also described and solved here - https://stackoverflow.com/questions/53323843/how-to-make-lodash-import-in-jsbin

    opened by ambuddy 0
  • Fix GitHub link of JSBin in About page

    Fix GitHub link of JSBin in About page

    In the About page, the link to the JSBin repo is http://github.com/remy/jsbin. This link is deprecated as the new link is https://github.com/jsbin/jsbin.

    opened by HoangTuan110 0
Owner
Dave, The Bin Bot
Dave, The Bin Bot
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Nov 29, 2022
JavaScript port of Vim

Vim.js : JavaScript port of Vim A Tool/Toy for Non-Beginners by Lu Wang Try it online Variations NW.js Firefox extension Asyncify Streamline.js Recomm

Lu Wang 4.4k Nov 20, 2022
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

TinyMCE TinyMCE is the world's most advanced open source core rich text editor. Trusted by millions of developers, and used by some of the world's lar

Tiny 12.2k Nov 28, 2022
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Nov 23, 2022
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

SimpleMDE - Markdown Editor A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allo

Sparksuite 9.2k Nov 19, 2022
Sweeten your JavaScript.

Hygienic Macros for JavaScript! Macros allow you to build the language of your dreams. Sweeten JavaScript by defining new syntax for your code. Curren

null 4.6k Nov 20, 2022
ppo is a super small and useful utils library for JavaScript 🐝🐜

Overview Every frontend developer has written his own utils library, and we often write methods that are easily forgotten and highly used. ppo is a su

anonymous namespace 105 Jul 21, 2022
A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Kothing 34 Oct 26, 2022
Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.

Importmap for Rails Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling. Installation ... Usage ... License Im

Ruby on Rails 776 Nov 23, 2022
Projeto voltado para aplicação de conhecimentos referente a manipulação da árvore DOM via JavaScript.

Adivinha-número Opa oi oi! Trago aqui um projeto que fiz visando aplicar e testar meus conhecimentos de manipulação da árvore DOM via JavaScript. Você

Gabriel Rodrigues 0 May 7, 2022
Pure javascript based WYSIWYG html editor, with no dependencies.

SunEditor Pure javscript based WYSIWYG web editor, with no dependencies Demo : suneditor.com The Suneditor is a lightweight, flexible, customizable WY

Yi JiHong 1k Nov 21, 2022
A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers

debug A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers. Installation $ npm ins

Sloth 10.5k Nov 22, 2022
This a collaborative repository to us play with javascript basics. Welcome here!

➡️ PT-BR A HacktoberFest project to put your frontend skills to the test. About This is a beginner-friendly repository for educational purposes that w

Ana Silveira 14 Nov 22, 2022
Quo is a (free) debugging companion app to help you debug dumped variables, the dumped variables will appear in this Quo client instead of the traditional way which is often tedious.

Quo is a debugging companion to help you debug dumped variables, the dumped variables will appear in this Quo client instead of via the traditional way which is often tedious.

Protoqol 18 Oct 16, 2022
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Nov 27, 2022
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Nov 23, 2022
A collaborative Whiteboard powered by the [matrix] protocol and infrastucture.

TheBoard A collaborative Whiteboard powered by the [Matrix] protocol and infrastructure. Table of Content: Introduction DISCLAIMER How this project ca

Timo 389 Nov 23, 2022
A collaborative newsroom documentation site, powered by Google Docs.

A collaborative newsroom documentation site, powered by Google Docs.

The New York Times 1k Nov 25, 2022
A collaborative project to parody the once exceedingly popular video game Cloud from ThatGameCompany.

A collaborative project to parody the once exceedingly popular video game Cloud from ThatGameCompany.

Yuuki Sora 3 Mar 5, 2022