Innovate Faster with {ShinyUiEditor}: Effortless Shiny App Prototyping

Estimated time:

time

min

It's not common for Shiny Developers and Data Scientists to have strong design and frontend/web development skills. They usually prefer working with data, quickly visualizing it, and try to avoid diving into the complexities of CSS.

Getting buy-in within an organization for technological projects is hard. Many decision-makers are sceptical - they've seen projects running out of budget and timeline.

Being able to effectively communicate your idea using real business data in one day in an engaging manner sets you apart and accentuates the value of your proposition. {ShinyUiEditor} package serves as a tool to facilitate such quick prototyping and presentation of data without the technical hindrances of app development.

In this article, we will discuss how to get started with {ShinyUiEditor}, its features, and how you can use it to build your Shiny apps.
<h3>TL;DR:</h3>
<ul><li style="font-weight: 400;" aria-level="1">{ShinyUiEditor} is an R package offering an easy-to-use visual editor that caters to developers who aren’t UI-oriented.</li><li style="font-weight: 400;" aria-level="1">Benefits include rapid prototyping and simplified UI design, making it quicker and cost-effective, even for small teams.</li><li style="font-weight: 400;" aria-level="1">Key features include an interactive UI layout skeleton, live app preview, and drag-and-drop UI components.</li></ul>
<h2>What is {ShinyUiEditor}?</h2>
{ShinyUiEditor} is an R package and a drag-and-drop visual editor for R Shiny apps. It allows developers who aren't UI-oriented to manage the UI-related part of development easily and intuitively using a graphical interface.

This tool promotes rapid prototyping, agile development, and swift feedback adaptation. By simplifying UI design, even smaller teams can produce polished apps with consistent branding, streamlining the development process to be quicker, more cost-effective, and less dependent on specialized UI expertise.
<blockquote>{ShinyUiEditor} is officially out of its 'alpha' phase! Discover the exciting <a href="https://posit.co/blog/shinyuieditor-out-of-alpha/" target="_blank" rel="noopener noreferrer">new features in this latest update</a>.</blockquote>
<h2>How to Get Started</h2><ol><li> First, install the <a href="https://rstudio.github.io/shinyuieditor" target="_blank" rel="noopener noreferrer">{ShinyUiEditor}</a> package (see the <a href="https://rstudio.github.io/shinyuieditor/#installing" target="_blank" rel="noopener noreferrer">Installing</a> section).</li><li> To launch the editor in your browser, simply run this command:</li></ol>
<pre><code>
shinyuieditor::launch_editor(app_loc = "shiny-app/")
</code></pre>
If the shiny-app folder doesn't exist in your working directory, you will need to select one of the available templates for your app at the beginning.

There are four templates available at the moment:

‍
<h2>{ShinyUiEditor} Features</h2>
<img class="wp-image-21373 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b019e1832c47d6730eb3b5_image_2023-10-23_11-44-52.webp" alt="The user interface for ShinyUiEditor for creating data visualizations." width="2048" height="1125" /> {ShinyUiEditor} Features

After selecting a template, you will see the {ShinyUiEditor} interface, which comprises:
<ol><li style="font-weight: 400;" aria-level="1"><b>A main section with an interactive UI layout skeleton</b>, serving as a schematic, visual representation of your app.</li><li style="font-weight: 400;" aria-level="1"><b>A live app preview area</b>, displaying the current appearance of your Shiny app.</li><li style="font-weight: 400;" aria-level="1"><b>A left sidebar with UI components</b> that can be dragged and dropped onto the main section of the UI editor.</li><li style="font-weight: 400;" aria-level="1"><b>A properties panel in the right sidebar</b>, allowing easy adjustment of component and layout parameters.</li></ol>
{ShinyUiEditor} empowers developers to easily and comfortably adjust the layout and components without needing to write code. You can add new components or move existing ones by simply dragging and dropping. Adjusting the layout's column and row sizes is a breeze, thanks to drag handles and sizing widgets. Changing component settings and undoing/redoing changes is straightforward.

Have a look at this short demo:

<video width="100%" height="auto" src="https://wordpress.appsilon.com/wp-content/uploads/2023/10/02-demo-1.webm" loop="true" autoplay="true" controls="true"></video>

Check the <a href="https://rstudio.github.io/shinyuieditor/how-to/" target="_blank" rel="noopener noreferrer">official website</a> for more information
<h2>R Code Generation</h2>
How is it connected to the Shiny app? In the background, every change in the {ShinyUiEditor} triggers the regeneration of the app.R file, containing the R code for your app's UI. This file is generated initially when you select the template.

Let's run this app and see how the workflow looks in action:

<h2>Development</h2>
Step by step, let’s walk through how {ShinyUiEditor}’s features transform your developer’s experience.
<ol><li style="font-weight: 400;" aria-level="1"><b>Launching the {ShinyUiEditor} Interface:</b>The {ShinyUiEditor} interface can be launched from a separate terminal, allowing you to update the UI using this tool in parallel during development.</li><li style="font-weight: 400;" aria-level="1"><b>Real-time Code Synchronization:</b>Any change in the editor instantly updates the regenerated R code. Subsequently, you can update the Shiny app code, resulting in updates on the {ShinyUiEditor} side as well. However, it’s important to note that some custom source code changes can break the {ShinyUiEditor}.</li><li style="font-weight: 400;" aria-level="1"><b>Interchangeable Development Workflow:</b> The app development process can seamlessly occur both in your IDE and the visual UI editor interchangeably, with {ShinyUiEditor} package managing the code synchronization process in the background.</li><li style="font-weight: 400;" aria-level="1"><b>Fine-tuning & Iterative Design:</b> After updating the R code, you can fine-tune the app's appearance in the editor and repeat this process. </li><li style="font-weight: 400;" aria-level="1"><b>Optimizing Development Preferences:</b>Depending on personal preferences, some changes may be easier to implement using your IDE, while the {ShinyUiEditor} can offer a more efficient and faster option for others.</li></ol>
<h2>Conclusion</h2>
{ShinyUiEditor} is a game-changer for R Shiny developers as it bridges the gap between data analysis and UI design. The ability to rapidly prototype and deploy applications can provide a significant competitive advantage. For businesses, this also translates to reduced development costs and enhanced agility in responding to market needs.

Unlock the full potential of your R Shiny projects -- our team of experts is here to guide you every step of the way.

You can also check out this article on user interface design for Shiny apps.