Render HTML inside Emacs' org-mode
Emacs Lisp JavaScript
Switch branches/tags
Nothing to show
Clone or download

Org Babel Browser - Render HTML in org-mode

Do you want to write HTML blocks in org-mode and have them automagically rendered as screenshots? Yes, I thought so. Me too. Here we go…


<!DOCTYPE html>
        <link href="" rel="stylesheet" media="screen">
        <div class="row">
            <div class="span6 offset1">
                <h1>Rendered PNG</h1>
                <button class="btn btn-primary">You Can't Press This</button>



You must have PhantomJS installed on your machine and available on the Emacs env path. I do something like this:

From the terminal:

sudo port install phantomjs

In .emacs:

(add-to-list 'exec-path "/opt/local/bin")
(setenv "PATH" (mapconcat 'identity exec-path ":"))


If you’re hooked up to MELPA:

M-x package-refresh-contents
M-x package-install RET ob-browser


Each block supports the following arguments:

:outOutput filename.#+BEGIN_SRC browser :out demo.png

The :out argument is mandatory. The file format will be chosen automatically based on the extension, and may be any of:

  • .png
  • .gif
  • .jpg
  • .pdf