• Stars
    star
    1,066
  • Rank 43,337 (Top 0.9 %)
  • Language
    Emacs Lisp
  • License
    The Unlicense
  • Created about 12 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Live web development in Emacs

Skewer: live web development with Emacs

Provides live interaction with JavaScript, CSS, and HTML in a web browser. Expressions are sent on-the-fly from an editing buffer to be evaluated in the browser, just like Emacs does with an inferior Lisp process in Lisp modes.

Skewer is available from MELPA, which will install the dependencies for you. This package and its dependencies are pure Elisp, meaning setup is a breeze, the whole thing is highly portable, and it works with many browsers.

Dependencies:

Skewer requires Emacs 24.3 or later.

Usage

Quick version

If Skewer was installed from MELPA, skip to step 3.

  1. Put this repository directory in your load-path
  2. Load skewer-mode.el
  3. M-x run-skewer to attach a browser to Emacs
  4. From a js2-mode buffer with skewer-mode minor mode enabled, send forms to the browser to evaluate

The function skewer-setup can be used to configure all of mode hooks (previously this was the default). This can also be done manually like so,

(add-hook 'js2-mode-hook 'skewer-mode)
(add-hook 'css-mode-hook 'skewer-css-mode)
(add-hook 'html-mode-hook 'skewer-html-mode)

The keybindings for evaluating expressions in the browser are just like the Lisp modes. These are provided by the minor mode skewer-mode.

  • C-x C-e: Evaluate the form before the point and display the result in the minibuffer. If given a prefix argument, insert the result into the current buffer.
  • C-M-x: Evaluate the top-level form around the point.
  • C-c C-k: Load the current buffer.
  • C-c C-z: Select the REPL buffer.

The result of the expression is echoed in the minibuffer.

Additionally, css-mode and html-mode get similar sets of bindings for modifying the CSS rules and HTML on the current page.

CSS

  • C-x C-e: Load the declaration at the point.
  • C-M-x: Load the entire rule around the point.
  • C-c C-k: Load the current buffer as a stylesheet.

HTML

  • C-M-x: Load the HTML tag immediately around the point.

Note: run-skewer uses browse-url to launch the browser. This may require further setup depending on your operating system and personal preferences.

Multiple browsers and browser tabs can be attached to Emacs at once. JavaScript forms are sent to all attached clients simultaneously, and each will echo back the result individually. Use list-skewer-clients to see a list of all currently attached clients.

Sometimes Skewer's long polls from the browser will timeout after a number of hours of inactivity. If you find the browser disconnected from Emacs for any reason, use the browser's console to call skewer() to reconnect. This avoids a page reload, which would lose any fragile browser state you might care about.

Manual version

To skewer your own document rather than the provided blank one,

  1. Load the dependencies
  2. Load skewer-mode.el
  3. Start the HTTP server (httpd-start)
  4. Include "http://localhost:8080/skewer" as a script (see example.html and check your httpd-port)
  5. Visit the document from your browser

Skewer fully supports CORS so the document need not be hosted by Emacs itself. A Greasemonkey userscript is provided, Skewer Everything, for injecting Skewer into any arbitrary page you're visiting without needing to modify the page on the host. More information below.

Don't copy skewer.js anywhere or use it directly. Emacs hosts this script itself, manipulating it in memory before it reaches the browser. Always access it through the servlet on the Emacs webserver as /skewer.

Browser Support

Skewer is known to work properly with Firefox, Chrome, Safari, Opera, and IE8+. Except for CSS and HTML, Skewer will work in IE7 when document.querySelector and JSON are polyfilled. If you find any other JavaScript-supported browser that doesn't work with Skewer, please report it.

REPL

A REPL into the browser can be created with M-x skewer-repl, or C-c C-z. This should work like a console within the browser. Messages can be logged to this REPL with skewer.log() (like console.log()).

Results of expressions evaluated in the REPL are printed more verbosely than in the minibuffer, when possible. This may help in debugging.

Skewering with CORS

Skewer supports Cross-origin Resource Sharing (CORS). This means you can Skewer a document hosted from any server without needing any special changes on that server, except for including /skewer as a script in that document.

If you don't control the server from which you want to skewer pages -- such that you can't add the Skewer's script -- the provided Greasemonkey userscript (.user.js) can be used to inject it into any page you visit. Note that this userscript will assume you're running the Skewer server at http://localhost:8080/ (simple-httpd's default port). If this isn't true, you need to edit the top of the userscript.

The script isn't actually injected until you switch the toggle in the top-right corner, the red/green triangle.

Alternatively, the following bookmarklet will load skewer on demand:

javascript:(function(){var d=document;var s=d.createElement('script');s.src='http://localhost:8080/skewer';d.body.appendChild(s);})()

With a browser plugin like Custom Javascript for Websites, you can use the bookmarklet to auto-skewer specific domains, saving you a mouse click on each reload.

bower

Also provided are some functions for loading libraries from the bower infrastructure on the fly. This is accessed with skewer-bower-load. For example, I often find it useful to load jQuery when skewering a page that doesn't have jQuery installed.

Note: to use this bower does not need to be installed, only git. It's just the bower infrastructure being used. Unfortunately this infrastructure is a mess right now; many packages are in some sort of broken state -- missing dependencies, missing metadata, broken metadata, or an invalid repository URL. Some of this is due to under-specification of the metadata by the bower project.

Motivation

I wanted something like swank-js but without all the painful setup. Having already written an Emacs web server I was halfway there. It took relatively little code to accomplish.

I also didn't want to rely a browser-specific feature, like MozRepl or WebKit's remote debugger (kite).

The name refers to the idea that Emacs is skewering the browser from server-side.

More Repositories

1

endlessh

SSH tarpit that slowly sends an endless banner
C
7,113
star
2

w64devkit

Portable C and C++ Development Kit for x64 (and x86) Windows
C
2,871
star
3

elfeed

An Emacs web feeds client
Emacs Lisp
1,371
star
4

hash-prospector

Automated integer hash function discovery
C
672
star
5

enchive

Encrypted personal archives
C
630
star
6

branchless-utf8

Branchless UTF-8 decoder
C
589
star
7

scratch

Personal scratch code
C
366
star
8

pixelcity

Shamus Young's procedural city project
C++
359
star
9

optparse

Portable, reentrant, getopt-like option parser
C
326
star
10

pdjson

C JSON parser library that doesn't suck
C
279
star
11

interactive-c-demo

Demonstration of interactive C programming
C
249
star
12

emacs-aio

async/await for Emacs Lisp
Emacs Lisp
215
star
13

webgl-particles

WebGL particle system demo
JavaScript
203
star
14

fantasyname

Fantasy name generator
C
180
star
15

lstack

C11 Lock-free Stack
C
172
star
16

resurrect-js

JavaScript serialization that preserves behavior and reference circularity.
JavaScript
169
star
17

passphrase2pgp

Generate a PGP key from a passphrase
Go
168
star
18

pure-linux-threads-demo

Pthreads-free Linux threading demo
Assembly
147
star
19

ptrace-examples

Examples for Linux ptrace(2)
C
134
star
20

memdig

Memory cheat tool for Windows and Linux games
C
131
star
21

dosdefender-ld31

DOS Defender (Ludum Dare #31)
C
130
star
22

dotfiles

My personal dotfiles
Shell
124
star
23

Prelude-of-the-Chambered

Notch's Prelude of the Chambered 48-hour game
Java
124
star
24

sort-circle

Colorful sorting animations
C
124
star
25

.emacs.d

My personal .emacs.d
Emacs Lisp
119
star
26

growable-buf

Growable Memory Buffer for C99
C
116
star
27

youtube-dl-emacs

Emacs youtube-dl download manager
Emacs Lisp
104
star
28

getopt

POSIX getopt() as a portable header library
C
102
star
29

trie

C99 trie library
C
98
star
30

opengl-demo

Minimal OpenGL 3.3 core profile demo
C
97
star
31

Minicraft

Notch's Ludum Dare 22 entry.
Java
95
star
32

igloojs

Low-level, fluent, OOP WebGL wrapper
JavaScript
89
star
33

hastyhex

A blazing fast hex dumper
C
88
star
34

webgl-game-of-life

WebGL Game of Life
JavaScript
88
star
35

u-config

a smaller, simpler, portable pkg-config clone
C
84
star
36

bmp

24-bit BMP (Bitmap) ANSI C header library
C
84
star
37

elisp-ffi

Emacs Lisp Foreign Function Interface
C++
83
star
38

rng-js

JavaScript seedable random number generation tools.
JavaScript
82
star
39

mandel-simd

Mandelbrot set in SIMD (SSE, AVX)
C
81
star
40

sample-java-project

Example Ant-based Java project
Java
78
star
41

nasm-mode

Major mode for editing NASM assembly programs
Emacs Lisp
78
star
42

vulkan-test

Test if your system supports Vulkan
C
77
star
43

gap-buffer-animator

Gap buffer animation creator
C
72
star
44

at-el

Prototype-based Emacs Lisp object system
Emacs Lisp
71
star
45

skeeto.github.com

Personal website/blog
HTML
64
star
46

ulid-c

ULID Library for C
C
62
star
47

xf8

8-bit Xor Filter in C99
C
61
star
48

race64

World's fastest Base64 encoder / decoder
C
58
star
49

devdocs-lookup

Quick Emacs API lookup on devdocs.io
Emacs Lisp
58
star
50

webgl-path-solver

WebGL shortest path solver
JavaScript
57
star
51

x86-lookup

Quickly jump to x86 documentation from Emacs
Emacs Lisp
57
star
52

javadoc-lookup

Quickly lookup Javadoc pages from Emacs
Emacs Lisp
55
star
53

am-i-shadowbanned

Online reddit shadowban test
JavaScript
53
star
54

fun-liquid

Physics engine liquid in Java.
Java
53
star
55

minimail

Embeddable POP3 + SMTP server.
C
50
star
56

emacs-memoize

Elisp memoization functions
Emacs Lisp
48
star
57

webgl-fire

WebGL fire effect
JavaScript
47
star
58

simplegpg

Simplified, signify-like interface to GnuPG signatures
Shell
47
star
59

autotetris-mode

Automatically play Emacs Tetris
Emacs Lisp
45
star
60

fiber-await

Win32 Fiber async/await demo
C
45
star
61

lorenz-webgl

Lorenz System WebGL
JavaScript
42
star
62

asteroids-demo

Asteroids Clone for Windows
C
40
star
63

elisp-json-rpc

JSON-RPC library for Emacs Lisp
Emacs Lisp
39
star
64

hashtab

Simple C hash table
C
37
star
65

pgp-poisoner

PGP key poisoner
Go
36
star
66

bf-x86

x86_64 brainfuck compiler
C
36
star
67

wisp

Wisp, a lisp programming language
C
33
star
68

binitools

Bini file translator for the game Freelancer
C
32
star
69

double-pendulum

JavaScript double pendulum simulation with RK4 integration
JavaScript
30
star
70

predd

Multimethods for Emacs Lisp
Emacs Lisp
29
star
71

atomkv

In-memory, JSON, key-value service with compare-and-swap updates and event streams
Go
29
star
72

purgeable

Purgeable memory allocations for Linux
C
28
star
73

lqueue

C11 + Pthreads Atomic Bounded Work Queue
C
28
star
74

uuid

UUID generator for Go
Go
27
star
75

goblin-com

Goblin-COM roguelike game for 7DRL 2015
C
27
star
76

jekyll-deck

Template for Jekyll / deck.js presentations
27
star
77

rlhk

Roguelike Header Kit
C
26
star
78

voronoi-toy

WebGL interactive Voronoi diagram
JavaScript
26
star
79

transcription-mode

Emacs mode for editing transcripts.
Emacs Lisp
25
star
80

october-chess-engine

Java Chess Engine
Java
25
star
81

boids-js

HTML5 boids (skewer-mode demo)
JavaScript
25
star
82

optparse-go

GNU style long options for Go
Go
24
star
83

geohash

Fast, lean, efficient geohash C library
C
24
star
84

bitpack

Emacs Lisp structure packing
Emacs Lisp
23
star
85

lean-static-gpg

Lean, static GnuPG build for Linux
Shell
23
star
86

connect4

Connect Four AI and Engine
C
22
star
87

blowpipe

Authenticated Blowfish-encrypted pipe
C
22
star
88

markov-text

Markov chain text generation in Emacs Lisp
Emacs Lisp
22
star
89

joymacs

Joystick support for Emacs
C
21
star
90

emacs-rsa

RSA cryptography in Emacs Lisp
Emacs Lisp
21
star
91

live-dev-env

A live CD of my personal development environment
Shell
20
star
92

dynamic-function-benchmark

Benchmark for three different kinds of dynamic function calls
C
20
star
93

utf-7

UTF-7 encoder and decoder in ANSI C
C
19
star
94

elisp-fakespace

Emacs Lisp namespaces (defpackage)
Emacs Lisp
18
star
95

siphash

Incremental SipHash in C
C
18
star
96

bencode-c

Bencode decoder in ANSI C
C
17
star
97

british-square

British Square Engine (Analysis and Perfect AI Player)
C
17
star
98

pokerware

Pokerware Secure Passphrase Generation
Makefile
17
star
99

xxtea

100% XXTEA authenticated, chunked file encryption
C
17
star
100

gnupg-windows-build

Cross-compile GnuPG for Windows using Docker
Dockerfile
17
star