Hi
I'm not even sure what you call this kind of thing but I believe 'InDesign' by adobe does this to some extent. I'm looking for a HTML/CSS/Javascript editor all in one. Basically I want to be able to type my HTML/CSS/Javascript code in one screen and see the results in another html screen. I realise I can use a text file but it's not the same.

Was wondering if there is any open source versions of what I'm looking for of which anyone recommends?

Thanks

Recommended Answers

All 23 Replies

I typically develop in asp.net so I use Visual Studio. Its an overkill for just html, css, and javascript, but Visual Studio does provide the ability to develop using design view, code view or both.

There are also websites that allow you to code online and see the results in real time such as this Online HTML Editor

There's also jsFiddle.net, that allows you to use their site to develop html, css, javascript and seeing the results in a view on the same page. They allow you to save your code as well.

commented: ++ for jsfiddle :) +14

Thanks Jorge.. Will look at those options.
Any other suggestions are welcome.

Well, after the above suggestion I found a great editor which covers HTML/CSS/Javascript and much more. It's called 'Aptana Studio 3' . Click Here I believe it's based on Eclipse. There is a 'preview' button which allows you to preview your work which is fantastic.

I used this example of a calculator which incorporates HTML, CSS and Javascript together. It' works great.

Click Here

What a great tool, especially for someone like me which is completely new to web programming and wants to learn all three of these languages.

If anyone knows of a better editor (not that I'm expecting to find one), please post below. I am very happy to have found this.

How about Coda 2 or Dreamweaver? Ever tried those? You can customize the screens on them.

I probably should have mentioned. I'm running Windows XP.

Coda 2 (from what I can see) is for Mac.. Also not open source unfortunately. It looks good though.

Dreamweaver looks perfect, but again, not free (I know that sounds mean, but until I am advanced in this area, most advanced features will be wasted on me).

Thanks for the suggestions anyway.

You'll have to forgive me as I might have missed the topic, I'm not to sure, but why not use any development environment and then have a web browser to view the code? Seeing as HTML, JS and CSS are all web based languages?

I'm a lazy bugger so I develop locally, I have chrome on one monitor that uses an extension to refresh every 5 seconds and my development environment on my main monitor.

As a personal opinion it works fine for me, but I can understand why it's not everyones cup of tea.

I use PHPDesigner8 for web application development (ignore the name, it does way more than just PHP), and it does have a run/view screen & tool for previewing HTML from the environment.

commented: good idea with chrome +3

DevPHP
Codelobster
DreamWeaver

Member Avatar for diafol

Notepad. Hah, just kidding. Choose a good IDE.

I never trust the editor 'browserview' - not even in commercial software like Dreamweaver. You need to have copies of all the browsers you want to support and test in each. You should try to cover the following at least: Chrome, FF, Opera, IE, Safari. Chrome, FF, Opera and Safari - you can rely on the newer versions to an extent as their users tend to be a little more savvy in general and keep the newer versions. IE users on the other hand can be stuck with previous versions, e.g. IE6 - due to company policy rather than choice maybe, but even so you need to decide upon a cut-off point for IE. IE has dev tools - 'previous version mode' or whatever it's called - well F12 anyway.

The caniuse site is pretty good for knowing which css / html5 bits and bobs can be used safely in which browser.

A fun one (well perhaps I'm being nerdy here...): http://html5test.com/

JS is handled differently in each browser, so you may wish to use a library/framework such as jQuery to ease the pain. If so your IDE would be ideal if it supported this too (as in code hinting and completion) and vendor prefixes in CSS.

Have a look at whether there is active development with regard to the IDE or whether there are language packs that are updated regularly.

Free ones that I like: Bluefish, Notepad++, Aptana, Netbeans. IDEs are personal things, so try out a few different ones.

Lots of good suggestions here but I would have to say that Aptana Studio 3 is by far the better one. Entirely free and supports HTML/Javascript/CSS/Jquery plugin and I believe XML and more.

Try HTML-kit you get the previous version free and the present one with a small fee. Try out Mozilla's Kompozer, all for free.

Member Avatar for diafol

@diafol, how about a site like this test your sites: http://litmus.com/page-tests

Enjoy it for 7 days, then pay $79/mo. Erk.

Portable apps.com, portable versions of many browsers, to test on, dont need the portable apps system, the apps are freestanding

I think you can use the Adobe Dreamweaver cs version

Extensions hidden and notepad ++
[Alert!!] turning off hide extension may be a security risk[Alert!!]

you could turn off hide files for known extension types
so you can name a files its extension.
Then download notepad++

commented: go away cretin -3
commented: ... -2

I always program my web apps in Notepad++. It's simple and it means you have to type all the code out yourself so helps you learn much faster. As for the whole "View your website" options in different software suites, don't trust them. If you have a quick poke around on the internet you'll find that each browser has some features that are browser specific. There are also browsers like IE which has different methods for different versions. It really is a bit of a mine field.

I use "SciTE" google it its a basic text editor and copy and paste over to your server or Filezilla

Hi
I'm not even sure what you call this kind of thing but I believe 'InDesign' by adobe does this to some extent. I'm looking for a HTML/CSS/Javascript editor all in one. Basically I want to be able to type my HTML/CSS/Javascript code in one screen and see the results in another html screen. I realise I can use a text file but it's not the same.

Was wondering if there is any open source versions of what I'm looking for of which anyone recommends?

Thanks

Member Avatar for diafol

Was wondering if there is any open source versions of what I'm looking for of which anyone recommends?

You have a lot of choices...

Notepad++, Bluefish, Sublime2, Aptana, Eclipse and countless others

depending on the you familiar or not familiar!
I usually use Adobe Dreamweaver cs6 and Notepad++,
and now published research Sublime2

Sublime text 2 can be a great editor for web with following plugings prefixr css tidy html tidy codeintel jquery alignment.
The best part is that is cross platform.

Good luck in find the best ide for you

you can use brackets
It's an editor for HTML,CSS,JavaScript only

Notepad++ and sublime are the best out there. Make your choice on quality not what people say.I would personally prefer sublime anytime.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.