How to make Emacs render HTML without having to save the file?

Question

If you have ever used JS Bin, you know that as you type your code (HTML, CSS, Javascript) on the right is updated to fit what you typed. I have found this to be one of the most useful tools for making little code snippets. However, I would like the same feature to be implemented into Emacs.

So, as I type/edit code in my Emacs buffers, the web page would refresh or load asynchronously without my having to save the file or refresh the page.

As a side note: I do not care if the web browser is internal like w3, or external like Google Chrome.

Answer 1

My preferred tool for live-editing HTML documents is skewer-mode. It updates the document in the browser without a refresh, so you get instant feedback on your changes.

Here's a demo video that shows it in action.

It has modes for live-editing HTML, CSS, and JavaScript. It's most useful for JavaScript, as it enables a workflow a lot like hacking on Emacs Lisp.

There are several extensions available for skewer-mode, like skewer-less, for editing LESS stylesheets, and skewer-reload-stylesheets, for live-editing CSS in multiple stylesheets (disclosure: I wrote that one).

Answer 2

Impatient Mode will get you most of the way there. Here's a cool video.

It's especially handy when doing the first styling and prototyping. Since it renders the current buffer, you'll have to put all your html and css in one buffer, code and tweak until you're happy, then separate it all out.

Even Javascript can be handled the same way — but it's a bit more tricky, since basically every keystroke is rendering the buffer, you end up with lots of errors and such whilst you're coding!

My suggested workflow is

• Create a single HTML page, with all non-changing stuff included via tags
• Start up impatient-mode, open your browser(s) and get to the page
• Code up a storm
• Separate your HTML, CSS, JS once you're happy

Clients are particularly impressed when you can type and have the update visible immediately, often in several browsers at the same time :)

Answer 3

You could write a minor mode that refreshes the rendered webpage after you modify any relevant buffer. Of course, doing so after each keystroke would be overkill, so using a timer and rendering when emacs is idling

A quick POC would be:

(defvar my-html-render-delay 1)

(defun my-html-render-post-command-hook ()
  (run-with-idle-timer my-html-render-delay nil
                       (lambda (buffer) 
                         (shr-render-buffer buffer)
                         (select-window (get-buffer-window buffer))) 
                       (current-buffer)))

(defun my-html-render-install ()
  (interactive)
  (add-hook 'post-command-hook 'my-html-render-post-command-hook nil t))

Many things are wrong with this code (window handling is terrible for example, but also it's using shr, which will most definitely help you with javascript), but it gives the idea. Developing a full solution is certainly possible, but it's a small project by itself.