Build your entire UI with HTML
The HTML UI application demonstrates defining a Shiny user interface using a standard HTML page rather than a UI object. To run the example type:
Defining an HTML UI
Many Shiny apps use a UI object file to build their user interfaces. While this is a fast and convenient way to build user interfaces, some applications will inevitably require more flexiblity. For this type of application, you can define your user interface directly in HTML. For such apps, the directory structure looks like this:
<application-dir> |-- app.R |-- www |-- index.html
In this example we re-write the front-end of the Tabsets application (
runExample("06_tabsets")) using HTML directly. Here is the source code for the new user interface definition:
There are few things to point out regarding how Shiny binds HTML elements back to inputs and outputs:
- HTML form elements (in this case a select list and a number input) are bound to input slots using their
- Output is rendered into HTML elements based on matching their
idattribute to an output slot and by specifying the requisite css class for the element (in this case either shiny-text-output, shiny-plot-output, or shiny-html-output).
All of the changes from the original Tabsets application were to the user interface, the server script remains the same:
Building the Shiny app object
We end the
app.R file with a call to the
shinyApp function to build the Shiny app object using the UI and server components we defined above.
For more on this topic, see the following resources:
If you have questions about this article or would like to discuss ideas presented here, please post on RStudio Community. Our developers monitor these forums and answer questions periodically. See help for more help with all things Shiny.