Emacs with Nyxt: extend your editor with the power of a Lisp browser

By John Mercouris

We recently came across a fantastic (EmacsConf) demonstration by Andrea. An absolute must-watch for any serious hacker!

In 2021 browsers are essential if you use a computer. Even if Emacs users love text as a format, they may need to shop and video call from time to time (even more so in a pandemic!). Some of us modified their browsers to at least have the same keybindings as our editor of choice. What if I told you there is an Emacsy browser in the making? What if you could "ace-jump" within a web page? What if you could run a REPL to extend your browser while browsing? What if you could record macros?! The browser exists: its name is Nyxt!

In this talk I will share why it has great potential, how you can integrate it with Emacs, and how you can migrate your Emacs mastery to the web!

If you were wishing for a Lispy and Emacsy browser, you should not miss this talk!

You can see the video here: https://emacsconf.org/2021/talks/nyxt/

or watch our hosted link below:

Also, don't forget to check out Andrea's work on GitHub.

Transcript

WEBVTT

00:00.000 –> 00:01.783 Welcome to my talk "Emacs with Nyxt:

00:01.783 –> 00:02.823 extend your editor with

00:02.823 –> 00:04.623 the power of a Lisp browser".

00:04.623 –> 00:06.583 Who am I? I'm Andrea. I work as

00:06.583 –> 00:08.303 a Clojure software engineer somewhere

00:08.303 –> 00:09.743 in the middle of the UK.

00:09.743 –> 00:11.743 And I inherited my passion for Emacs

00:11.743 –> 00:13.703 from my Ph.D. supervisor, and from that

00:13.703 –> 00:15.943 moment on Emacs became a core tool

00:15.943 –> 00:17.863 of my daily routine.

00:17.863 –> 00:20.863 You can find more about me and my interests

00:20.863 –> 00:23.983 at ag91.github.io, that is my blog.

00:23.983 –> 00:25.183 Let's get into the talk.

00:25.183 –> 00:28.183 So, why Nyxt? Nyxt is an extensible

00:28.183 –> 00:29.543 Common Lisp browser.

00:29.543 –> 00:31.903 Fundamentally, it's Emacs for web browsing.

00:31.903 –> 00:34.063 And why do I say that? I say that

00:34.063 –> 00:36.063 because is a…, this is Nyxt.

00:36.063 –> 00:40.223 You can see that is organized with buffers,

00:40.223 –> 00:44.063 and you can see that I can invoke command,

00:44.063 –> 00:47.183 like, I was in Emacs with this.

00:47.183 –> 00:48.983 So, I'm using even the same keybindings,

00:48.983 –> 00:52.783 so, for that I used M-x.

00:52.783 –> 00:55.983 And some of the features of Nyxt

00:55.983 –> 01:00.103 are just amazing. For example, say that

01:00.103 –> 01:03.823 you want to mark some text, this is the way,

01:03.823 –> 01:08.703 so, I just pressed Control space (C-SPC),

01:08.703 –> 01:10.423 and now I will start the marker,

01:10.423 –> 01:13.223 and now I can copy the text, and when

01:13.223 –> 01:15.663 I'm done, I can finish to use visual mode.

01:15.663 –> 01:18.023 Or, for example, what about…,

01:18.023 –> 01:21.183 I want to navigate without using my mouse.

01:21.183 –> 01:25.183 I can do something like follow-hint,

01:25.183 –> 01:28.023 and this opens the possibility to press

01:28.023 –> 01:29.903 AC to jump on the Articles,

01:29.903 –> 01:33.063 and all of a sudden I'm on the page

01:33.063 –> 01:36.023 with the blog posts of the Atlas team.

01:36.023 –> 01:39.383 Or, for example, I can extend my browser

01:39.383 –> 01:40.783 from within the browser.

01:40.783 –> 01:43.223 So, you can see I can evaluate a command,

01:43.223 –> 01:48.663 a Common Lisp code,

01:48.663 –> 01:50.903 and it produces the result.

01:50.903 –> 01:56.183 And then, for example, I can also auto….

01:56.183 –> 01:58.663 This browser comes by default with an

01:58.663 –> 02:01.143 integration with your password manager,

02:01.143 –> 02:04.223 in my case it's pass, and I can copy

02:04.223 –> 02:08.783 a password. This is just as easy as is,

02:08.783 –> 02:10.543 it comes by default.

02:10.543 –> 02:13.583 Another incredibly useful feature

02:13.583 –> 02:18.023 that I didn't find in other browsers is

02:18.023 –> 02:20.503 searching between multiple buffers.

02:20.503 –> 02:23.503 So, this function search-buffers,

02:23.503 –> 02:25.823 this command lets me select

02:25.823 –> 02:29.503 some of my open buffers,

02:29.503 –> 02:32.503 and I can look for a string in there.

02:32.503 –> 02:34.623 And you would see that the hits are

02:34.623 –> 02:37.423 from the buffers that I have open,

02:37.423 –> 02:42.583 for example, Clojure or

02:42.583 –> 02:46.103 the YouTube video about Clojure.

02:46.103 –> 02:49.623 Let me get into something very interesting.

02:49.623 –> 02:52.783 How can I make Emacs speak to Nyxt.

02:52.783 –> 02:55.103 And for that, let me show you something

02:55.103 –> 02:57.143 in the literate programming approach.

02:57.143 –> 03:00.183 So, this Org mode source block is

03:00.183 –> 03:04.423 linked to this Nyxt REPL.

03:04.423 –> 03:06.983 I can define a new command,

03:06.983 –> 03:09.343 and when I go in Nyxt,

03:09.343 –> 03:10.863 I can find this new command,

03:10.863 –> 03:12.503 and I can invoke it, and you can see

03:12.503 –> 03:16.943 there is something in the minibuffer.

03:16.943 –> 03:21.543 I can use it from Nyxt, but I can do it here.

03:21.543 –> 03:24.703 I can also use it directly from the REPL.

03:24.703 –> 03:27.743 You can see that the same thing is logged

03:27.743 –> 03:30.423 in the REPL.

03:30.423 –> 03:32.663 And then with something that I would speak

03:32.663 –> 03:36.423 about in another talk in the conference

03:36.423 –> 03:39.143 — Moldable Emacs. I can also just

03:39.143 –> 03:42.823 evaluate JavaScript outside. Let's create

03:42.823 –> 03:46.703 a playground that allows me to write some

03:46.703 –> 03:49.903 JavaScript code. And if I evaluate this code,

03:49.903 –> 03:52.023 I get the title of the webpage

03:52.023 –> 03:54.583 that is currently open in Nyxt.

03:54.583 –> 03:58.343 The cool thing is that I can do it also

03:58.343 –> 04:02.263 directly in Lisp, this is Parenscript

04:02.263 –> 04:05.223 that evaluates to the same thing,

04:05.223 –> 04:07.823 (it) is just the same, just document.title,

04:07.823 –> 04:10.743 only that is in Common Lisp.

04:10.743 –> 04:14.343 You see that Emacs can speak to Nyxt,

04:14.343 –> 04:16.103 but also the reverse is true.

04:16.103 –> 04:19.023 Nyxt can speak to Emacs. So, for example,

04:19.023 –> 04:21.943 if I'm in Nyxt, and for example,

04:21.943 –> 04:26.623 let me go to my blog, if I press here,

04:26.623 –> 04:30.863 this is an email link, automatically in Emacs

04:30.863 –> 04:33.943 it will let me compone a message

04:33.943 –> 04:35.943 using my email manager.

04:35.943 –> 04:39.823 Or, say that always in my blog I want

04:39.823 –> 04:43.543 to write something here in the searchbar,

04:43.543 –> 04:46.303 I think that I don't want to write it in

04:46.303 –> 04:50.623 the browser but in my Emacs because

04:50.623 –> 04:52.903 I have some template for search.

04:52.903 –> 04:55.503 If I do this, all of a sudden

04:55.503 –> 04:59.103 the text is added.

04:59.103 –> 05:03.423 Or say I'm watching that Clojure video,

05:03.423 –> 05:06.343 and I get to this point, and then I say

05:06.343 –> 05:09.703 "Yuu! This is a very interesting thing,

05:09.703 –> 05:12.783 let me take a note". So, I take some note

05:12.783 –> 05:16.903 with some text, and if I go back in Emacs,

05:16.903 –> 05:19.023 tadam! I found the note,

05:19.023 –> 05:21.903 and I found it with the duration,

05:21.903 –> 05:25.063 so I can just jump to the same point.

05:25.063 –> 05:28.743 And what else?

05:28.743 –> 05:31.903 There is something even bigger

05:31.903 –> 05:32.663 that we can do,

05:32.663 –> 05:34.063 this is a bit more advanced,

05:34.063 –> 05:35.823 and this is something that I do

05:35.823 –> 05:39.023 again with my Moldable Emacs.

05:39.023 –> 05:41.183 Say that you want to do some

05:41.183 –> 05:43.223 data visualization.

05:43.223 –> 05:44.863 If we use Vega-Lite…, for example,

05:44.863 –> 05:47.823 we want to visualize a scatter plot.

05:47.823 –> 05:49.623 Let me take some example data

05:49.623 –> 05:52.423 that could be interesting also to you.

05:52.423 –> 05:55.063 So, say that I have this playground

05:55.063 –> 05:57.263 that lets me evaluate

05:57.263 –> 06:01.703 some query on my Org-roam database.

06:01.703 –> 06:03.663 What I'm doing here is I'm gonna

06:03.663 –> 06:05.703 go through my first 100 notes

06:05.703 –> 06:09.823 and collect their backlinks,

06:09.823 –> 06:13.183 so some information that I find interesting.

06:13.183 –> 06:16.343 If I convert this to JSON,

06:16.343 –> 06:18.903 now, all of a sudden this is something

06:18.903 –> 06:22.623 that I can put in that Vega-Lite template

06:22.623 –> 06:26.183 that I showed you a moment ago.

06:26.183 –> 06:28.343 So, I'm gonna find out that file,

06:28.343 –> 06:30.463 you see that I left a question mark,

06:30.463 –> 06:31.703 (this is) something that I still

06:31.703 –> 06:33.783 didn't automate completely.

06:33.783 –> 06:37.983 By saving this file and opening it with Nyxt,

06:37.983 –> 06:41.183 you can see that now I have a scatter plot.

06:41.183 –> 06:43.943 And these are my actual notes,

06:43.943 –> 06:48.343 so you can see that if I stay on it,

06:48.343 –> 06:53.063 these are actually my notes.

06:53.063 –> 06:55.343 When I'm in Emacs, what I can do is

06:55.343 –> 06:58.303 I click here, and now in the background

06:58.303 –> 07:00.903 it opened my note,

07:00.903 –> 07:04.303 and it opened with all my backlinks.

07:04.303 –> 07:07.703 You can see that I have embedded in my

07:07.703 –> 07:11.303 browser some functionality of Emacs.

07:11.303 –> 07:13.463 You understand that this is the power of

07:13.463 –> 07:16.983 unifying, integrating these two experiences,

07:16.983 –> 07:18.943 and it opens the doors for

07:18.943 –> 07:22.223 a lot of interesting interactivity.

07:22.223 –> 07:24.743 Anyway, what is next?

07:24.743 –> 07:29.023 This was my talk, what is next is

07:29.023 –> 07:32.143 continue merging it with Moldable Emacs.

07:32.143 –> 07:34.023 (This) is something I will present in

07:34.023 –> 07:37.463 another talk in this conference with web,

07:37.463 –> 07:39.263 so that we can extract meaning from

07:39.263 –> 07:41.103 the web, and we can bring it in Emacs.

07:41.103 –> 07:43.583 And from Emacs bringing back stuff

07:43.583 –> 07:46.543 like a picture into a web page,

07:46.543 –> 07:48.903 so that we can do fancy visualization.

07:48.903 –> 07:51.063 Another thing I want to do is to

07:51.063 –> 07:54.263 automate the boring browser flows

07:54.263 –> 07:55.543 that I do, like, for example,

07:55.543 –> 07:58.263 if I periodically buy something,

07:58.263 –> 08:00.863 I could do it from within Emacs

08:00.863 –> 08:05.263 instead of always clicking around.

08:05.263 –> 08:08.383 And then I'm just gonna cross fingers,

08:08.383 –> 08:10.023 I hope that this browser will

08:10.023 –> 08:11.783 become mainstream.

08:11.783 –> 08:13.263 So, this was my talk,

08:13.263 –> 08:14.663 thank you for listening,

08:14.663 –> 08:17.343 and you can find more about it at

08:17.343 –> 08:19.823 ag91.github.io, my blog,

08:19.823 –> 08:22.680 and enjoy the rest of the conference, bye!

08:22.680 –> 08:25.520 [captions: bhavin192 (Bhavin Gandhi)]