Interactive Data Analysis with R Shiny: Layout

In today’s age when the real estate in terms of the screen size is getting smaller by the day, our applications need to adapt quickly. The design of the user interface - the placement of the components - influences user interaction greatly.

In this session, by building a Shiny application that doubles as a tic-tac-toe guide, we will review various layout schemes available in Shiny:

  • sidebar layout
  • grid layout
  • navigation bar
  • navigation menu
  • tab panel

We will also learn how to add images and copy text directly from a text file into our app.

Available On Coursera
Interactive Data Analysis with R Shiny: Layout

Duration (mins)


NA / 5


Task List

We will cover the following tasks in 56 minutes:


In this chapter, we will take a look at the elaborate tic-tac-toe guide we will build while learning about the various layout schemes possible in R Shiny.

Navigation Menu

In this chapter, we will add a Navigation bar on the top of our application page. The easy-to-use navigation bar in Shiny helps divide the application neatly into multiple pages.

Adding Image, Tabs

Images are a great way to add visual appeal into our applications. In this chapter, we will learn how to add images to our app. We will also see how to divide a page in our app into multiple tabs.

Copying a text file

A common use-case in creating applications is when we have to display a long text on our interface. Typing the entire text into code makes the code messy and difficult to manage. In this chapter, we will learn how to read long texts from txt files and display directly on our application without putting any text in the code.

Grid Layout

In the previous chapters, we learnt how to use Shiny’s readily available lay out schemes like the side bar layout and navigation menu and tabs. In this chapter, we will apply a more customized approach. We will learn how to convert the user interface into grids of varying sizes and convert them into dedicated containers for our application components.


While we have already seen the wonders of render functions in previous courses in this series, in this chapter we will learn a trick of using an action button to trigger reactivity inside render function.

Finishing up

In this chapter, we will add the remaining bits and complete our tic-tac-toe guide.


In this chapter, we will review all the layout concepts applied in this session. We will recap adding images and text from text files into our app. By comparing and contrasting different layout schemes, discussing tips and tricks to enhance the layout of our apps, and recapping the application we created, this chapter enable us to create interesting and insightful applications ourselves!

Watch Preview

Preview the instructions that you will follow along in a hands-on session in your browser.

Kena Shah

About the Host

Kena Shah

Frequently Asked Questions

In Rhyme, all projects are completely hands-on. You don't just passively watch someone else. You use the software directly while following the host's (Kena Shah) instructions. Using the software is the only way to achieve mastery. With the "Live Guide" option, you can ask for help and get immediate response.
Nothing! Just join through your web browser. Your host (Kena Shah) has already installed all required software and configured all data.
You can go to, sign up for free, and follow this visual guide How to use Rhyme to create your own projects. If you have custom needs or company-specific environment, please email us at
Absolutely. We offer Rhyme for workgroups as well larger departments and companies. Universities, academies, and bootcamps can also buy Rhyme for their settings. You can select projects and trainings that are mission critical for you and, as well, author your own that reflect your own needs and tech environments. Please email us at
Rhyme strives to ensure that visual instructions are helpful for reading impairments. The Rhyme interface has features like resolution and zoom that will be helpful for visual impairments. And, we are currently developing a close-caption functionality to help with hearing impairments. Most of the accessibility options of the cloud desktop's operating system or the specific application can also be used in Rhyme. If you have questions related to accessibility, please email us at
We started with windows and linux cloud desktops because they have the most flexibility in teaching any software (desktop or web). However, web applications like Salesforce can run directly through a virtual browser. And, others like Jupyter and RStudio can run on containers and be accessed by virtual browsers. We are currently working on such features where such web applications won't need to run through cloud desktops. But, the rest of the Rhyme learning, authoring, and monitoring interfaces will remain the same.
Please email us at and we'll respond to you within one business day.

No sessions available