Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashbaldry/designer
Prototype UI for Shiny Apps
https://github.com/ashbaldry/designer
r shiny
Last synced: about 2 months ago
JSON representation
Prototype UI for Shiny Apps
- Host: GitHub
- URL: https://github.com/ashbaldry/designer
- Owner: ashbaldry
- License: other
- Created: 2022-01-18T21:26:14.000Z (almost 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-08-20T10:35:58.000Z (over 1 year ago)
- Last Synced: 2024-10-28T17:32:21.129Z (2 months ago)
- Topics: r, shiny
- Language: JavaScript
- Homepage: https://ashbaldry.github.io/designer/
- Size: 7.97 MB
- Stars: 149
- Watchers: 3
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-shiny-extensions - designer - Shiny UI prototype builder allowing drag and drop UI components before saving the equivalent R code. (Theming / Theme Customization)
- jimsghstars - ashbaldry/designer - Prototype UI for Shiny Apps (JavaScript)
README
[](https://lifecycle.r-lib.org/articles/stages.html#experimental)
[](https://app.codecov.io/gh/ashbaldry/designer?branch=main)
[](https://github.com/ashbaldry/designer/actions/workflows/R-CMD-check.yaml)
# {designer} 
`{designer}` is intended to make the initial generation of a UI wireframe of a shiny application as quick and simple as possible.
The package contains a `shiny` application that enables the user to build the UI of a `shiny` application by drag and dropping several `shiny` components - such as inputs, outputs and buttons - into one of the available pages in the `{shiny}` package. Once finalised, the R code used to generate the UI can be copied or downloaded to a `ui.R` file, and then the rest of the application like the server logic and styling can be built by the developer.
The drag-and-drop nature of the application means that it is easy for both R and non-R users to collaborate in designing the UI of their shiny application. Comments can be added to any component so that it is simple to remember what should be included for each input/output.
## Installation
Install from [CRAN](https://cran.r-project.org/package=designer) with:
``` r
install.packages("designer")
```
Or install the development version from [GitHub](https://github.com/ashbaldry/designer) with:
``` r
devtools::install_github("ashbaldry/designer")
```
The application is also available on-line through [shinyapps.io](https://ashbaldry.shinyapps.io/designer).
## Usage
To open the `{designer}` application and create your own UI, run the following code:
``` r
designer::designApp()
```
Alternatively, you can launch the addin via the RStudio menu.
Once opened, create the application as required until you are happy with the layout of the application, then copy the code to the relevant R file
``` r
# ui.R
bootstrapPage(
title = "Shiny Application",
theme = bslib::bs_theme(4),
h1(
"My shiny application"
),
inputPanel(
selectInput(
inputId = "dropdown_gxc2o1ekgb",
label = "Label",
choices = "..."
),
selectInput(
inputId = "dropdown_azset57v65",
label = "Label",
choices = "..."
),
selectInput(
inputId = "dropdown_itgcle8yze",
label = "Label",
choices = "..."
)
),
fluidRow(
column(
width = 6,
# Bar plot
plotOutput(
outputId = "plot_zvu8c9upbu",
height = "200px"
)
),
column(
width = 6,
# Line chart
plotOutput(
outputId = "plot_qsmfr0lp57",
height = "200px"
)
)
)
)
```
## Docker
Optionally, you can also build a Dockerized version of the app:
```
sudo docker build -t designer -f Dockerfile .
```
After building the docker image (which should take a while) use the command:
```
docker run -p 80:80 designer
```
Depending on your Docker set-up, the exposed application may be available under: http://localhost:80
## Sharing Designs
Once you are ready with your initial design, you can share it with others using Code -> Share. This will generate a URL that when opened by another person (or yourself in the future) will show the saved state of the design and then can be added onto and saved again - this will generate a new URL to share.
**NB** For bookmarking to work, the server the `{designer}` application sits on must be configured to allow sessions to be saved on the disk. As the saved state only saves the HTML and a couple of inputs, each saved state is generally only a couple of kilobytes.
## Notes
Certain inputs will only include default values and not fully customisable; this is intentional as they are likely to change throughout development and therefore not something that is required at this time of the development process.