Back to the schedule
Previous: Productivity Dashboards with Emacs and Kindle
Next: Emacs development updates

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

Andrea mailto:andrea-dev@hotmail.com - pronouns: he/him -- https://ag91.github.io

Q&A: IRC or Etherpad
Duration: 8:26

This talk was also streamed at an alternate time for APAC hours: https://libreau.org/past.html#emacsconf21

If you have questions and the speaker has not indicated public contact information on this page, please feel free to e-mail us at emacsconf-submit@gnu.org and we'll forward your question to the speaker.

Description

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 learn more about this at: https://github.com/ag91/emacs-with-nyxt

Discussion

IRC nick: `andrea

• I thought I read somewhere that this browser was attempting to allow extensions in a similar manner to Chrome/Firefox extensions. It'd be nice to have a central location to grab those, install them etc.
• does nyxt also have an inspector, to edit html and css?
  • `andrea: yes, I am just sending my JS to the inspector via Common Lisp
• loving the youtube note taking with the timestamp
• If you've been following Nyxt for a while, one of the core design goals is to push web browsing back towards its original conception of intertwingling readership and authorship.
• you have some amazing elisp skills and ideas
• Back when I was using Nyxt I had it tied to stumpwm and I puppeteered them both from emacs with sly.
• I wonder how hard it would be to integrate or compile JS extension to a form available to Nyxt
• `andrea: I need to ask about LibreJS: they have a discourse https://discourse.atlas.engineer/

Outline

• 5-10 minutes: quick demo of running Nyxt from Emacs and a little explanation of the code necessary for integration

Transcript

Welcome to my talk "Emacs with Nyxt: extend your editor with the power of a Lisp browser". Who am I? I'm Andrea. I work as a Clojure software engineer somewhere in the middle of the UK. And I inherited my passion for Emacs from my Ph.D. supervisor, and from that moment on Emacs became a core tool of my daily routine. You can find more about me and my interests at ag91.github.io, that is my blog. Let's get into the talk. So, why Nyxt? Nyxt is an extensible Common Lisp browser. Fundamentally, it's Emacs for web browsing. And why do I say that? I say that because is a…, this is Nyxt. You can see that is organized with buffers, and you can see that I can invoke command, like, I was in Emacs with this. So, I'm using even the same keybindings, so, for that I used M-x. And some of the features of Nyxt are just amazing. For example, say that you want to mark some text, this is the way, so, I just pressed Control space (C-SPC), and now I will start the marker, and now I can copy the text, and when I'm done, I can finish to use visual mode. Or, for example, what about…, I want to navigate without using my mouse. I can do something like follow-hint, and this opens the possibility to press AC to jump on the Articles, and all of a sudden I'm on the page with the blog posts of the Atlas team. Or, for example, I can extend my browser from within the browser. So, you can see I can evaluate a command, a Common Lisp code, and it produces the result. And then, for example, I can also auto…. This browser comes by default with an integration with your password manager, in my case it's pass, and I can copy a password. This is just as easy as is, it comes by default. Another incredibly useful feature that I didn't find in other browsers is searching between multiple buffers. So, this function search-buffers, this command lets me select some of my open buffers, and I can look for a string in there. And you would see that the hits are from the buffers that I have open, for example, Clojure or the YouTube video about Clojure. Let me get into something very interesting. How can I make Emacs speak to Nyxt. And for that, let me show you something in the literate programming approach. So, this Org mode source block is linked to this Nyxt REPL. I can define a new command, and when I go in Nyxt, I can find this new command, and I can invoke it, and you can see there is something in the minibuffer. I can use it from Nyxt, but I can do it here. I can also use it directly from the REPL. You can see that the same thing is logged in the REPL. And then with something that I would speak about in another talk in the conference — Moldable Emacs. I can also just evaluate JavaScript outside. Let's create a playground that allows me to write some JavaScript code. And if I evaluate this code, I get the title of the webpage that is currently open in Nyxt. The cool thing is that I can do it also directly in Lisp, this is Parenscript that evaluates to the same thing, (it) is just the same, just document.title, only that is in Common Lisp. You see that Emacs can speak to Nyxt, but also the reverse is true. Nyxt can speak to Emacs. So, for example, if I'm in Nyxt, and for example, let me go to my blog, if I press here, this is an email link, automatically in Emacs it will let me compone a message using my email manager. Or, say that always in my blog I want to write something here in the searchbar, I think that I don't want to write it in the browser but in my Emacs because I have some template for search. If I do this, all of a sudden the text is added. Or say I'm watching that Clojure video, and I get to this point, and then I say "Yuu! This is a very interesting thing, let me take a note". So, I take some note with some text, and if I go back in Emacs, tadam! I found the note, and I found it with the duration, so I can just jump to the same point. And what else? There is something even bigger that we can do, this is a bit more advanced, and this is something that I do again with my Moldable Emacs. Say that you want to do some data visualization. If we use Vega-Lite…, for example, we want to visualize a scatter plot. Let me take some example data that could be interesting also to you. So, say that I have this playground that lets me evaluate some query on my Org-roam database. What I'm doing here is I'm gonna go through my first 100 notes and collect their backlinks, so some information that I find interesting. If I convert this to JSON, now, all of a sudden this is something that I can put in that Vega-Lite template that I showed you a moment ago. So, I'm gonna find out that file, you see that I left a question mark, (this is) something that I still didn't automate completely. By saving this file and opening it with Nyxt, you can see that now I have a scatter plot. And these are my actual notes, so you can see that if I stay on it, these are actually my notes. When I'm in Emacs, what I can do is I click here, and now in the background it opened my note, and it opened with all my backlinks. You can see that I have embedded in my browser some functionality of Emacs. You understand that this is the power of unifying, integrating these two experiences, and it opens the doors for a lot of interesting interactivity. Anyway, what is next? This was my talk, what is next is continue merging it with Moldable Emacs. (This) is something I will present in another talk in this conference with web, so that we can extract meaning from the web, and we can bring it in Emacs. And from Emacs bringing back stuff like a picture into a web page, so that we can do fancy visualization. Another thing I want to do is to automate the boring browser flows that I do, like, for example, if I periodically buy something, I could do it from within Emacs instead of always clicking around. And then I'm just gonna cross fingers, I hope that this browser will become mainstream. So, this was my talk, thank you for listening, and you can find more about it at ag91.github.io, my blog, and enjoy the rest of the conference, bye! captions: bhavin192 (Bhavin Gandhi)

Back to the schedule
Previous: Productivity Dashboards with Emacs and Kindle
Next: Emacs development updates