10

What are the best tools to live-preview web pages?

over 5 years ago from

I tried Cactus and Codekit, and I know Adobe Edge Inspect does a similar function, but I would love to hear from you to know if there are better options out there. Thank you!

24 comments

  • Varun VachharVarun Vachhar, over 5 years ago (edited over 5 years ago )

    Open Terminal, cd into your website directory, paste this: python -m SimpleHTTPServer and press enter.

    Go to your browser and open up http://localhost:8000

    If you go to airport and lookup your ip address then you can even open this website on other devices on your network. Just go to http://yourIPAddress:8000

    6 points
  • Ray LuongRay Luong, over 5 years ago

    brackets.io has a live file preview in the browser that updates as you edit / save local files.

    4 points
  • Account deleted over 5 years ago

    I’ve been using Grunt + LiveReload (really grunt-contrib-connect + grunt-contrib-watch) for several months now and it just works for me. I generalized this workflow and made a GitHub static site generator out of it. Though someone recommended BrowserSync to me, which seems like a beefier version of LiveReload.

    2 points
    • Chris ColemanChris Coleman, over 5 years ago

      Grunt and LiveReload (the chrome plugin, not the app) are my new setup of choice.

      A lot of people mention Hammer, Anvil, and Codekit, and I use all of them regularly, but I'm moving away from desktop apps, and toward a more modular setup of small, open-source components. If you're a lone wolf, they're fine, but working on a team, and being responsible for the front end means I need other people tone able to reliably work with my code.

      It might mean that I need to write up a lot more documentation, but it's not always possible to tell someone (team member or contractor) to install $50 worth of apps to make a CSS modification.

      0 points
  • Zach ShermanZach Sherman, over 5 years ago

    I've been using http://mixture.io recently and have enjoyed it pretty thoroughly.

    2 points
    • Odrija HeinrihsoneOdrija Heinrihsone, over 5 years ago

      Mixture is an awesome tool, and I love the way it handles live preview on multiple devices simultaneously. On the other hand it's so much more than a live-preview tool.

      0 points
    • Stephanie WalterStephanie Walter, over 5 years ago

      Really like it too, all is "built in" you simply have to launch it on your project and it comes with the remote debug tool. If I remember right Prepross does this as well.

      0 points
  • Erik BeesonErik Beeson, over 5 years ago

    I like LiveReload. With the browser plugin it live-refreshes automatically, and with one extra line of javascript it will live-refresh any device. My usual workflow has a couple of browsers and a few devices sitting on my desk, all refreshing automatically.

    I also like harp, and their hosted service harp.io. It handles automatic compiling of assets and automatic local hosting of multiple projects with free software. Their hosted service then gives you a one-button interface to publish the site so it's accessible on the internet.

    Harp doesn't handle live-refreshing, so I still use LiveReload on my harp project folder (with asset compilation turned off), but it's super convenient to be able to go from working locally to publishing for a client to see so easily.

    Without harp, I usually use Anvil for serving projects.

    1 point
  • Guillaume BroderGuillaume Broder, over 5 years ago

    I use Hammer with Anvil.

    1 point
  • Benjamin FritzBenjamin Fritz, over 5 years ago

    I also found CodeKit the most valuable tool for my purposes.

    0 points
  • Namanyay GoelNamanyay Goel, over 5 years ago

    I use Gulp now, before it I used Prepros.

    0 points
  • Diego LafuenteDiego Lafuente, over 5 years ago

    Kill me but I use Codekit + Meta Refresh-nocache :D

    0 points
  • Koen Bok, over 5 years ago

    Shameless plug: this is Cactus bread and butter. It works without having to do anything special and on multiple devices at the same time.

    We just did a little blog post on it: http://cactusformac.com/blog/posts/meet-auto-refresh.html

    0 points
  • Matt HallidayMatt Halliday, over 5 years ago

    Vagrant added a new feature in version 1.5 called Vagrant Share that makes your local dev server publicly available. Obviously you have to be running Vagrant to use this one.

    I also just came across a service called ngrok that basically does the same thing as Vagrant Share, but looks like it works with any local server/port.

    0 points
  • Alec MolloyAlec Molloy, over 5 years ago

    I'm biased, but Brackets. Especially with the Everyscrub plugin, It lets you drag over any value and see it update live on screen. Look for it in the extensions menu.

    0 points
  • Vaibhav Kanwal, over 5 years ago

    I have a question, I use Live-reload and Grunt for this purpose and for most part it works well. I just have trouble in making this work smoothly since Sass compilation takes close to 6 seconds so although the CSS live-reload does happen, I have to wait close to 6 seconds before I see it happening.

    I am kinda stuck in this limbo where I don't see my current set of tools/workflow solving this problem.

    I tried using lib-sass over ruby-sass but @extends do not work currently so lib-sass is not an option for me at the moment.

    Any pointers?

    0 points
  • Sean O'GradySean O'Grady, over 5 years ago

    I use gulp+browser-sync.

    0 points
  • Kyle ConradKyle Conrad, over 5 years ago

    I love Edge Inspect, if only because it's easy and the idiosyncrasies of the different devices are hard to nail without viewing them live on the device itself.

    Also, I guess you could use XCode's device simulator for iOS devices, and I think Android has something similar with their dev stuff.

    0 points
  • David HooglandDavid Hoogland, over 5 years ago

    As a designer learnig to code and already working with code for prototyping I have to say that codekit is the best thing I've tried so far. I also played around with cactus, adobe edge and mixture. I think they are all pretty well made apps, but the new codekit seems to be a winner for me. It's great for live-previewing your designs on all your screens with live reload and all, and it handles stylus, sass and anything else you throw in it. Also being able to directly install components also makes it more approachable and fun to just try things.

    Although I love everything about mixture, for me the only hurdle was that I had to work with their liquid templates to make use of the full potential of their product.

    0 points
  • Hugo Costa, over 5 years ago

    (I mean in several devices (iPhone, iPad), not just the computer)

    0 points