Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Is there any offline Code Editor similar to codepen

I am using codepen to write new code or edit existing pens provided by Treehouse. I really like the way it updates instantly next to my code. I loved this feature. I am looking for a code editor with a similar feature. Is there any code editor out there which can show me the results of the code in various browsers realtime? Without having to refresh the browser every time .I heard the realtime updating happens in Dreamweaver or Microsoft Visual studio.. I am not sure about this. Please help me out Thank you

5 Answers

There are various tools to achieve this offline. I personally use Livereload(free) in the past and it works pretty well. Basically, you tell it to watch a folder on your machine and go into the browser and activate the browser extension. Now everytime you save changes to say an HTML or CSS file, it is automatically updated in the browser without refreshing.

What I have done recently is start out on Codepen.io creating something and use the Export to .zip feature to get all the files local. I then hook it up with Livereload and continue editing locally.

Sounds great, But Is there any editor where I can preview the content next to code I am typing? Without having to go browser to view it. I understand Codepen itself is viewed from a browser,just wondering if there is any flexible option

Matt Campbell
Matt Campbell
9,767 Points

Dreamweaver but it's iffy as you'll soon discover with CodePen.

You're better off getting a second monitor and learning where the F5 key is. ;)

Thanks a lot Matthew and ty lacock. Your second monitor Idea with ty lacock's livereload should do the trick :D

The dev tool's in firefox and/or firebug, enables you to see changes automatically and it's right from the browser. But you will still need another text editor to start the file.

Thanks man

For some reason I cannot see the upvote/best answer button on the right. Thanks all for responding.

You can run jsbin locally. Here are the instructions on setting up jsbin on your machine: https://github.com/remy/jsbin/blob/master/docs/running-your-own-jsbin.md

Steven Ventimiglia
Steven Ventimiglia
27,364 Points

An updated answer for 2020...

If you can use the CLI, then I would highly recommend BrowserSync.

https://www.browsersync.io/

If you're looking for software to help with more than just a live browser reload, Prepros and Codekit are highly recommended. I used those until I got comfortable with Node.js/NPM commands.

https://prepros.io/ (Windows, MacOS, Linux 64 bit .deb)

https://codekitapp.com/ (MacOS 10.11+)