Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by satya jr
satya jr
3,351 Points

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

ty lacock
ty lacock
2,191 Points
ty lacock
ty lacock
2,191 Points

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.

satya jr
satya jr
3,351 Points

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

satya jr
satya jr
3,351 Points

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

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

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.

satya jr
satya jr
3,351 Points

Thanks man

satya jr
satya jr
3,351 Points
satya jr
satya jr
3,351 Points

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

Rob Simpson
Rob Simpson
3,581 Points
Rob Simpson
Rob Simpson
3,581 Points

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,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 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+)