Website that shows live website while coding

Get Started
1

Is there a tool or website that allows you to edit your html and css online and shows a live rendering as you edit the code?

That would be really helpful for me instead of having to upload my files and refresh each time I want to see updates. It would be way better to see the changes on the fly.

Thanks!

2

There are quite a few, but my favorite is CodePen. You could only use it on a page-by-page basis, though.

4

Most modern browsers have this ability - at least, to a limited extent. In Firefox, for example, there is the Style Editor (Shift + F7) which lets you edit your CSS on the fly and see the results straight away.

But in any case, you don’t have to upload your files to see the effect of your changes. You just point the browser to a local copy.

Mike

6

When it comes right down to it you should be working from a local environment and doing ALL your development from there. NOT working directly from a remote server or what I can only assume is *probably the production server given this is even a question – BAD. In *most professional atmospheres this would not fly at all. You would either need to learn to work locally or be out the door.

7

I think what Mikl meant was that you can use browser developer tools to see how changes would affect the page, not that it would change the live page. The changed file would still need to be uploaded to the site.

I agree about working on local files. I’m bad in that some times I do make edits on live pages without testing. i.e. minor text content typo edits - but even doing that can be risky.

If you change a file and upload it without testing locally first, be prepared to do some scurrying when things inevitably break. Believe me I know, I learned the hard way.

8

Yes, that’s exactly what I meant. Thanks for clarifying it.

Mike

9

I was recently introduced to Cloud 9 C9.io here

I found it really pretty good. It is whole online IDE with some nice features. Worth a look.

10

There are local development tools like CodeKit that do a range of things, including auto refreshing your browser as changes are made.