Do you ever find yourself editing HTML or CSS files but would like to see your browser render changes in real-time? Emacs offers an easy solution to this problem, provided you have Emacs GUI installed via
apt-get install emacs,
pacman -Syu emacs or
brew cask install emacs. Once you have Emacs set up you will need to install
impatient-mode package via MELPA. I will leave you with a link to my emacs configuration so you can follow along in this tutorial without having any knowledge of Emacs or how to setup packages with MELPA.
These steps should work on any platform that runs Emacs. Emacs comes pre-installed in many *nix distributions, but you may need to first install Emacs GUI from your system's package repository.
- Open your terminal
- in your prompt type
$ brew cask install emacs,
$ pacman -Syu emacsor
$ apt-get install emacs
This step requires that you set up Emacs with MELPA and that you configure it in your
init.el file in
.emacs.d/ and then install
impatient-mode Emacs package. Thankfully, you don't need to figure this out if you copy my emacs configuration to your
- make sure you are in your
$HOMEdirectory by typing
$ git clone https://github.com/avocadoras/.emacs.d.git
cd into the repository after it finishes cloning.
My personal configuration contains many packages that will slow down Emacs launch. If you start Emacs from scratch you will need to set up MELPA with Emacs and then install Impatient Mode. To reduce headaches you can copy my emacs configuration and switch to the branch
web-impatient. This branch will launch Emacs quicker than with my personal configuration.
- make sure you are in
.emacs.d/by typing in your terminal prompt
$ cd .emacs.d/
- switch to web-impatient branch by typing
$ git checkout web-impatient
You will need to open the file with Emacs so switch to a directory in your filesystem that contains an HTML file or open and create a new one by typing
$ emacs test.html
You will need to start the http server that comes with
impatient-mode package by typing in your file
ALT-x httpd-start (in macOS this would be OPTION-x httpd-start
) then hit the keyRETURN
. Then you will need to activateimpatient-mode
by typingALT-x impatient-mode
) then hit the keyRETURN
You will need to first launch your browser and go to the address in localhost where your file is served. The address should be
http://localhost:8080/imp. You will see a list served files. Click the file you want rendered. Finally, type anything in your
test.hml file and your browser will start rendering anything you type.