This is awesome! I constantly look for live editors but haven't found a good one for front-end. I tried Adobe Brackets, Firebug (for in-window editing) but all had their complexities and constraints. Scrathpad.io is by far the most intuitive and best one for HTML and CSS out there!
The first thing that I loved about this, that drives me crazy on other real-time online editors, is that pressing "tab" actually creates a tabbed space, and doesn't change the active textarea. Nice job!
Any plan on open sourcing the code to do the real-time editing? I would love to use this real-time editing concept in a project I'm working on.
Basically on keyup I ship the whole contents of the editor and the cursor position to firebase. I'm also keeping track of all the active connections to a scratchpad document so I know who is typing. Anytime the code changes on the server, it triggers a callback function on each client that will update the contents of the textarea. If someone else is typing, the document is locked so only 1 person can type at a time. This way I can avoid all the potential merge conflicting type things that can happen.
Not sure what server architecture you're using, but in Node.js there is a pretty amazing package that integrates with ACE called ShareJS (http://sharejs.org/).
Have you experimented with synchronizing cursors at all?
Thanks! I'll have to read up on OT. Our backend is totally hosted by Firebase, other than a simple Sinatra app that generates the unique IDs.
When you say synchronizing cursors, do you mean having multiple cursors (google docs style) or having a single cursor be in the same position for all clients? We are doing the latter, and I wasn't aware it was possible to do the former with ace but I would love to do it if I can
Hi, I'm one of the Firebase engineers working on keeping clients connected.
We use a mix of different methods to maintain a connection. We normally start with our custom long polling implementation and move to websockets when they are available. We do not currently make use of any flash sockets.
Seems that I can't reply to the child of my sibling comment so I'm replying here.
ACE is quite ridiculously powerful. On its primary implementation (http://c9.io), it supports multiple cursors with concurrent editing.
I've been able to use ShareJS to get concurrent editing working (see: http://plnkr.co/edit/?p=preview&s=HN4933608) but haven't had a chance to display visual cursors for all simultaneous users. I was thinking that I could get that working using Firebase.
Quick thing: I have a page quickramen.com/test/test that has links that navigate around the page. If you click those now, it loads the code again in another mini-window and doesn't go anywhere.
JUST a bug to be aware of if you're keeping a log!
For a first time coder, being able to see your page change live is very helpful in getting to learn HTML and CSS. This is an amazing complement to the book you are writing - nice work Nathan!
This is really great, especially as a compliment to the learning tools coming to market.
For front-end designers looking for a similar effect within your own text editor and browser window, I can not live without the CodeKit app now. It does a similar real-time effect each time the template files are saved. Also supports less, js debugging/minification, and other production processes.
Nicely done on Scratchpad. The interface seems to be the right combination of simple and intuitive. It would be great to see the source code as many others have said.
I'm particularly curious as to how you've done the collaborative bit given that you don't have explicit control over the order of operations of edits.
I don't wanna down a nice looking project, very well done on the interface but, another one? There are already like 7+ of these I don't really see the need to produce another one especially one that is HTML+CSS only when many of the others feature JavaScript and more.
I think the key extra feature is that you can share what you're working on with someone else and have both people collaborate in real-time (i.e. changes on either end show up near-instantly on the other side). Supplemented by a voice channel, this could potentially be useful.
JSFiddle et. al. don't have this, but I'm sure there are others out there that do.
Because none of them are the right solution for every use case. http://cssdeck.com/ comes closest but OP's solution is much more simple and to-the-point.
You can modify Emacs so that it does something on every change in the current buffer, like for example save the change to disk if it's a file-backed buffer.
You could then have a script refreshing the browser on every file change (do it from outside Emacs, calling shell scripts from Emacs or anything 'non-Emacsy' from Emacs is too slow for the usecase here).
However you'll probably have to find a way for the 'save file on every buffer modification' to be very fast otherwise it's going to annoy you and prove impractical.
Btw I can't wait for someone to implement at least part of Emacs in JavaScript so that, eventually, users used to Emacs shall have the possibility to have a Web text editor that doesn't s*ck. Maybe using ClojureScript + the implementation of Emacs redone in Clojure (I think there's a project trying to do that right now).
Pretty nice, I'll probably be using this for debugging and examples.
Bug:
Open the about panel by clicking the icon in top left (three horizontal bars). Close the panel by clicking the same icon.
Maximize the preview window by clicking the arrow in the top right of the edit panel. Click the arrow to view the code panel again.
The about panel pops out as well and the arrow button covers the show/hide about (three horizontal bars) button. Expected behavior: it should return to the view that I had before maximizing.
Not to detract from what is a pretty cool project, and I hope OP had fun making it, but: http://codepen.io is this and quite a bit more. It supports HTML+JS+CSS as well as e.g. Jade, SASS and CoffeeScript- if that's what floats your boat- and some nice social features, like featured pens and saving to Gists.
Other commenters have pointed out a myriad of similar such services. I'm surprised Codepen hasn't come up already.
@brycecolquitt, you are obviously very talented, and I look forward to whatever you come up with in the future. I just hope it's not in a space as hotly contested as this.
Thanks, but this was actually made by my friend Nathan Bashaw (nbashaw). I just submitted it because I think it's awesome :) I think the tool is great for a certain group of people: beginners and front-end folks who want to quickly see what something looks like or do some debugging.
I'm not sure if codepen supports the realtime google-docs-style collaboration, either, which Scratchpad is good for. It's simple product with no superfluous features.
Yeah but it's nowhere near as nice to edit with. The textarea's are short, the content frame is short... I think this is a case where simplicity wins out.
SASS would be a cool feature though.. (as long as it came with Compass)
Slightly off topic: You use "enough to be dangerous" with a positive meaning, as in enough to make a real difference in the world, while Alexander Pope quote you use is probably negative: "A little learning is a dangerous thing." as in, someone who knows little can do more harm than good.
Its a little thing, but i like how you literally don't need to click on any buttons to save / create a new one / etc. I also like how you can create your own customized path to help you remember the link... just type in a new path and start editing, and you now can share that custom URI.
I think its important to create as little friction to usage as possible, and you've done that.
What's cool is that feature was completely intuitive and you didn't need to point it out. Again, a little thing, but the little bit of delight users experience when they "discover" these types of features goes a long way.
I also like the URL feature, but unlike the other person I did not intuitively expect to type in a a random url and have that work. Its not something people typically do. That said, its pretty cool. You should edit your how to use to include that.
Nice work and all, but what's wrong with a local .html file your favorite text editor, and a browser? I've been doing that for years to play around with html, css, and js.
1. Create a file
2. Open it in your text editor
3. Edit code
4. Switch to browser
5. Open up the file
6. Switch back to editor
7. Edit code
8. Hit save
9. Switch back to browser
10. Hit refresh
11. GOTO 6
I use Livejs for the same effect, but this is much smoother obviously since it can trigger on key press rather than polling the resource constantly from the web page.
88 comments
[ 3.5 ms ] story [ 176 ms ] threadCould probably use the multi-user sync for front-end technical interviews.
Right now, you are just awesome ;).
DEMO: http://plnkr.co/edit/?p=preview&s=HN4933608
Any plan on open sourcing the code to do the real-time editing? I would love to use this real-time editing concept in a project I'm working on.
If you want to chat about building it I'd love to give you any tips - i'm nbashaw@gmail.com
I'm not sure what an OT engine is. What is that?
Not sure what server architecture you're using, but in Node.js there is a pretty amazing package that integrates with ACE called ShareJS (http://sharejs.org/).
Have you experimented with synchronizing cursors at all?
When you say synchronizing cursors, do you mean having multiple cursors (google docs style) or having a single cursor be in the same position for all clients? We are doing the latter, and I wasn't aware it was possible to do the former with ace but I would love to do it if I can
We use a mix of different methods to maintain a connection. We normally start with our custom long polling implementation and move to websockets when they are available. We do not currently make use of any flash sockets.
It states so on the sites/GH pages, but could not find pointers to repo [after 2 circle through 5 different pages poiting to each other].
ACE is quite ridiculously powerful. On its primary implementation (http://c9.io), it supports multiple cursors with concurrent editing.
I've been able to use ShareJS to get concurrent editing working (see: http://plnkr.co/edit/?p=preview&s=HN4933608) but haven't had a chance to display visual cursors for all simultaneous users. I was thinking that I could get that working using Firebase.
Quick thing: I have a page quickramen.com/test/test that has links that navigate around the page. If you click those now, it loads the code again in another mini-window and doesn't go anywhere.
JUST a bug to be aware of if you're keeping a log!
One of my biggest frustrations with jsfiddle is the crappy coding area (not to mention the default selection of Mootools among others).
For front-end designers looking for a similar effect within your own text editor and browser window, I can not live without the CodeKit app now. It does a similar real-time effect each time the template files are saved. Also supports less, js debugging/minification, and other production processes.
http://incident57.com/codekit/
I'm particularly curious as to how you've done the collaborative bit given that you don't have explicit control over the order of operations of edits.
What features do you provide that say, http://jsfiddle.net/, http://cssdesk.com/, http://dabblet.com/, http://rendera.heroku.com/, doesn't? (Just the first 4 items that came up in a Google search, the list could go on...)
JSFiddle et. al. don't have this, but I'm sure there are others out there that do.
You could then have a script refreshing the browser on every file change (do it from outside Emacs, calling shell scripts from Emacs or anything 'non-Emacsy' from Emacs is too slow for the usecase here).
However you'll probably have to find a way for the 'save file on every buffer modification' to be very fast otherwise it's going to annoy you and prove impractical.
Btw I can't wait for someone to implement at least part of Emacs in JavaScript so that, eventually, users used to Emacs shall have the possibility to have a Web text editor that doesn't s*ck. Maybe using ClojureScript + the implementation of Emacs redone in Clojure (I think there's a project trying to do that right now).
Bug:
Open the about panel by clicking the icon in top left (three horizontal bars). Close the panel by clicking the same icon.
Maximize the preview window by clicking the arrow in the top right of the edit panel. Click the arrow to view the code panel again.
The about panel pops out as well and the arrow button covers the show/hide about (three horizontal bars) button. Expected behavior: it should return to the view that I had before maximizing.
Other commenters have pointed out a myriad of similar such services. I'm surprised Codepen hasn't come up already.
@brycecolquitt, you are obviously very talented, and I look forward to whatever you come up with in the future. I just hope it's not in a space as hotly contested as this.
I'm not sure if codepen supports the realtime google-docs-style collaboration, either, which Scratchpad is good for. It's simple product with no superfluous features.
SASS would be a cool feature though.. (as long as it came with Compass)
I think its important to create as little friction to usage as possible, and you've done that.
1. Create a file 2. Open it in your text editor 3. Edit code 4. Switch to browser 5. Open up the file 6. Switch back to editor 7. Edit code 8. Hit save 9. Switch back to browser 10. Hit refresh 11. GOTO 6
to this:
1. Go to http://scratchpad.io 2. Write code