Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Renders changes to CSS, markup, and images in real time
CoffeeScript CSS
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
example/htdocs
resources
src
.gitignore
Cakefile
README.md
package.json

README.md

Echo

Using echo, you can edit CSS, HTML, JavaScript, and images while watching the changes in real-time on multiple browsers and from multiple remote hosts. This provides shorter development cycles and quick visual regression testing across different browsers.

Installation

Installation is only currently supported on Mac OS X. You can still view changes in real-time from Windows or Linux, so long as your content is being served from OS X.

$ git clone git://github.com/kputnam/echo.git echo
$ cd echo

$ npm install -g coffee-script
$ cake build
$ npm install . -g

Configuration app

The configuration app is available on http://localhost:4567/echo, provided you've started echo on the default port. You can specify a different port like this: echo.js --port=8888

Usage

Echo supports a number of distinct use cases. The examples given show how to start echo with the configuration specified on the command line. Alternatively, you can enter the configuration using the configuration app.

Use your own web server

Echo works in tandem with another web server. The first server sends the content, and echo just tells the browser when the content has changed.

$ echo.js http://dear-diary.local?/Users/kputnam/Sites/dear-diary
$ open http://dear-diary.local/

Note that in this setup, you will need to add this tag to the pages you want to see change in real-time:

<script src="http://localhost:4567/echo/js/subscribe.js"></script>

Serve static content

Echo can also serve static content like an ordinary HTTP server, which is useful for quickly prototyping pages that don't need server-side processing.

$ echo.js http://localhost:4567?example/htdocs
$ open http://localhost:4567/index.html

In this setup, you will need to add this tag to the pages you want to see change in real-time:

<script src="/echo/js/subscribe.js"></script>

Don't even use an HTTP asset server

If your browser allows files on your hard drive to communicate with remote servers (this requires a special flag for Chrome), then you can skip the HTTP server all together.

$ echo.js file:example/htdocs
$ open example/htdocs/index.html

In this setup, you will need to add this tag to the pages you want to see change in real-time:

<script src="http://localhost:4567/echo/js/subscribe.js"></script>
Something went wrong with that request. Please try again.