Skip to content

Commit 34eeee2

Browse files
committed
Update README
1 parent 5d859d0 commit 34eeee2

File tree

1 file changed

+66
-2
lines changed

1 file changed

+66
-2
lines changed

README.md

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,66 @@
1-
# quarto-webr-with-quarto-shinylive
2-
Demo of combining two quarto extensions
1+
# Demo showcasing {quarto-webr} and {quarto-shinylive} together
2+
3+
This repository is an example of how the [`{quarto-webr}`](https://github.com/coatless/quarto-webr)
4+
and [`{quarto-shinylive}`](https://github.com/quarto-ext/shinylive) Quarto extensions can be used together.
5+
6+
## Installation
7+
8+
Please make sure to create a Quarto project and, then, install each extension inside of Terminal:
9+
10+
```sh
11+
# For shinylive
12+
quarto add quarto-ext/shinylive
13+
14+
# For quarto-webr
15+
quarto add coatless/quarto-webr
16+
```
17+
18+
19+
Both extensions should be found in `_extensions` within the project directory. If not, please double-check your working project directory.
20+
21+
## Quarto Document
22+
23+
From there, please setup a Quarto document (`.qmd`) that contains:
24+
25+
1. the Shiny app source inside of a code cell denoted with `{shinylive-r}`; and,
26+
2. the code you want webr to use with `{webr-r}`.
27+
28+
Here is an example skeleton Quarto document that has both code cells present:
29+
30+
````md
31+
---
32+
title: Pairing {quarto-shinylive} and {quarto-webr}
33+
format:
34+
html:
35+
resources:
36+
- shinylive-sw.js
37+
engine: knitr
38+
filters:
39+
- webr
40+
- shinylive
41+
---
42+
43+
## {quarto-shinylive}
44+
45+
```{shinylive-r}
46+
#| standalone: true
47+
library(shiny)
48+
49+
ui <- fluidPage(
50+
titlePanel("Hello Shiny!")
51+
)
52+
53+
server <- function(input, output, session) {
54+
# code
55+
}
56+
57+
shinyApp(ui, server)
58+
```
59+
60+
## quarto-webr
61+
62+
```{webr-r}
63+
print("hello quarto-webr world!")
64+
```
65+
66+
````

0 commit comments

Comments
 (0)