{"id":13426629,"url":"https://github.com/trafficonese/widgetframe","last_synced_at":"2025-12-12T01:01:54.200Z","repository":{"id":56937363,"uuid":"75968541","full_name":"trafficonese/widgetframe","owner":"trafficonese","description":"Embed htmlwidgets in Responsive iframe.","archived":true,"fork":false,"pushed_at":"2021-09-30T14:38:42.000Z","size":2735,"stargazers_count":68,"open_issues_count":11,"forks_count":13,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-06-11T20:11:03.775Z","etag":null,"topics":["htmlwidgets","rstats"],"latest_commit_sha":null,"homepage":"https://bhaskarvk.github.io/widgetframe/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trafficonese.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-08T19:28:50.000Z","updated_at":"2024-03-15T07:26:09.000Z","dependencies_parsed_at":"2022-08-21T01:10:10.527Z","dependency_job_id":null,"html_url":"https://github.com/trafficonese/widgetframe","commit_stats":null,"previous_names":["trafficonese/widgetframe","bhaskarvk/widgetframe"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trafficonese%2Fwidgetframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trafficonese%2Fwidgetframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trafficonese%2Fwidgetframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trafficonese%2Fwidgetframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trafficonese","download_url":"https://codeload.github.com/trafficonese/widgetframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243510115,"owners_count":20302294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["htmlwidgets","rstats"],"created_at":"2024-07-31T00:01:39.533Z","updated_at":"2025-10-21T20:29:39.345Z","avatar_url":"https://github.com/trafficonese.png","language":"JavaScript","readme":"---\noutput: github_document\n---\n```{r, echo = FALSE}\nknitr::opts_chunk$set(fig.retina=2, fig.path = \"README_figs/README-\")\n```\n\n```{r, echo = FALSE}\ndescription \u003c- readLines(system.file(\"DESCRIPTION\", package='widgetframe'))\nrvers \u003c- stringr::str_match(grep(\"R \\\\(\", description, value = TRUE), \"[0-9]{1,4}\\\\.[0-9]{1,4}\\\\.[0-9]{1,4}\")[1,1]\nversion \u003c- gsub(\" \", \"\", gsub(\"Version:\", \"\", grep(\"Version:\", description, value = TRUE)))\nlast_change \u003c- gsub('-', '--', Sys.Date())\n```\n\n[![Project Status: Active – The project is being actively developed.](http://www.repostatus.org/badges/latest/active.svg)](http://www.repostatus.org/#active) [![Last-changedate](https://img.shields.io/badge/last%20change-`r last_change`-green.svg)](/commits/master)  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![keybase verified](https://img.shields.io/badge/keybase-verified-brightgreen.svg)](https://gist.github.com/bhaskarvk/46fbf2ba7b5713151d7e) [![Travis-CI Build Status](https://travis-ci.org/bhaskarvk/widgetframe.svg?branch=master)](https://travis-ci.org/bhaskarvk/widgetframe) [![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/bhaskarvk/widgetframe?branch=master\u0026svg=true)](https://ci.appveyor.com/project/bhaskarvk/widgetframe) [![minimal R version](https://img.shields.io/badge/R%3E%3D-`r rvers`-6666ff.svg)](https://cran.r-project.org/) [![packageversion](https://img.shields.io/badge/Package%20version-`r version`-orange.svg?style=flat-square)](commits/master) [![CRAN_Status_Badge](http://www.r-pkg.org/badges/version/widgetframe)](https://cran.r-project.org/package=widgetframe) [![](http://cranlogs.r-pkg.org/badges/grand-total/widgetframe)](http://cran.rstudio.com/web/packages/widgetframe/index.html)\n\n## widgetframe: htmlwidgets inside responsive iframes.\n\nThe goal of widgetframe is to be able to embed widgets inside iframes using NPR's [Pymjs](http://blog.apps.npr.org/pym.js/) library for responsive iframes.\n\nThis package provides two functions `frameableWidget`, and `frameWidget`. The `frameableWidget` is used to add extra code to a htmlwidget which allows it to be rendered inside a responsive iframe. The `frameWidget` returns a htmlwidget which displays content of another htmlwidget inside a responsive iframe. \n\n### Current Status\n\n- Works With\n    * [Flex Dashboard](http://rmarkdown.rstudio.com/flexdashboard/): Check out this [Demo](https://rawgit.com/bhaskarvk/widgetframe/examples/flexdashboard/dashboard.html).\n    * [RMarkdown](rmarkdown.rstudio.com) + [knitr](yihui.name/knitr/): Check out this [Demo](https://rawgit.com/bhaskarvk/widgetframe/examples/rmarkdown/knitr_example.html).\n    * [RMarkdown Website](http://rmarkdown.rstudio.com/lesson-13.html): Check out this [Demo](https://rawgit.com/bhaskarvk/widgetframe/examples/rmarkdown-website/site/index.html).\n    * [Xaringan Presentations](https://slides.yihui.name/xaringan/): Check out this [Demo](https://rawgit.com/bhaskarvk/widgetframe/examples/xaringan/widgetframe.html#1).\u003cbr/\u003e`widgetframe` should also work with other RMarkdown + knitr based presentations.\n    * [Bookdown](https://bookdown.org/) gitbook: Needs a Makefile, but works. Check out this [Demo](https://rawgit.com/bhaskarvk/widgetframe/examples/bookdown/book/index.html).\n    * [blogdown](https://github.com/rstudio/blogdown/):  Check out this [Demo](https://rawgit.com/bhaskarvk/widgetframe/examples/blogdown/public/index.html).\n\n\u003cbr/\u003e\n\n- Does Not (Yet) Work With\n    * Shiny\n\n### Installation\n\nRelease version\n\n```{r cran, eval=FALSE}\ninstall.packages('widgetframe')\n```\n\nOR development version\n\n```{r github, eval=FALSE}\nif(!require(devtools)) {\n  install.packages('devtools')\n}\ndevtools::install_github('bhaskarvk/widgetframe')\n```\n\n### Usage\n\n#### `frameableWidget` function.\n\nThe `frameableWidget` function should be used when you need a HTML which can be embedded in a CMS system like WordPress/blogger or a static HTML website using the [Pymjs](http://blog.apps.npr.org/pym.js/) library.\n\n```{r, eval=FALSE}\nlibrary(leaflet)\nlibrary(widgetframe)\nl \u003c- leaflet() %\u003e% addTiles()\nhtmlwidgets::saveWidget(frameableWidget(l),'leaflet.html')\n```\n\nThe resulting leaflet.html contains the necessary Pym.js Child initialization code and will work inside a regular iFrame or better yet a Pym.js responsive iFrame. It is expected that the site which is going to embed this widget's content has the necessary Pymjs Parent initialization code as described [here](http://blog.apps.npr.org/pym.js/).\n\n#### `frameWidget` function\n\n`frameWidget` function takes an existing htmlwidget as an argument and returns a new htmlwidget which when rendered, wraps the input htmlwdiget inside a responsive iFrame. This function can be used to knit htmlwidgets such that they are unaffected by the parent HTML file's CSS. This could be useful in [bookdown](https://bookdown.org/) or [R Markdown Websites](http://rmarkdown.rstudio.com/rmarkdown_websites.html) to embed widgets such that they are unaffected by the site's global CSS/JS.\n\nYou can use `widgetFrame` inside your R Markdowns as shown below.\n\n\u003cpre\u003e\u003ccode\u003e```{r 01}\nlibrary(leaflet)\nlibrary(widgetframe)\nl \u003c- leaflet(height=300) %\u003e% addTiles() %\u003e% setView(0,0,1)\nframeWidget(l)\n```\u003c/code\u003e\u003c/pre\u003e\n\n\n\u003cpre\u003e\u003ccode\u003e```{r 02}\nlibrary(dygraphs)\nts \u003c- dygraph(nhtemp, main = \"New Haven Temperatures\",\n              height=250, width='95%')\nframeWidget(ts)\n```\u003c/code\u003e\u003c/pre\u003e\n\n### Code of Conduct\n\nPlease note that this project is released with a [Contributor Code of Conduct](CONDUCT.md). By participating in this project you agree to abide by its terms.\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrafficonese%2Fwidgetframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrafficonese%2Fwidgetframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrafficonese%2Fwidgetframe/lists"}