Creating desktop applications using the Emacs core

I am studying widgets.el, it is a library with different components to make user interfaces. Currently, I am transforming my scripts, that I use daily, to visuals applications in Emacs.

When I finished my first apps, I thought: “Is it possible to share my application with coworkers or friend who don’t have Emacs? How I can turn Elisp code into an binary? Maybe I can compile a modified Emacs with a clean UI. After that, Emacs will run my script at startup.”. In summary, I can use Emacs to create GUIs with an Elisp backend.

After some days, I tried to compile with the changes. When I executed the binary the result was this:

Simple calculator.

App to learn irregular verbs.

Nice applications.

If you want to see the steps, then continue reading.

1. Get source code

Download Emacs source code.

wget -O emacs-master.zip https://codeload.github.com/emacs-mirror/emacs/zip/refs/heads/master

Uncompressed the file.

unzip emacs-master.zip

And enter to emacs-master folder.

cd emacs-master

2. Add my custom Elisp file

Make site-init.el file from lisp folder.

touch lisp/site-init.el

All our code will go inside.

More instructions in INSTALL file.

3. Set my theme

Inside site-init.el, add your theme options. For example, I only set the background to light gray.

(set-face-background 'default "#E9E9E9")

And set the window title.

(setq frame-title-format "Sum calculator")

4. Hide default UI

By default, Emacs is full of controls. If we want to provide the users with simple interface, we will hide every button.

Add the following code to site-init.el:

;; Hide UI
(setq-default mode-line-format nil) ;; Hide mode line
(menu-bar-mode -1) ;; Hide menu bar
(tool-bar-mode -1) ;; Hide tool bar
(scroll-bar-mode -1) ;; Hide scroll bar

5. Set initial size

Like any window, we set the initial size when the user opens the software.

Add the following code to site-init.el:

(add-to-list 'initial-frame-alist '(width . 50))  ; Width
(add-to-list 'initial-frame-alist '(height . 20)) ; Height

6. Add my own code

It is the time to add our awesome code. I will insert a simple application that sums two numbers using widgets. Of course, inside site-init.el.

;; Imports
(require 'widget)

;; Variables
(defvar input-field-1)
(defvar input-field-2)
(defvar input-result)

;; Functions

(defun sum-inputs (widget &rest ignore)
  "Sum the two numbers in the input fields."
  (let ((num1 (widget-value input-field-1))
        (num2 (widget-value input-field-2))
        result)
    (setq result (+ (string-to-number num1) (string-to-number num2)))
    (widget-value-set input-result (number-to-string result))))


(defun main-layout ()
  "Make widgets for the main layout."
  (interactive)
  ;; Create the buffer
  (switch-to-buffer "*Sum calculator*")
  ;; Clear the buffer
  (kill-all-local-variables)
  (let ((inhibit-read-only t))
    (erase-buffer))
  (remove-overlays)
  ;; Create the widgets
  (widget-insert "Sum Calculator\n\n")
  (setq input-field-1 (widget-create 'editable-field
				     :size 5
				     :help-echo "Type a number"
				     :format "Number 1: %v"))
  (widget-insert "\n+\n")
  (setq input-field-2 (widget-create 'editable-field
				     :size 5
				     :help-echo "Type a number"
				     :format "Number 2: %v"))
  (widget-insert "\n\n")
  (widget-create 'push-button
		 :notify #'sum-inputs
		 :help-echo "Calculate the sum of the two numbers"
		 :highlight t
		 "Calculate")
  (widget-insert "\n\n")
  (setq input-result (widget-create 'item
				    :format "Result: %v" ""))

  ;; Display the buffer
  (use-local-map widget-keymap)
  (widget-setup)
  (widget-forward 1))

Now we will start the application only when Emacs finishes starting.

(add-hook 'emacs-startup-hook 'main-layout)

7. Build Emacs

These steps are common commands for compiling on Linux. If you have problems, you will have to look for the solution in your system. Any tutorial for compiling Emacs help you.

./autogen.sh
./configure --with-native-compilation
make bootstrap -j4

8. Run

Now you can run your graphical application.

If you have any Emacs configuration, you will need to add the -Q flag but ignore ~/.emacs.d.

./src/emacs -Q

Conclusion

Now you have many questions.

Can you use Emacs to make desktop applications?: Yes, of course. It is a great strategy. Emacs is lightweight, only 5.7 Mb in size (In Debian with GTK support, I don’t count dependencies), multi-platform, multi-architecture and very stable. Only you will have to customize the installation: icon and launcher.

It is the future to build desktop applications?: Oh my God… no! But this is fun, isn’t it?