Automatically refresh display of html on saving file

Proposed tip Please edit this page to improve it, or add your comments below (do not use the discussion page).

Please use new tips to discuss whether this page should be a permanent tip, or whether it should be merged to an existing tip.

created June 15, 2010 · complexity basic · author A generic person · version 7.0

---

Editing HTML in Vim is a lot nicer if you can see updates in Firefox without needing to remove your hands from the keyboard. With MozRepl and a little vimrc script, you can do just that!

The bad old way

You are probably all too familiar with this annoying mini-workflow:

• Edit your HTML/css file.
• Hit save in Vim.
• Take your hands off the keyboard and move your mouse over to Firefox.
• Press Ctrl-R in Firefox to refresh.
• Move the mouse back to Vim and put your hands back on the keyboard.
• Do it again and again, wincing a little bit each time.

The joyful new Vim + MozRepl way

With the little .vimrc + MozRepl hack shown below, all you need to do is:

• Edit your HTML/css file.
• Hit save in Vim – Firefox will refresh automatically, preserving its scroll offsets!

This integration is no where near as fancy as the Emacs MozRepl binding, but this one feature makes it super useful.

Vim + MozRepl

When editing an .html,.css, or .gtpl file, make Firefox refresh after the buffer is saved, preserving the current scroll offset.

Requires

1. MozRepl must be installed & running in Firefox
2. Netcat (nc) must be on your path.
3. Firefox & vim are both on the same machine (localhost).

How it works

I use echo + netcat (nc) to send a dopey little MosRepl script (see below) to Firefox. All the output is tossed away (2>&1 > /dev/null) because MozRepl is chatty.

Global variables are used (vimXo, vimYo) to capture the X,Y offset of the web page for vim. Maybe there's a way to not use a global, but I don't know what that might be. After saving the buffer and reloading the browser, scroll to the X,Y offset.

See also:

  http://wiki.github.com/bard/mozrepl/tutorial
  http://forums.whirlpool.net.au/forum-replies-archive.cfm/495300.html

Code from .vimrc

 autocmd BufWriteCmd *.html,*.css,*.gtpl :call Refresh_firefox()
 function! Refresh_firefox()
   if &modified
     write
     silent !echo  'vimYo = content.window.pageYOffset;
                  \ vimXo = content.window.pageXOffset;
                  \ BrowserReload();
                  \ content.window.scrollTo(vimXo,vimYo);
                  \ repl.quit();'  |
                  \ nc localhost 4242 2>&1 > /dev/null
   endif
 endfunction

See also

• original Vim+MozRepl posting

A Few Additions:

To put in $MYVIMRC

 command! -nargs=1 Repl silent !echo
       \ "repl.home();
       \ content.location.href = '<args>';
       \ repl.enter(content);
       \ repl.quit();" |
       \ nc localhost 4242

 nmap <leader>mh :Repl http://
 "mnemonic is MozRepl Http
 nmap <silent> <leader>ml :Repl file:///%:p<CR>
 "mnemonic is "" Local
 nmap <silent> <leader>md :Repl http://localhost/
 "mnemonic is "" Development

Now, when working on local html files, if you switch files often then just press <leader>ml and the file is shown in Firefox. Also, <leader>mh will bring you to ex mode where you can type in a URL and go there in Firefox etc...