R-Ladies Rome (English) - Interactive R, Python, and Shiny in the Browser with Quarto and Shinylive
In this session, Isabella Velásquez walks us through Quarto Live and Shinylive, powerful tools that allow us to create interactive R, Python, and Shiny applications without a server. These technologies make it easier than ever to share dynamic, engaging data science projects directly in the browser. What You’ll Learn ️ How Quarto Live brings interactive code to static documents ️ How Shinylive allows Shiny apps to run entirely in the browser ️ Practical use cases for data science, education, and collaboration This talk is ideal for data scientists, educators, and open-source enthusiasts who want to make their work more interactive and accessible. To further explore the subject, we recommend visiting the presentation of the talk : https://ivelasq.github.io/2025-02-21_r-python-shiny-in-the-browser More about the Speaker: - https://www.linkedin.com/in/ivelasq/ 0:00 R-Ladies Rome Chapter Intro 5:00 Isabella's Talk Please visit: https://rladiesrome.org
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Thanks everyone for joining us. Welcome to R-Ladies Rome. This is our February event. So Raffaella, our organizer, will take care of us.
So I introduce the chapter and then we leave the floor to Isabella Velasquez. Thank you.
Hello everyone. It's a pleasure to have you all here. R-Ladies Rome presents Interactive R, Python, and Shiny into the Browser with Quarto and Shinylive. The speaker we have, Isabella Velasquez.
Exclaimer. This talk is recorded and will be posted on YouTube of R-Ladies Rome. Feel free to turn off your cameras if you don't want to be recorded. Here we ensure safe, inclusive, and harassment-free space is our priority. We are committed to promoting respectful environment where everyone feels welcome to learn, connect, and grow.
Please remember that all of our attendees are expected to adhere our code of conduct. Use your chat for introducing yourself and ask questions or raise your hand.
Hello everyone. I'm happy to welcome you to our February event. I'm Rafaela, R-Ladies Rome organizer, and we are thrilled to have you join us today. Get ready for engaging and informative experience.
What to expect from this talk? In this talk, Isabella Velasquez will introduce Quarto Live and Shinylive, tools that enable interactive R in Python and Shiny. Applications to run directly to the browser, no server required. You will learn about create interactive documents, dashboards, and educational content. Expect hands-on demonstration, gain insights on how enhance reproducibility, accessibility, and engagement.
Just to remember to all of us, what is R-Ladies? It's a global community with a mission to promoting the R language for empowering women at all user levels by building a collaborative global network. It was a friendly community founded by 2012 by Gabriela de Queiroz in San Francisco.
And R-Ladies, a local chapter dedicated to promoting inclusivity in R language community. Our monthly meetings provide a platform to discuss the current trends and hot topics in R.
R-Ladies in numbers. R-Ladies Rome has grown into a widely recognized community. Since January, 2023, we have welcomed over 1K members on meetup and gained 2K of RSVPs and successfully organized 25 events.
The founders and organizer of the chapter is Claudio Vitolo, founder, co-founder of R-Ladies Global. And the organizer is Frederica Gasolani and me, Rafael Ribeiro Lucas.
If you are interested in speaking at one of our events or would be like to propose a speaker or a workshop, please scan the QR code and fill up the form.
And if you'd like to contribute to our chapter and be a co-organizer, we are open to new persons. Please subscribe to the form.
And the next future speakers will be Kylie Ansevly, PhD in infectious disease modeling, senior researcher and Claudio Vitolo, scientist and developer in open science advocates related to the story of R-Ladies Global.
So without further ado, we are thrilled to have with us Isabella Velasquez, senior product marketing manager at PositPVC, where she merges content strategy, data analysis and programming to showcase the incredible work happening at Posit. She is passionate about advocate for open source, always exploring new tools to empower data scientists. Today, she will talk about, through part of life and shiny life, showing how we can create fully interactive browser based on R and Python applications without a server. Let's give a warm welcome to Isabella.
Thank you so much for the introduction, Rafael, and thanks to you and Federico for the opportunity. I'm happy to start sharing my screen.
Well, hi everyone. Thank you so, so much for being here. I'm really excited to chat with you today about a ton of really, really amazing tools. And I hope that you learned something new today. I know that I certainly did as I was writing out this talk.
And just a quick aside, this is a photo from the James Webb Telescope. We won't be talking about this kind of web today, but another kind of web that I hope you also find very exciting.
As Rafael mentioned, my name is Isabella Velasquez. I'm Senior Product Marketing Manager at Posit, which was formerly RStudio. And one of the things that I absolutely love about working at Posit is that I get a front row seat at the new things that are being developed and being put out for data scientists working in R, Python, or other sorts of languages.
And so when Federica reached out about a talk, like I was very excited about this one because I feel like there's so many new capabilities and possibilities that I'm really excited to share with you. So I am very active on social media. Here's the various links. If you'd like to reach out on LinkedIn or Blue Sky, please do let me know. And with that, let's get started.
The problem: barriers to running R and Python
So picture this. The first day of class, you have prepared all of your materials, you have your lecture ready, you've sent out the assignment, and then a student comes up to you and says, Professor, I tried installing R, but my laptop keeps running out of space.
Or you're at work and you have created this amazing dashboard that your stakeholders will find extremely valuable. But then you go to your boss and you say, you know, I created this amazing thing, but IT is taking forever to approve the server request. And so you can't share it at that time.
Or another scenario, because your organization doesn't have a server, you're like, okay, well, maybe my colleague and I can collaborate and work on this together and figure out some other way that we can do this. And you send over your GitHub repo to your colleague and they say, I'm sorry, I don't have R set up on my laptop.
And so with all of these different scenarios, you can imagine the idea behind the architecture, the installation, the infrastructure behind needing your languages or your application set up can be quite a barrier to entry for using these really amazing technologies.
WebAssembly, WebR, and Pyodide
And so that's why we are entering the world of interactive R and Python in the browser. So running code directly in the browser opens the door for many new exciting uses of data science on the web.
And the two primary technologies that we'll be talking about is, or we'll be talking about several technologies, but these are brought to you thanks to WebR and Pyodide. But before we talk about them, let's talk about another tool called WebAssembly.
So WebAssembly, or sometimes called WASM, is a low-level, high-performance binary instruction and it allows compiled languages like C or C++ to run in web browsers at near native speeds. So C and C++ code is compiled by something called Emscripten. Emscripten takes the C or C++ code as input. It produces WASM as a result. And once it's in WASM, you can run it in any browser that supports WASM, which in modern browsers is actually most of them.
Python has had a browser solution for a while called Pyodide. So what Pyodide does is compiles the Python interpreter CPython to WebAssembly using Emscripten, and then it makes it possible to run Python in the browser.
And relatively more recently, now R has a similar solution with WebR. So WebR is the WebAssembly version of R that has been compiled to run in the browser. It's an open-source project primarily driven by Posit, and thanks to the amazing work of many folks, but especially George Stagg and Lionel Henry, it's now possible to run R code directly in a web browser without the need of traditional servers to execute the code. So essentially what that means is a user can visit a website and run R code directly, so without needing R installed on their device. All that is required is a web host server like Netlify or GitHub Pages.
So let's see what this actually looks like. This is a web-based interactive R console that's included in the WebR source repo as a demonstration of integrating WebR in a wider web application. So it provides a simple R environment in your web browser and includes things like code input, output, code editing, file management, and graphics.
So if I click this, this is the URL, and I can share this with others. I could share this with you, and you may notice it kind of looks like RStudio. They did a really nice job designing it so that if you are an RStudio user, it looks very familiar. You have your console down here and your plots here, and even though it looks like RStudio, though, remember, this is completely being run in the browser. There was nothing installed from our end. There was nothing that we had to set up, and I can do something like install packages ggplot2.
Dangerous of live coding. There we go. So it says installing packages, and you'll notice it says downloading WebR package. We'll talk a little bit more about that, but even though it looks familiar, again, everything is being done in the browser. I can go up here into my R script and do library ggplot2, run that, and then I do ggplot ntcars as x equals mpg, ntcars as x equals mpg, y equals hp, plus geom point, and then it produces the plot.
So it's pretty amazing. So say you have somebody, for whatever reason they can't install RStudio, but they really want to learn R, you can send them this URL, and they can try things out on their own.
Packages in WebR and Pyodide
So in terms of Pyodide, it includes a package manager that allows the use of Python packages. You can also install Python wheels or load custom Python packages with Pyodide. And then on the R side, there's over 14,000 R packages available for WebR. A bit of a caveat. So the way that this works is that R packages have to be compiled for Wasm. That's why the installed package looked a little bit different.
And so the 14,000 number comes from 14,000 R packages that were compiled to Wasm without error, but they haven't all necessarily been tested. So again, just a bit of a caveat there, but still a lot of packages are available, especially the ones that are very popular and well-known like tidy models and tidyverse and things like that. So when you are installing packages, by default, the WebR install function will use the public repository hosted at repos.rwasm.org.
And then say like you also want to use your own personal package for use in WebR. So there is a project called R Universe. It's a project by R OpenSci that experiments with ideas for improving the publication and discovery of research software in R. And R Universe builds Wasm binaries for R packages for use in WebR applications. So if you have a custom package, the easiest way to get up and running is to create an R Universe repo for your packages. And then the system will automatically build R binaries for different things, including WebAssembly. And then you can use that in WebR.
Introduction to Quarto
And so there are other options. There's an rwasm package and things like that, but just wanted to highlight that is the recommended easiest or quickest way to get started.
In terms of how to use WebR, if you go to the WebR documentation linked here, it's very robust and very detailed. But if you're like me, you look at the front page and it says, install the package, npm i WebR. And you're like, okay. And then import the WebR class. And it has this. And then you realize like, oh, this is JavaScript. So what if you don't know JavaScript like me? It's the edge. So WebR, it doesn't seem to be as quick and easy to use for those who do. But if you don't, what options do you have? And that is where Quarto comes in.
Quarto is a next generation open source publishing system. So it is often called the next evolution or the next generation of our markdown. So it's expanded upon our markdown. What we have done at Posit is taken everything that we learned over the past 10 years to develop a system like Quarto. One of the things about Quarto, it's inherently multilingual. So right now it supports R, Python, Julia and Observable, but it's been designed so that we can add new languages in the future.
Another thing that we've learned is R markdown has a lot of packages that does a lot of things. If you are an R markdown user, you might know like use shringen if you wanna do slides and bookdown if you wanna do books. But Quarto has a shared expression for all these core features. So what that means is if you do a tab set in a Quarto book, it looks the same as a tab set in a Quarto presentation. And the idea behind Quarto is to create dynamic content with Python and R and Julia and Observable. And then another thing is it enables single source publishing. So the idea of creating notebooks or dashboards or books, et cetera, from one source.
And I will say there are many great resources about Quarto. We're not gonna talk about everything about Quarto. At this time, I'm happy to share the resources. I would say that the Quarto documentation site is absolutely incredible. It is very detailed and how to get started, how to use Quarto. I gave a talk a couple of years ago at R Ladies St. Louis that I'm happy to share that went more into detail in terms of like, you know, getting set up in RStudio and rendering documents and things like that. But for today, I'm just going to be talking about the most critical parts of Quarto that you need to know in order to use WebR and Pyodide in Quarto documents.
So first, the anatomy of a Quarto document. So a Quarto document has an extension QMD. The first part that we're going to talk about is what is called the YAML heading. So it is denoted by these three dashes and then a key value pairs within these dashes. So the key, for example, can be title and the value is ggplot2-demo. And the YAML heading contains the metadata for your document. So in this case, it's saying, I want to produce an HTML format.
I can provide additional options like code full true means like the code within the document should collapse so that it's not immediately visible unless somebody clicks it to open it up. And so the YAML heading, just to reiterate, is the kind of metadata of your document.
The next part to talk about is the markdown text. So markdown is a lightweight way of writing formatted text and in a way that it looks very readable. You can do things like, for example, here in line eight, the two pound signs mean this is a heading. So this will be rendered as a heading. You can do things like embed images, links, tables, format your text, all sorts of things. But the really nice thing about markdown is that once you learn it, it's easily readable when you say, put it up on GitHub. It doesn't come out in a very nested, difficult to read format. It looks like text.
The next part of the next anatomy of the Quarto document is what are called code chunks. So those are denoted by three back ticks and then in curly braces, the programming language that you want. And within this code chunk is going to be your executable code. So this is code that is actually going to run. And so there are these things called code chunk options. They're denoted by the pound sign and then the long vertical line. I think that is called a hash pipe. And this provides metadata for your code chunks.
So in this case, it's saying label, label this plot, plot penguins. Echo is false means that you do not want to see the actual code chunk. All you want to do is see the output message and warning is if this code produces a message and warning, do not show it. And there are other kinds of things in terms of like handling how things are actually rendered when you render your document from a QMD file to say an HTML document.
And then within the code chunk is your actual code. So in this case, you know, the library, sorry, the packages tidyverse and palmer penguins will run. It will create this ggplot code. And when you click render on this document, that code is actually going to run.
And so this is a quick look of what it looks like when you actually hit render. So all of that, you know, text and code and labels that you wrote is going to output this HTML document that looks like this. If you notice, you can't see the code because you said, please do not show me the code. There's a link and everything like that that came from the markdown text.
Quarto extensions
Another critical part for today are Quarto extensions. So Quarto extensions let you customize and extend Quarto's functionality beyond its built-in features. So things like new output formats, so custom templates for the documents that you want to create. A relatively recent one is the scrolly telling extension. So if you've ever seen those kinds of journalism articles that as you scroll through, they highlight different plots or different parts of a plot or things like that, that is now possible with Quarto thanks to the scrolly telling extension.
Another example is journal articles. So you can install extensions. So if you are trying to say, like submit to the journal statistical software so that your Quarto document renders in the format that they require. Things like reveal.js themes. So presentations in Quarto are done in a format called reveal.js. And there are extensions out there so that you can see, so you can customize what your reveal.js extension will look like. So unique styling and layouts and all sorts of other ways of modifying how Quarto processes content.
So one example that I have is one that I use for the presentation today. So there is a font awesome extension. And how to use extensions is first you install the extension and then a quick note, Quarto extensions, if you go to their GitHub repo or their documentation page, generally have instructions as to how to install it and how to actually use it. So each one might be slightly different, and so you definitely want to go and check their documentation if there is an extension that you want to use. But for the font awesome extension, you install it, you say Quarto add, Quarto ext font awesome in the terminal. And then in your Quarto document, the YAML heading under, you add a filters option and then list out the different extensions that you want to include. So in this case, filters font awesome.
And then to use the extension of the doc, anywhere that I want to put, say, a GitHub icon, I put this short code with the curly braces. And then when I actually rendered the document, it results in the GitHub icon. So that's an example of a Quarto extension. That being said, there are so many available and here is a link to the Quarto extension gallery by Mikhail Makhnoly. And so if you want to search for different extensions and see what's out there, this is a great place to start. Another note is that Quarto extensions are Lua-based and if you feel comfortable writing in that, you can also make your own extensions if there is something that you require and you don't see out there in the wild.
Quarto Live: interactive code in the browser
So wrapping everything up, we started off talking about WebAssembly and how the technologies behind WebAssembly enable Pyodide and WebR, which allow you to run R and Python in the browser like we saw with the web-based R console. But to use those, you need to know JavaScript. And so we went into a brief introduction of Quarto because with Quarto, there is an extension called Quarto Live.
And Quarto Live allows you to embed WebAssembly-powered code blocks and exercises in Quarto documents through the Quarto Live extension. And there's support for both R via WebR and Python via Pyodide. And features include interactive code blocks, exercises with hints and solutions, and rich output like plots. And the most important thing, WebAssembly and Python skills are not needed to use WebR in your content.
WebAssembly and Python skills are not needed to use WebR in your content.
And I did also want to briefly mention that originally there was an extension by James Balamuta called Quarto WebR, but Quarto Live is the extension that is supported by Posit.
So let's see what this actually looks like. So Quarto Live, again, embeds these WebAssembly-powered blocks for R or Python into Quarto documents. So after a little bit, you're going to see this editor with a button that says run code. And if I click this, I have run R code in my browser from a presentation that I created in Quarto. It is pretty amazing.
I think it's very cool. So another thing to note, this is an editor, so I can change whatever I'd like. So say I want to do one through six.
Okay. Hopefully, if you cannot see it, just let me know. But okay, so I've changed this from one to five to one to six. Let's say print instead of X to the power of two, X to the power of three. We can run code. And then again, it just executes that code in the browser from my presentation.
So in terms of how to actually use this, it's going to look very similar to what we talked about before. First, you install the extension in the terminal, and then you add to your Quarto document YAML header. If you notice, it looks slightly different. So instead of putting it under filters, we put it under format, and we change it from, say, HTML to live HTML.
A quick note is by default, the Quarto live extension uses Pyodide for Python. So if you want to use the Quarto live extension for NIDAR and R, then you have to include the engine, engine NIDAR in your YAML heading. And then you also have to include the shortcode that you see on line six as well.
Then to use Quarto live in a Quarto document, you place your code in either a WebR code chunk for R or a Pyodide code chunk for Python. And so the chunk that you saw a little bit earlier, this is what I have in my document in order to create that live editor that executes code.
A note is you can use Quarto live in your presentations too. So when you're creating a Quarto presentation, you have format reveal JS, and then you edit your YAML header to live reveal JS. Another cool thing that you can do, say, if you want to use Quarto live in your presentations is you can install the Quarto drop extension. You press the back tick, and then this console for R or Python can drop down. And then again, you can just start typing R code and then execute it in real time. And so you can imagine, say you're giving a lecture, somebody asks like, how would you do this in R? You can just go ahead, drop in R console, try it out, and then lift it up and continue on with your presentation.
In terms of other kinds of options that are included in Quarto live, there are things like you can create read only cells. So once that you can actually be edited. You can auto run. So instead of needing somebody to click run code in order to see the output, you can have it auto run. You can have auto complete within the editor if you want, and much more. So recommend looking at the documentation if you want to see all the things that are possible.
And back to the idea of installing packages, you have a couple options here too. You can install packages as the document loads. So in this case, whenever somebody opens the rendered document, WebR is going to load dplyr, Palmer penguins and ggplot2. And so of course, depending on the size of your packages, it might take a little while. Since I had this presentation already open when we started, there's like a little loading message that lets me know like these packages are being loaded. And so the run code will show up once it's ready to go.
And then another option is interactively. So if you would rather install the packages and load them as your user actually goes through the document, you can include this in your WebR or Pyodide chunk. And so whenever they click run code, that's when the package will be installed.
Well, a few more examples. We mentioned like WebR and Quarto live allows you to display plots. So here we have this base R plot. I can click that and then see an example plot. And just a thing to note too, that graphics work a bit different than normal than they do like in regular R. And this is because there's something called a graphics device that implements the drawing commands from R in the browser. But one benefit of this is that it takes advantage of features that exist in browsers already. So things like fonts from other languages or emojis, that's already built in, which is pretty cool.
Let's say I'm seeing this and I'm like, oh, I like this plot. Oh no, I have a typo. I can go ahead, pick that typo, rerun code and get a plot that actually looks the way that I want.
Another example is creating exercises with Quarto live. So you can designate a chunk as an exercise. So this chunk says fill in the blanks so that the result of the sum is 10. I'm like, oh boy, I don't know what to do. I can show a hint and then it tells me consider subtracting one, two, three from 10. I'm like, oh no, I still don't know. Let's say I put five and I click run code. It's going to tell me the output and then let me know that's incorrect. And say I give up, I can say show solution and then it lets me know what the solution is.
So you can imagine for teaching, there's a lot of different kinds of applications. And so here is one from Klaus Wilke on the introduction to R. I open this up. You'll see that Buzzer has created this interactive document. Here is the loading icon. So we know like the packages are not quite ready yet, but it seems like they are being installed as soon as you load the document. And then, okay, it looks like it's ready to go. And then there's all these different exercises that you can go through. And if you imagine there's somebody you're trying to teach introduction to R, here's a great way of making things like really interactive and without like needing that much more to set up beyond the Quarto document that you've created for your lecture.
Another self-promotion that I wanted to give is that I wrote this blog post called Six Not-So-Basic Base R Functions a while back. And a quick note that this used the Quarto WebR extension, not Quarto Live because Quarto Live wasn't quite out yet, but just wanted to show like essentially the same kind of ideas. I wanted to highlight these base R functions and somebody could go in here and run and see like what changes and try things out.
And then also there's an example of what installing packages could look like. So this, for example, is a package that's not on CRAN. It is my older brother's package. And so then I can designate his R universe repository in order to install it and use it in the examples.
I know that that's a lot, but I really hope like this conveys like the excitement and the amazingness that I think this technology brings. And so thanks, Adam, for this note. I hope he's not actually weeping real tears, but it truly is so amazing that sometimes it feels like magic.
Shinylive: Shiny apps without a server
So we've talked about Quarto documents and executable R chunks and things like that, but you might be wondering, well, what about Shiny? And if you are new to Shiny, Shiny allows you to create web applications without needing to know JavaScript, HTML, or anything like that. You can just do it in pure R or pure Python, which is pretty amazing if you don't know JavaScript like me.
But say you've created your Shiny dashboard, very beautiful, ready to go. And then you need to share it with somebody. So the traditional Shiny architecture for deploying a Shiny app involves a separate server and a client. And we've mentioned the word server several times today, but essentially a server is a machine that's connected to the internet that runs 24 seven ready to run your Shiny app. And the server runs R or Python and Shiny, and clients connect via the web browser. And each client keeps an open web socket connection as long as they are using the application.
And in terms of hosting Shiny apps, there are a lot of different options for hosting your server. So for example, you can have RStudio server on your laptop and say you need some scalability or additional security for your app, you can get Posit Connect, which is an enterprise version from Posit and for hosting your Shiny apps. There are also cloud-based solutions. Shinyapps.io has been around for a long time. There is a new product called Posit Connect Cloud that lets you publish Shiny and also all sorts of kind of Python frameworks as well. And then like things like Hugging Face, you can roll your own if you would like.
And then in terms of choosing what the right tool is, it's a very wide spectrum in terms of the number of users. For some people, we might just be sharing our apps with one or two other people. For other people, we might be talking thousands. And then there are some folks in between, like a professor, an academic, might have a few hundred folks looking at their apps. But what if you don't have the infrastructure or the resources to set up either of these kind of options?
Another kind of hosting service are web hosting services. And they offer a lot of scalability and features and perhaps a low price point, like GitHub Pages or Netlify or Quarto Pub, but the issue is they can't run traditional Shiny apps. And the reason is that these are called static web hosting. They're very good in terms of reach and affordability. You don't have to think about servers anymore. So when you publish, say, a Quarto website, you just give them your rendered Quarto document files. But there is no way to run Shiny apps on these kind of servers, on these kind of web hosting services.
So if you've ever created a Shiny app before and you've wanted to share it via a website, you've probably had to embed it in an iframe when you wanted to share it. But that is not the only option anymore. Thanks to Shinylive, anybody can create their own serverless Shiny apps to run in the browser.
And in terms of what this looks like, here is a very simple Shiny app. And remember, this is a Quarto presentation, and this is not an iframe. This is embedded in the presentation itself. And this is a Shiny app. So I could change the number, I can change the color, and did not have to host this on any kind of external server. All it is, it's on the web.
So, I'm sorry. Yes, Shinylive was announced in July 2022 for Python, September 2023 for R. And it uses Pyodide and WebR respectively to enable fully in-browser Shiny apps without a backend. And so, in terms of the architecture, all you need to run Shinylive is these static web servers. So when an application is deployed with Shinylive, R or Python and Shiny run in the web browser, the browser is effectively both the client and the server for the application. And that is pretty amazing. So you don't need a separate server to host these apps.
the browser is effectively both the client and the server for the application.
In terms of how to use Shinylive, you have three options. One is the Shinylive online editor. The second is you can convert a Shiny app that you've created traditionally. And the third is you can embed a Shiny app with Quarto.
So there is an online Shinylive editor for R and for Python. So let's open this up. The editor is on the left and you can change this app in real time. So let's let it load. There are several examples here, which is very helpful if you are new to Shiny and you want to see what it looks like and you want to play around with it. Here's the editor and then here is the app. And it's a real app. I can change this. Number of bins change.
