What is skewer-mode?

Project homepage : https://github.com/skeeto/skewer-mode

skewer-mode is a minor-mode that allows Emacs to send JavaScript, CSS and HTML to an active browser window. It can be used to update content without having the reload whatever page the browser is on.

Before skewer-mode can interact with a page, Emacs needs to start a server and some JavaScript needs to be loaded. The script can either be included in the page code or inserted using a bookmarklet.

What can I use it for?

skewer-mode can be used for the following tasks:

  • Running JavaScript on a page
  • Updating the CSS of a web page
  • Updating HTML of a web page

Running JavaScript on a page

The following keyboard shortcuts are provided for working with JavaScript.

  • C-x C-e – Evaluate the previous JS form and display the result in the minibuffer.
  • C-M-x – Evaluate the top-level form around the point and display the result in the minibuffer.
  • C-c C-k – Load the current buffer into the skewered window.

Here is some very simple JS evaluation in action:

Evaluating JavaScript with Skewer

Updating the CSS of a web page

Skewering CSS uses the same shortcuts as JavaScript:

  • C-x C-e – Load the current declaration into the window.
  • C-M-x – Load the entire rule surrounding the point.
  • C-c C-k – Load the current buffer as a stylesheet.

Styles are updated in the browser without reloading the page, making it very quick to test appearance changes.

In action:

Evaluating CSS with Skewer

Updating HTML of a web page

HTML only uses a single shortcut:

  • C-M-x – Load the HTML tag directly surrounding the point.

I tried this a couple of times but couldn't get it working on a live page.

More information

More information can be found on the project homepage: https://github.com/skeeto/skewer-mode

This post is part of the "Exploring my Emacs packages" series.