from Hacker News

Show HN: Scratchpad.io - a real-time HTML and CSS editor

by brycecolquitt on 12/17/12, 6:42 PM with 82 comments

  • by arscan on 12/17/12, 8:03 PM

    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.

  • by bluetidepro on 12/17/12, 6:56 PM

    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.

  • by meric on 12/18/12, 3:43 AM

    Looks like you've made sure any recursion only goes one deep? (Awesome)

    http://scratchpad.io/5mqq98D51P

    Every change forces a reload on the iframe. I wonder if there's a way to prevent that.

      <html>
    <body>
      <h1>Heading</h1>
      <iframe width="640" height="480" 
        src="http://scratchpad.io/5mqq98D51P">
      </iframe>
    </body>
  </html>

  • by dergachev on 12/18/12, 1:01 AM

    Thats awesome. Also looking at the source, I discovered it's using keymaster.js and firebase.js, which are new to me. And the implementation of scratchpad.io is very simple and elegant. The design is beautiful, and the code (in scratchpad.js) is so simple that it makes for a good tutorial on using firebase and ace.js.

    In fact, if anyone else is interested in forking the code and experimenting with it, feel free to fork my plunk and go to town:

    http://plnkr.co/edit/49fOC5Mq3bcBysKfdPor?p=preview

    (Hope you appreciate the irony of forking scratchpad.io via Plunker. Also, it'd be wicked if Plunker could automatically "fork" html webpages, pull in all the required resources and/or updating path references).

  • by rjvir on 12/17/12, 7:04 PM

    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!

  • by gailees on 12/17/12, 6:48 PM

    Finally....they had something close to this on codecademy, but this is exactly what I need when trying out new stuff!

  • by geuis on 12/17/12, 7:01 PM

    Ok, this editor rocks. Nice use of Ace.js.

    One of my biggest frustrations with jsfiddle is the crappy coding area (not to mention the default selection of Mootools among others).

  • by pxlpshr on 12/17/12, 7:13 PM

    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.

    http://incident57.com/codekit/

  • by robot on 12/17/12, 7:56 PM

    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.

  • by overshard on 12/17/12, 7:15 PM

    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.

    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...)

  • by jakozaur on 12/17/12, 6:52 PM

    Have the realtime plus: http://jsfiddle.net/ And you will rock!

    Right now, you are just awesome ;).

  • by randylubin on 12/17/12, 6:51 PM

    This is perfect - love the immediate feedback for my own prototyping.

    Could probably use the multi-user sync for front-end technical interviews.

  • by mahmoudimus on 12/17/12, 7:26 PM

    Oh man this is incredible - I want to find a way to embed this into Emacs, this is so useful.

  • by mixmastamyk on 12/17/12, 8:25 PM

    Great work. (love things that are "clean")

        Press ⌘ + i to toggle fullscreen view
    I don't have this key and suspect a lot of others don't either. ;)

  • by danielfriedman on 12/17/12, 6:52 PM

    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!

  • by quarterto on 12/17/12, 7:42 PM

    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.

  • by mattlong on 12/17/12, 10:08 PM

    Very nice. Love the responsiveness and good use of (OS-aware?) keyboard shortcuts.

    Bug: (Chrome Version 23.0.1271.97 on OSX)

    Expand the side panel and select a document from the RECENT list. The editor area doesn't update completely; the text loads, but there are only line numbers up to the length of the previously viewed document and it's impossible to move the cursor below the last line number (http://i.imgur.com/h9nMh.png).

    EDIT: Correction, the line numbering is correct, the problem is with the line-height in the editor.

  • by scott_karana on 12/18/12, 1:25 AM

    Absolutely amazing. A couple things that bother me, and they might just be from Ace.js:

    When typing text into a <p> or an <h1> for example, if I type "I'm", I get the smart double quote feature, and end up typing:

    I'm going to the zoo'

    Likewise, if I go back into the stream of some text in a <p>, and want to wrap it in a span, if I click at the start of it and type <span id="foo">, I get another span on the other side of my cursor, pushing the existing text over.

    Otherwise, utterly fantastic tool. Trying to use it for real work already :)

  • by sachleen on 12/17/12, 7:39 PM

    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.

  • by kurtfunai on 12/17/12, 7:09 PM

    Thank you for this! I'm in the process of teaching my brother HTML/CSS, and this is the perfect tool for when he is not sitting next to me.

  • by dmor on 12/18/12, 4:30 AM

    I would love to be able to work in realtime (a la Etherpad) with someone else - would take pairing to a whole new level. Also, style management could quickly get messy - I know you are trying to keep the UI as simple as possible, but I would love to be able to quickly toggle between HTML and CSS on different tabs (instead of scrolling).

  • by gbadman on 12/17/12, 7:15 PM

    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.

  • by mrmirz on 12/17/12, 8:22 PM

    I would assume realtime editing will be supported by the browser developer tools fairly soon.

  • by tomasien on 12/17/12, 6:57 PM

    Cool! I'm going to use it for debugging.

    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!

  • by edwinyzh on 12/18/12, 10:49 AM

    I'm building a similar one (it also allows you to inspect html elements like using Firebug or Webkit's Dev tools), and it's a native Windows app (and really fast one!) http://liveditor.com

  • by Aardwolf on 12/18/12, 10:55 AM

    "Press ⌘ + i to toggle fullscreen view"

    What is this thing, I don't have such a key on my computer?

  • by ph0rcyas on 12/18/12, 12:09 AM

    How is this different from codemirror? Codemirror's preview utility easily handles this (and much more versatile in other ways):

      http://codemirror.net/
  http://codemirror.net/demo/preview.html

  • by ams6110 on 12/17/12, 8:10 PM

    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.

  • by JimmaDaRustla on 12/17/12, 8:11 PM

    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.

  • by stuaxo on 12/18/12, 1:28 PM

    Seems very slow in firefox, can't keep up with my typing and missed the characters inbetween.

    Not sure if it's supposed to just say 'Loading...' at the top the whole time either..

  • by aleem on 12/18/12, 3:14 AM

    Sinatra.io does something similar, also built on Firbase. I believe their code is on github if anyone is interested in implementation.

  • by chaselee on 12/18/12, 12:40 AM

    Really nice execution on this. So simple and just what I'd want if I was just starting to learn how to code. Bravo.

  • by joebeetee on 12/18/12, 8:55 AM

    Beautiful. Love the fact that out of habit I pressed Cmd+D to delete the line and it worked :) Nice work

  • by ewolfe on 12/18/12, 12:54 AM

    What would it take to implement javascript? Is it merely trivial, or was it left out for security?

  • by hybrid11 on 12/17/12, 10:17 PM

    Really cool, kinda like brackets.io, but online!

    Is there anyway to make the text editor pane resizeable?

  • by iamhenry on 12/17/12, 11:37 PM

    Will you be able to make new projects and make them private?

  • by gailees on 12/17/12, 6:50 PM

    It'd be great if the command tip wasn't only for Mac btw

  • by zapt02 on 12/17/12, 10:22 PM

    Very impressive. Love the dark color scheme.

    LESS/SASS possible? :)

  • by schpet on 12/17/12, 8:34 PM

  • by path411 on 12/17/12, 11:26 PM

    Would like the option to import a url to edit.

  • by anuaitt on 12/18/12, 9:13 AM

    it will be great if we can pick some templates like bootstrap and start coding right away from the application.

  • by kine on 12/17/12, 6:53 PM

    This is really cool. Nice work

  • by pjrvs on 12/17/12, 11:08 PM

    i wish i could adjust the width of the code section. otherwise it's pretty neat.

  • by matt_ on 12/17/12, 7:42 PM

    Get this added to repl.it

  • by orlandob on 12/19/12, 4:53 PM

    very cool!