A live HTML5 editor made with Node.js | Hacker News Reader

A live HTML5 editor made with Node.js

jawerty.github.io

72 pointsjw98933 comments

There seems to be a lot of text editors being showcased on HN at the moment. While the engineering involved in each of them is remarkable, and way beyond what I could imagine accomplishing, I've yet to be convinced that any problems are being solved. Nothing I've seen has yet convinced me to move away from my emacs/git based workflow.

Maybe they are simply CV showcases, in which case this is an impressive piece of software, and congratulations to the developer, but you've yet to convince me to move away from 1970s technology.

Most of them are just CodeMirror / Ace stuffed that takes 90% of the pain of writing anything complicated in that domain, really. The CoreMirror author should take a fee for each product based on his lib, would become a millionaire( same guy who wrote TernJs , Eloquent Javascript , and few others, this guy's insane js developper, not sure how he manages to write this huge libraries in plane javascript and vim ).

I've heard of Codemirror but went and took a look again after reading this comment - I was surprised to see that Brackets, Lighttable and the Chrome DevTools source editor are built on top of it.

Completely, this is why I love how modular that Javascript ecosystem is. Building a complex piece of software only takes 450 lines of glue [1]. Node-webkit makes building desktop applications a snap. The only bummer is it's slow, when I type I'll notice that 3 characters appear at once, it's distracting.

[1] https://github.com/jawerty/Hyro/blob/master/js/hyro.js

Many of us go our own way for maximum flexibility. You'd be surprised how easy it is to write a modern live editor as long you are given the right tools for font rendering and extracting font metrics. The hard part is achieving the liveness, though.

I understand your feelings but this isn't a heavily planned startup i've developed, simply a tool I made since I thought it would be cool to make (also an experiment with node-webkit).

I often have exactly the same reaction - the main question being: why? And let me highlight that I am also impressed with the engineering skills required by this (and similar) projects.

The speculative answer that comes to my mind is that engineering is the 'easier' part of coming with a new product. The concept is the 'difficult' part. I put these qualifiers in quotes because there is nothing easy about the engineering, but it comes easier to people that are already working with technology. They know how to make things. Deciding what to make is not an engineering question, but a business (or society) one.

I suspect that this is the reason for quite a few failed startups. They build things that they can, but not necessarily should.

But, again, this is not a criticism of this project, just adjacent discussion.

I have a different problem. All of these new fangled cloud-based html text-editors / IDEs are kinda .. dinky. They're toys. It seems like everyone is tripping over themselves to include as few features as possible and hope they can sell them for $3.99. Where are those editors that are worth a $500 price tag?

"Where are those editors that are worth a $500 price tag?" - they would need much more code and thus require a maintainable programming language.

> ...and thus require a maintainable programming language.

Hum, bit of a lazy dig at JS there.

Also tell that to the Brackets team [1]. It has a pretty decent feature-set.

[1] http://brackets.io/

I have to admit, that is some quality JS code.

My similar product (http://liveditor.com) mainly solves this problem: After tweaking css using Firebug, having to manually copy the changes back to the source code is time-consuming and error-prone.

And LIVEditor's solution is integrating a Firebug-inspired html inspector into a full-featured code editor, of course plus a Chromium-powered real-time preview!

It's nice and simple, I like it. I can't see leaving Notepad++ on Windows or Geany on GNU/Linux for it, but I do like the concept. I think it would be good for someone just learning to use HTML, as they can see immediate results.

I've definitely wanted to make plugins for Sublime Text that show a live preview in another pane. Unfortunately there's no way to create another pane of anything but text, so the current solution is opening new windows (for things like Markdown Preview, or Graphviz).

When I get some free time, I would like to see if it's easy to do in Light Table. Since it's open source, anything should be possible with a bit of work.

I've noticed more desktop applications being built on HTML5, node-webkit, etc. Can anyone point me towards some good resources for getting started in this? I'm specifically interested in building a Windows application this way.

Check out https://github.com/rogerwang/node-webkit/

I think a lot of the apps you are using this, or something very similar. I've only played around with it very briefly, but like jw989 said it's pretty straightforward.

Some tutorials here: http://www.scriptol.com/javascript/ Even PHP can use an HTML interface!

Honestly, if you understand how to build frontend applications it is as simple at creating an index.html file and attaching it to the webkit browser.

Why do you make a live HTML5 editor using Node.js but you don't make it work online? I think it would be much awesome and useful if it worked online and you could embed it on any website.

I was thinking on real time examples where you could play around with the code to learn how stuff works. It would be great for learning how to code or for explaining how a library works.

The reason why I made it with node-webkit and not online is because I prefer my editors to be desktop. However, implementing a preview on the download page would be a good idea too.

While I can't speak for the author, one benefit of packaging your app with node-webkit[1]; is that your app is always used inside this container, that bundles a very recent version of Chromium and has a node.js backend with file system access.

[1]: https://github.com/rogerwang/node-webkit

That's what I was going for when I made my GitHub Gist viewer (http://thedata.directory/view/10570653) If you have an HTML gist it'll display it when you put the gist number in the path (as in the link above). It will also give you an embed code so you can collaborate.

I wonder how trivial it would be to make it markdown. If I weren't already not-doing work on my own project(s) by reading HN...

This is nice though

http://pad.haroopress.com/

Is this what you're looking for? thlorenz.github.io/browserify-markdown-editor/

I'm not looking for a markdown editor, I have quite a few, actually (Textmate, Mou, LightPaper). I asked simply because it is a standard html wysiwyg so you could probably just change out the parser.

This is really great and I appreciate you making this. Thanks for sharing it!

Reminds the days of FrontPage and how I got started. I guess it's good for beginners. But I don't see a reason to replace my good old fashion editor vim.

I'd love to see something like this with Sir Trevor JS... I don't see that library mentioned very often.

Isn't the style of the output dictated by the user with Sir Trevor? Would be difficult to come up with something like this that improves the experience over Sir Trevor's inherit MYSIWYG style.

I noticed the =,is not working, just get '-' one. went to Notepad and my =, is working can someone please verify this.

After working with this a little bit, I like this, he did a good job.

Upvote for adding deb

Reply on news.ycombinator.com