https://github.com/cynkra/dockViewR
Layout Manager Widget for R and Shiny
https://github.com/cynkra/dockViewR
layout panels shiny
Last synced: 4 months ago
JSON representation
Layout Manager Widget for R and Shiny
- Host: GitHub
- URL: https://github.com/cynkra/dockViewR
- Owner: cynkra
- License: other
- Created: 2025-03-10T11:38:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-19T07:40:24.000Z (4 months ago)
- Last Synced: 2026-03-20T00:42:01.538Z (4 months ago)
- Topics: layout, panels, shiny
- Language: R
- Homepage: https://cynkra.github.io/dockViewR/
- Size: 15.5 MB
- Stars: 31
- Watchers: 4
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.Rmd
- Changelog: NEWS.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shiny-extensions - dockViewR - Layout manager widget for R and Shiny apps. (UI Components / Bootstrap)
README
---
output: github_document
---
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
fig.path = "man/figures/README-",
out.width = "100%"
)
```
# dockViewR
[](https://lifecycle.r-lib.org/articles/stages.html#experimental)
[](https://CRAN.R-project.org/package=dockViewR)
[](https://github.com/cynkra/dockViewR/actions/workflows/R-CMD-check.yaml)
[](https://app.codecov.io/gh/cynkra/dockViewR)
The goal of dockViewR is to provide a layout manager for Shiny apps and interactive R documents. It builds on top of [dockview](https://dockview.dev/).
## Installation
The latest version of the dockViewR package can be obtained from [CRAN](https://CRAN.R-project.org/package=dockViewR):
```r
# install.packages("pak")
pak::pak("dockViewR")
```
Or, you can install the development version of dockViewR like so:
``` r
pak::pak("cynkra/dockViewR")
```
## Example
This is a basic example which shows you how spin up a simple dockview app:
```{r, results="asis", echo=FALSE, warning=FALSE, comment = ""}
dockViewR:::print_r_code("examples/demo/app.R")
```
## Contributing
We welcome contributions! If you’d like to help improve `{dockViewR}`, feel free to submit issues, feature requests, or pull requests.
### Knowledge pre-requisites
`{dockViewR}` is an __htmlwidget__, an interactive widget for R, powered by a JS library. To get a minimum starting kit:
- JavaScript for R devs: https://book.javascript-for-r.com/.
- About htmlwidgets: https://www.htmlwidgets.org/develop_intro.html.
### Software pre-requisite
To contribute to this project, you'll need `npm`, `node`, and the R package `{packer}` to compile the JavaScript code. Please follow guide [here](https://packer.john-coene.com/#/guide/installation). When you are in the project, do the following:
```r
pak::pak("packer")
# Restore JavaScript dependencies in package-lock.json (a bit like the renv.lock)
packer::npm_install()
```
The JS code uses [ES6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), meaning that you can define a module in a `srcjs/component.js` script as follows:
```js
export const blabla = () => {
console.log("Blabla");
}
```
and use it in another script, let's say `./otherscript.js` like so:
```js
// ./otherscript.js
import { blabla } from './components.js'
```
Whenever you are done with changing the JS script, you have to rebuild it:
```r
# Change the code and then rebundle
packer::bundle("development") # For developement mode
packer::bundle() # For production. Defaut!
```
You may as well bundle for `dev` using `packer::bundle_dev()` when in developer mode and when ready for production use `packer::bundle_prod()`. You may also consider `watch()` which watches for changes in the `srcjs` and rebuilds if necessary, equivalent to `npm run watch`.
### Debugging steps
1. Whenever you run an app using `{dockViewR}`, like in `inst/examples/demo`, open the viewer on a
web browser window (preferably Chrome as it is used to illustrate the action in this step, as other browser devtools differ in term of layout).
2. Right-click on the widget and navigate to the `inspect` option on the drop-down menu.
3. At the top, where the tabs are displayed, navigate to the `Sources` tab. Open from the sidepanel `dockviewer/srcjs/widgets/dockview.js` script
. Once the `dockview.js` script is opened on the main panel. You can set a breakpoint on any line number of the script and reload the page.
## Acknowledgments
This package is built on top of the amazing [dockview](https://dockview.dev/) JavaScript library.