2025-06-12 09:37:26 +08:00

89 lines
137 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-languages/r" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>R | LiveCodes</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://livecodes.io/docs/languages/r><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="R | LiveCodes"><meta data-rh=true name=description content="LiveCodes runs R statistical programming language in the browser using WebR."><meta data-rh=true property=og:description content="LiveCodes runs R statistical programming language in the browser using WebR."><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/languages/r><link data-rh=true rel=alternate href=https://livecodes.io/docs/languages/r hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/languages/r hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.a40c3f9c.js defer></script><script src=/docs/assets/js/main.af5c4c8b.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a class="navbar__item navbar__link" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/features/>Features</a><button aria-label="Expand sidebar category 'Features'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Expand sidebar category 'SDK'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Collapse sidebar category 'Languages'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/art-template>art-template</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/asciidoc>AsciiDoc</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/assemblyscript>AssemblyScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/astro>Astro</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/autoprefixer>Autoprefixer</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/babel>Babel</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/bbcode>BBCode</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/blockly>Blockly</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/civet>Civet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/clio>Clio</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/clojurescript>ClojureScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/coffeescript>CoffeeScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/commonlisp>Common Lisp</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cpp-wasm>C/C++ (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cpp>C++</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/csharp-wasm>C# (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/css>CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cssmodules>CSS Modules</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cssnano>cssnano</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/diagrams>Diagrams</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/dot>doT</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ejs>EJS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/eta>Eta</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/fennel>Fennel</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/flow>Flow</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/gleam>Gleam</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/go>Go (Golang)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/haml>Haml</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/handlebars>Handlebars</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/html>HTML</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/imba>Imba</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/java>Java</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/javascript>JavaScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/jinja>Jinja</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/jsx>JSX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/julia>Julia</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/less>Less</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lightningcss>Lightning CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/liquid>Liquid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/livescript>LiveScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lua-wasm>Lua (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lua>Lua</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/malina>Malina.js</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/markdown>Markdown</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mdx>MDX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mjml>MJML</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mustache>Mustache</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/nunjucks>Nunjucks</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ocaml>OCaml</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/perl>Perl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/php-wasm>PHP (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/php>PHP</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcss>PostCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcssImportUrl>Import Url</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcssPresetEnv>Preset Env</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postgresql>PostgreSQL</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/prolog>Prolog</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/pug>Pug</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/purgecss>PurgeCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/python-wasm>Python (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/python>Python</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/languages/r>R</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-native-tsx>React Native (TSX)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-native>React Native</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-tsx>React (TSX)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react>React</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/reason>Reason</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/rescript>ReScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/richtext>Rich Text Editor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/riot>Riot.js</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ruby-wasm>Ruby (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ruby>Ruby</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sass>Sass</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/scheme>Scheme</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/scss>SCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/solid>Solid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/solid.tsx>Solid (TS)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sql>SQL (SQLite)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stencil>Stencil</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stylis>Stylis</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stylus>Stylus</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sucrase>Sucrase</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/svelte>Svelte</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tailwindcss>Tailwind CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tcl>Tcl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/teal>Teal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tokencss>Token CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tsx>TSX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/twig>Twig</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/typescript>TypeScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/unocss>UnoCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vento>Vento</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vue>Vue SFC</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vue2>Vue 2 SFC</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/wat>WebAssembly Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/windicss>Windi CSS</a></ul><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/languages/><span itemprop=name>Languages</span></a><meta itemprop=position content=2><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>R</span><meta itemprop=position content=3></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>R</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
<!-- -->
<p>LiveCodes runs <a href=https://www.r-project.org/ target=_blank rel="noopener noreferrer">R</a> statistical programming language in the browser using <a href=https://docs.r-wasm.org/webr/latest/ target=_blank rel="noopener noreferrer">WebR</a>.</p>
<blockquote>
<p>WebR is a version of the statistical language <a href=https://www.r-project.org/ target=_blank rel="noopener noreferrer">R</a> compiled for the browser and <a href=https://nodejs.org/en/ target=_blank rel="noopener noreferrer">Node.js</a> using <a href=https://webassembly.org/ target=_blank rel="noopener noreferrer">WebAssembly</a>, via <a href=https://emscripten.org/ target=_blank rel="noopener noreferrer">Emscripten</a>.</p>
</blockquote>
<blockquote>
<p>WebR makes it possible to run R code in the browser without the need for an R server to execute the code: the R interpreter runs directly on the users machine. Several R packages have also been ported for use with webR, and can be loaded in the usual way.</p>
<p><a href=https://docs.r-wasm.org/webr/ target=_blank rel="noopener noreferrer">https://docs.r-wasm.org/webr/</a></p>
</blockquote>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage"></a></h2>
<p>Check the <a href=#starter-template>starter template</a> for an example.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=loading-packages>Loading Packages<a href=#loading-packages class=hash-link aria-label="Direct link to Loading Packages" title="Direct link to Loading Packages"></a></h3>
<p><a href=https://repo.r-wasm.org/ target=_blank rel="noopener noreferrer">Supported packages</a> can just be loaded in code, using the <code>library()</code> function, without the need for any explicit installs. Packages are publicly hosted via a CDN in a CRAN-like repository with URL, <a href=https://repo.r-wasm.org/ target=_blank rel="noopener noreferrer">https://repo.r-wasm.org/</a></p>
<p>Example:</p>
<!-- -->
<div style=margin-bottom:30px class=""><a href="https://livecodes.io/#params=N4IgTiBcIDYJYCMwEMwE8AUATADjNYAlADoB2ZAzgC6oDuqFABAKQB8zjZjjAZnDFQCmYDBRyCAxnEFMAvLM4gAImAD2cLMRAlSIADSxkpAOYBXZMZlRw%2BkBNWkKqmIOurxug-YC2OfoKxrUgdXAF8gA" target=_blank rel=noreferrer>Run in LiveCodes<svg width=12 height=12 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module style=margin-left:4px><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=output-rendering>Output Rendering<a href=#output-rendering class=hash-link aria-label="Direct link to Output Rendering" title="Direct link to Output Rendering"></a></h3>
<p>By default, the R code is evaluated and the output is rendered in the <code>document.body</code> of the result page, followed by the plots (rendered as HTML canvas elements).</p>
<p>The evaluation and rendering behavior can be configured by adding a <code>script</code> element in the HTML (markup editor) and setting <code>livecodes.r.config</code>.</p>
<p>Example:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>HTML</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>output</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">config</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>container</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#output'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// other options</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>The following configurations are supported:</p>
<ul>
<li><code>container</code>: CSS selector of the element in which the R code is rendered. If not specified, the output is rendered in <code>document.body</code>. If set to <code>null</code>, the output is not rendered automatically, and can then be accessed via <code>livecodes.r.output</code> (see below).</li>
<li><code>canvasHeight</code>: a number representing the height of the output canvas in pixels. Defaults to <code>309</code>.</li>
<li><code>canvasWidth</code>: a number representing the width of the output canvas in pixels. Defaults to <code>500</code>.</li>
<li><code>canvasPointSize</code>: a number representing the plots point size. Defaults to <code>12</code>.</li>
<li><code>canvasBackground</code>: a string representing the plots background color. Defaults to <code>"transparent"</code>.</li>
<li><code>autoEvaluate</code>: a boolean indicating whether the R code is evaluated automatically. Defaults to <code>true</code>.</li>
</ul>
<p>In addition, detecting and triggering evaluation can be controlled using:</p>
<ul>
<li><code>livecodes.r.evaluated</code>: a promise that can be awaited to denote when the R code has been evaluated when <code>livecodes.r.config.autoEvaluate</code> is set to <code>true</code>.</li>
<li><code>livecodes.r.run()</code>: an async method that triggers the evaluation of the R code. This is useful when <code>livecodes.r.config.autoEvaluate</code> is set to <code>false</code>. It may take an optional parameter representing the config object (see above)</li>
</ul>
<p>The output and plots can be accessed via:</p>
<ul>
<li><code>livecodes.r.output</code>: a string representing the output of the R code.</li>
<li><code>livecodes.r.plots</code>: an array of HTML canvas elements representing the plots.</li>
</ul>
<p>These are available after the promise <code>livecodes.r.evaluated</code> or that returned by <code>livecodes.r.run()</code> is resolved</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=examples>Examples<a href=#examples class=hash-link aria-label="Direct link to Examples" title="Direct link to Examples"></a></h3>
<p>This example shows how to specify the container (for output and plots):</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>HTML</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>container</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">config</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>container</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#container'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>This example shows how to specify different containers for output and plots:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>HTML</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">Output</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>output</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">Plots</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>plots</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>module</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">config</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>container</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style=color:#00009f>await</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">evaluated</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> pre </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>createElement</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'pre'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> pre</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">output</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#output'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">pre</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#plots'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript">livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">plots</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>This example shows how to control when to trigger evaluation of the R code.:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>HTML</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">Output</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>output</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">Plots</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>h2</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>plots</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>module</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">config</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>container</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>autoEvaluate</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style=color:#36acaa>false</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style=color:#00009f>await</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>run</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> pre </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>createElement</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'pre'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> pre</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">output</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#output'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">pre</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#plots'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript">livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">plots</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=demo>Demo<a href=#demo class=hash-link aria-label="Direct link to Demo" title="Direct link to Demo"></a></h2>
<!-- -->
<div class="container_Egsj undefined" style=height:80vh data-height=80vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"r"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"head(iris)\n\nPW &lt;- iris$Petal.Width\nPL &lt;- iris$Petal.Length\nspecies &lt;- iris$Species\nspeciesID &lt;- as.numeric(species)\n\nplot(PL, PW,\n pch = speciesID,\n col = speciesID,\n main = \"Petal Width vs Length\",\n xlab = \"Petal Length\",\n ylab = \"Petal Width\")\nlegend(\"topleft\",\n levels(species),\n pch = 1:3,\n col = 1:3)\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"html"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"&lt;h2>Output&lt;/h2>\n&lt;div id=\"output\">&lt;/div>\n&lt;h2>Plots&lt;/h2>\n&lt;div id=\"plots\">&lt;/div>\n\n&lt;script type=\"module\">\n livecodes.r.config = {\n container: null,\n };\n\n await livecodes.r.evaluated;\n\n const pre = document.createElement('pre');\n pre.innerHTML = livecodes.r.output;\n document.querySelector('#output').appendChild(pre);\n\n document.querySelector('#plots').appendChild(...livecodes.r.plots);\n&lt;/script>\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"r"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"head(iris)\n\nPW &lt;- iris$Petal.Width\nPL &lt;- iris$Petal.Length\nspecies &lt;- iris$Species\nspeciesID &lt;- as.numeric(species)\n\nplot(PL, PW,\n pch = speciesID,\n col = speciesID,\n main = \"Petal Width vs Length\",\n xlab = \"Petal Length\",\n ylab = \"Petal Width\")\nlegend(\"topleft\",\n levels(species),\n pch = 1:3,\n col = 1:3)\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"html"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"&lt;h2>Output&lt;/h2>\n&lt;div id=\"output\">&lt;/div>\n&lt;h2>Plots&lt;/h2>\n&lt;div id=\"plots\">&lt;/div>\n\n&lt;script type=\"module\">\n livecodes.r.config = {\n container: null,\n };\n\n await livecodes.r.evaluated;\n\n const pre = document.createElement('pre');\n pre.innerHTML = livecodes.r.output;\n document.querySelector('#output').appendChild(pre);\n\n document.querySelector('#plots').appendChild(...livecodes.r.plots);\n&lt;/script>\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"r"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"head(iris)\n\nPW &lt;- iris$Petal.Width\nPL &lt;- iris$Petal.Length\nspecies &lt;- iris$Species\nspeciesID &lt;- as.numeric(species)\n\nplot(PL, PW,\n pch = speciesID,\n col = speciesID,\n main = \"Petal Width vs Length\",\n xlab = \"Petal Length\",\n ylab = \"Petal Width\")\nlegend(\"topleft\",\n levels(species),\n pch = 1:3,\n col = 1:3)\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"html"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"&lt;h2>Output&lt;/h2>\n&lt;div id=\"output\">&lt;/div>\n&lt;h2>Plots&lt;/h2>\n&lt;div id=\"plots\">&lt;/div>\n\n&lt;script type=\"module\">\n livecodes.r.config = {\n container: null,\n };\n\n await livecodes.r.evaluated;\n\n const pre = document.createElement('pre');\n pre.innerHTML = livecodes.r.output;\n document.querySelector('#output').appendChild(pre);\n\n document.querySelector('#plots').appendChild(...livecodes.r.plots);\n&lt;/script>\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"params"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"r"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"head(iris)\n\nPW &lt;- iris$Petal.Width\nPL &lt;- iris$Petal.Length\nspecies &lt;- iris$Species\nspeciesID &lt;- as.numeric(species)\n\nplot(PL, PW,\n pch = speciesID,\n col = speciesID,\n main = \"Petal Width vs Length\",\n xlab = \"Petal Length\",\n ylab = \"Petal Width\")\nlegend(\"topleft\",\n levels(species),\n pch = 1:3,\n col = 1:3)\n"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"html"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Output</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Plots</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"plots\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">config</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript">\n container</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript">\n </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword control-flow" style=color:#00009f>await</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">evaluated</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> pre </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>createElement</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'pre'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n pre</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">output</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#output'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">pre</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#plots'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript">livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">plots</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n",</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> "activeEditor": "script"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">};</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"params"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"r"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"head(iris)\n\nPW &lt;- iris$Petal.Width\nPL &lt;- iris$Petal.Length\nspecies &lt;- iris$Species\nspeciesID &lt;- as.numeric(species)\n\nplot(PL, PW,\n pch = speciesID,\n col = speciesID,\n main = \"Petal Width vs Length\",\n xlab = \"Petal Length\",\n ylab = \"Petal Width\")\nlegend(\"topleft\",\n levels(species),\n pch = 1:3,\n col = 1:3)\n"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"html"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> "</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Output</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"output\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Plots</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">h2</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">div id</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"plots\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript">div</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n\n</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">script type</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">\"module\"</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">\n livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">config</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript">\n container</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript">\n </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword control-flow" style=color:#00009f>await</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">evaluated</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> pre </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>createElement</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'pre'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n pre</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">output</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#output'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">pre</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n\n </span><span class="token script language-javascript dom variable" style=color:#36acaa>document</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>querySelector</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#plots'</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>appendChild</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript">livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">r</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript property-access">plots</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript">\n</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">\n",</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> "activeEditor": "script"</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> }</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain">let container = $state(null);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">onMount(() => {</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> createPlayground(container, options);</span><br></span><span class=token-line style=color:#393A34><span class="token plain">});</span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=language-info>Language Info<a href=#language-info class=hash-link aria-label="Direct link to Language Info" title="Direct link to Language Info"></a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=name>Name<a href=#name class=hash-link aria-label="Direct link to Name" title="Direct link to Name"></a></h3>
<p><code>r</code></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=extension>Extension<a href=#extension class=hash-link aria-label="Direct link to Extension" title="Direct link to Extension"></a></h3>
<p><code>.r</code></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=aliases>Aliases<a href=#aliases class=hash-link aria-label="Direct link to Aliases" title="Direct link to Aliases"></a></h3>
<p><code>rlang</code>, <code>rstats</code>, <code>r-wasm</code></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=editor>Editor<a href=#editor class=hash-link aria-label="Direct link to Editor" title="Direct link to Editor"></a></h3>
<p><code>script</code></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=compiler>Compiler<a href=#compiler class=hash-link aria-label="Direct link to Compiler" title="Direct link to Compiler"></a></h2>
<p><a href=https://docs.r-wasm.org/webr/latest/ target=_blank rel="noopener noreferrer">WebR</a></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=version>Version<a href=#version class=hash-link aria-label="Direct link to Version" title="Direct link to Version"></a></h3>
<p>WebR v0.4.0, running R v4.4.1</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=code-formatting>Code Formatting<a href=#code-formatting class=hash-link aria-label="Direct link to Code Formatting" title="Direct link to Code Formatting"></a></h2>
<p>Not supported.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=live-reload>Live Reload<a href=#live-reload class=hash-link aria-label="Direct link to Live Reload" title="Direct link to Live Reload"></a></h2>
<p>By default, when code is updated, the WebR environment is re-used while the global variables are reset. This behavior is used for performance reasons. However, in order to fully reload WebR and start a new environment, insert this comment in the code:</p>
<div class="language-r codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-r codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain"># __livecodes_reload__</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>Think of this like restarting the kernel in Jupyter notebooks.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=starter-template>Starter Template<a href=#starter-template class=hash-link aria-label="Direct link to Starter Template" title="Direct link to Starter Template"></a></h2>
<p><a href="https://livecodes.io/?template=r" target=_blank rel="noopener noreferrer">https://livecodes.io/?template=r</a></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=links>Links<a href=#links class=hash-link aria-label="Direct link to Links" title="Direct link to Links"></a></h2>
<ul>
<li><a href=https://www.r-project.org/ target=_blank rel="noopener noreferrer">R</a></li>
<li><a href=https://docs.r-wasm.org/webr/latest/ target=_blank rel="noopener noreferrer">WebR</a></li>
<li><a href=https://repo.r-wasm.org/ target=_blank rel="noopener noreferrer">Supported packages</a></li>
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/r.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/languages/python><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Python</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/languages/react-native-tsx><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>React Native (TSX)</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><ul><li><a href=#loading-packages class="table-of-contents__link toc-highlight">Loading Packages</a><li><a href=#output-rendering class="table-of-contents__link toc-highlight">Output Rendering</a><li><a href=#examples class="table-of-contents__link toc-highlight">Examples</a></ul><li><a href=#demo class="table-of-contents__link toc-highlight">Demo</a><li><a href=#language-info class="table-of-contents__link toc-highlight">Language Info</a><ul><li><a href=#name class="table-of-contents__link toc-highlight">Name</a><li><a href=#extension class="table-of-contents__link toc-highlight">Extension</a><li><a href=#aliases class="table-of-contents__link toc-highlight">Aliases</a><li><a href=#editor class="table-of-contents__link toc-highlight">Editor</a></ul><li><a href=#compiler class="table-of-contents__link toc-highlight">Compiler</a><ul><li><a href=#version class="table-of-contents__link toc-highlight">Version</a></ul><li><a href=#code-formatting class="table-of-contents__link toc-highlight">Code Formatting</a><li><a href=#live-reload class="table-of-contents__link toc-highlight">Live Reload</a><li><a href=#starter-template class="table-of-contents__link toc-highlight">Starter Template</a><li><a href=#links class="table-of-contents__link toc-highlight">Links</a></ul><div class="custom-content custom-content-toc content_kfNa">
<div class=sponsors>
<div class=sponsors-title>Sponsors</div>
<ul>
<li><a href=https://livecodes.io/docs/sponsor title="Become a sponsor">Your Logo</a></li>
</ul>
</div>
</div></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/overview>Overview</a><li class=footer__item><a class=footer__link-item href=/docs/why>Why Another Playground?</a><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/features>Features</a><li class=footer__item><a class=footer__link-item href=/docs/languages>Languages</a><li class=footer__item><a class=footer__link-item href=/docs/sdk>SDK</a></ul></div><div class="col footer__col"><div class=footer__title>LiveCodes</div><ul class="footer__items clean-list"><li class=footer__item><a href=/docs/../ target=_blank rel="noopener noreferrer" class=footer__link-item>App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=/docs/../?new target=_blank rel="noopener noreferrer" class=footer__link-item>Starter Templates<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href="/docs/../?screen=import" target=_blank rel="noopener noreferrer" class=footer__link-item>Import...<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a class=footer__link-item href=/docs/features/ai>AI Code Assistant 🪄</a><li class=footer__item><a class=footer__link-item href=/docs/bookmarklet>Bookmarklet</a><li class=footer__item><span style="display: flex; gap: 0.5em; align-items: baseline;"><a href=/docs/llms.txt target=_blank class=footer__link-item>llms.txt</a>-<a href=/docs/llms-full.txt target=_blank class=footer__link-item>llms-full.txt</a></span></ul></div><div class="col footer__col"><div class=footer__title>Info</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/credits>Credits</a><li class=footer__item><a class=footer__link-item href=/docs/license>License</a><li class=footer__item><a class=footer__link-item href=/docs/sponsor>Sponsor 💚</a><li class=footer__item><a class=footer__link-item href=/docs/contact>Contact</a><li class=footer__item><a class=footer__link-item href=/docs/about>About us</a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class=footer__link-item>Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>𝕏 / Twitter<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://dev.to/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>Dev<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>npm<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://status.livecodes.io target=_blank rel="noopener noreferrer" class="footer__link-item status-link"><span>Status</span><svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright><br> Released under the MIT License <br>
Copyright © 2025
<a href=https://github.com/hatemhosny target=_blank rel="noopener noreferrer">Hatem Hosny</a></div></div></div></footer></div>