- 3 Minutes Wednesdays
- Posts
- 3MW (Combining Shiny and Quarto)
3MW (Combining Shiny and Quarto)
Guten Tag!
Many greetings from Ulm, Germany.
Today we're unlocking the power of interactivity and bring your documents to life with Shiny and Quarto. Whether you're trying to explain a hard concept or just filter output data via sliders or dropdown lists, interactivity can add huge value to your documents.
And if you need more details after this newsletter, check out the interactive document I wrote as more detailed companion piece:
Adjust your YAML header
First, you need to enable Shiny in the YAML header of your document. That's pretty straightforward. Just set the server option to shiny. Here's an example.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7eaee9fe-9e9e-4efa-a822-698ceafe483d/carbon_122_.png)
Add a server code chunk
But be careful. If you enable Shiny, then your Quarto document needs a server function just like any Shiny app. That's why you need to add a code chunk that sets its context to server.
Doesn't matter what's in it, just make sure that a server chunk is there. If you're only setting up your document, you can just add an empty code chunk.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/00da8a90-3a95-4e96-b5c2-38d30f01a160/carbon_121_.png)
Add UI elements
As you know, any Shiny app consists of two parts: UI and server. We've added a server code chunk. What about the UI?
Well, the thing is: Everything in the document is the UI. So just adding any text or any code will be part of what you'd consider the UI of a regular Shiny app. This means that you can just drop a code chunk that contains, say, a selectInput() call. Then, the rendered document will include a dropdown menu.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6b23dfd5-7412-42d7-86ef-45bc01d9f2d5/image.png)
Render an image
Using the same logic you can throw a plotOutput() into the UI.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/77d026c0-f0e8-4466-8376-e7e4d799fd46/image.png)
But to make sure that the plot is actually rendered (like we've seen here), you will have to write code in the server. This means - you guessed it - writing code into a chunk that uses a server context.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a9948f29-28da-4494-8eb6-05006ce8c5e1/image.png)
Notice that this code chunk loads data. This is necessary even if you've already used that data before. That's because chunks that go into the UI or into the server work separately. But there are ways to avoid this code duplication. I've described them in the interactive Quarto document from before.
Deploy your interactive document
There's loads more that we could talk about. And I covered them in the companion piece. But to keep this newsletter short, let's just end on a small note about deployment.
Just like any Shiny app, you can't just upload this document to, say, GitHub pages. But the good news is that you can upload this document to all the same places that you use for your regular Shiny apps. For me, that's shinyapps.io.
That's a wrap! As always, I'm happy to hear your feedback about this week's issue. Feel free to write me on Twitter or reply to this mail.
Enjoy the rest of your day!Albert
Reply