CODEWITHSUNDEEP
javascripthtmlcsside
eusid
eusid

Reputation: 769

IDE for HTML / CSS / Java Script w/ Live View Port

I have been searching around. This is perhaps more a nuance than anything. When I do jQuery or other UI work I like seeing my changes immediately. Adobe Dreamweavers live view port does this, not extremely well, but it does it. Kompozer has a view port but its not live and no JS or actions. Does anybody know of an IDE out there besides DW that has this feature? Linux is preferred but would like to know of anything.

As a note of interest I recently discovered Wakanda http://wakanda.org

Upvotes: 14

Views: 10717

Answers (5)

Michael Schwartz
Michael Schwartz

Reputation: 8415

I made my own open source coding playground called kodeWeave (which saves and retrieves your weaves as a Github Gist). It's available for Windows, Linux, Mac OS X, Android and Online (I also plan on releasing it for iOS and Windows Phone too).

enter image description here enter image description here

Some other good coding playgrounds to tryout are CodePen, CSSDeck, Plunker, JSBin, jsFiddle, Liveweave.

There is also Brackets which is an open source project created by Adobe (It's basically the open source version of Edge Code). The nice thing about Brackets is it runs off it's own server locally on your device so if you're using a library like JSZip it works right away. In addition whenever you save a change made in a file in Brackets your app will reload in Chrome's Debugger (launched from Brackets) So debugging is very fast and easy, not to mention there's lots of plugins that are made to increase productivity. It's really tremendous!

Brackets App

There's also the Cloud9IDE.

enter image description here

I'm sure you already know this but the Chrome Developer Tools has this capability as well.

Upvotes: 1

nherrmann
nherrmann

Reputation: 167

I know this post is over a year old, but I thought I'd throw this out if you are interested. Adobe is developing a product now that may fit what you are looking for. If you have the creative cloud, there is a preview of the program. It is called Edge Code in the creative cloud, but it is being developed as a standalone, open source, platform independent code editor as well. I'm not sure why, but outside of the creative cloud, it is called Brackets. It doesn't do a live view in the program itself, but it does automatically open the document in Chrome, and updates as you make changes. The really interesting thing is that the program itself is written in html, css, and JS, so that it should be easy to customize to your liking. It is currently in beta, and can be downloaded at

Upvotes: 3

Nash Worth
Nash Worth

Reputation: 2574

I have been recently love struck by Sublime Text 2. After trying many IDE's it is the one that impresses me the most.

I was watching a tutorial by Paul Irish on Web Development workflows for 2013 (video only partially relevant), where he describes a plugin that he uses to avoid having to hit F5 to refresh the browser. Instead it is updated every time he saves a file.

Sublime Text 2 has been rising in popularity and my understanding is that it will work very well in Linux. The plugin is called LiveReload ($10).

It will require research, but is likely well worth it. Link

Upvotes: 2

Shahar
Shahar

Reputation: 2347

It might not be exactly what you are looking for (does not support javascript), but dabblet is a great tool for writing html+css and watching the preview live as-you-type in the browser.

dabblet live editor

Upvotes: 2

Johnny Everson
Johnny Everson

Reputation: 8601

Stylizer is a nice app for CSS live edition.

Upvotes: 1

Related Questions