We are excited to announce that a new version of <a href="https://appsilon.github.io/shiny.semantic/" target="_blank" rel="noopener"><strong>shiny.semantic</strong></a> is available!

The list of changes is available in the <a href="https://appsilon.github.io/shiny.semantic/news/index.html" target="_blank" rel="noopener">documentation</a>, but the <strong>most important one</strong> is related to <strong>semantic assets</strong>. In the previous versions, by default, CSS styles and JavaScript files were downloaded from a CDN.

<strong>What did it mean to you?</strong> Basically, you had to have a working network connection to be able to see the beautiful Shiny application. It was possible to switch the source to a local one, but it didn’t work for themes.

But now, in <a href="https://cloud.r-project.org/web/packages/shiny.semantic/index.html" target="_blank" rel="noopener noreferrer">version 0.5.0</a>, <strong>this has been changed</strong>. <strong>All assets come from a second package - semantic.assets</strong>. <strong>It includes all the required CSS and JavaScript files, so you no longer need to rely on the CDN.</strong> Moreover, all themes previously available are there! Now, you can easily switch the look of your application, no matter where you work.

<strong>So, how do you migrate your project to the new shiny.semantic?</strong> It is super simple! All you need to do is install the new version with <code>install.packages(“shiny.semantic”)</code> , and that’s it! We introduced the change in a way that does not require any code modification.

If you want to use one of the available themes, you can pass the name as the <code>theme</code> argument in <code>semanticPage</code>.
<h2>Example: Basic Shiny App with shiny.semantic</h2>
For example, this code will create a simple Shiny application with a shiny.semantic base look:
<pre><code class="language-r">
library(shiny)
library(shiny.semantic)
<br>ui &lt;- semanticPage(
 horizontal_menu(
   list(
     list(name = "Rhinoverse", link = "https://rhinoverse.dev"),
     list(name = "Appsilon", link = "https://appsilon.com")
   )
 ),
 cards(
   class = "two",
   card(
     div(
       class = "content",
       div(class = "header", "Elliot Fu"),
       div(class = "meta", "Software Developer"),
       rating_input("rate", value = 3),
       div(class = "description", "Elliot Fu is a software developer from New York."),
       br(),
       button("contact", "Contact Me!")
     )
   ),
   card(
     div(
       class = "content",
       div(class = "header", "John Bean"),
       div(class = "meta", "Designer"),
       rating_input("rate2", value = 3),
       div(class = "description", "John Bean is a designer from London."),
       br(),
       button("contact_2", "Contact Me!")
     )
   )
 )
)
<br>server &lt;- function(input, output) {}
<br>shinyApp(ui, server)
</code></pre>
<img class="wp-image-22925 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e675d174948dd0d8b779_627b3b14_Image1.webp" alt="Shiny App with shiny.semantic" width="1071" height="616" /> Shiny App with shiny.semantic
<h3>Customizing with Themes:</h3>
Now, if you modify it a little bit by providing a theme, the app will get a totally different vibe:
<pre><code class="language-r">
library(shiny)
library(shiny.semantic)
<br>ui &lt;- semanticPage(
 theme = "superhero", # app will use 'superhero' theme
 horizontal_menu(
   list(
     list(name = "Rhinoverse", link = "https://rhinoverse.dev"),
     list(name = "Appsilon", link = "https://appsilon.com")
   )
 ),
 cards(
   class = "two",
   card(
     div(
       class = "content",
       div(class = "header", "Elliot Fu"),
       div(class = "meta", "Software Developer"),
       rating_input("rate", value = 3),
       div(class = "description", "Elliot Fu is a software developer from New York."),
       br(),
       button("contact", "Contact Me!")
     )
   ),
   card(
     div(
       class = "content",
       div(class = "header", "John Bean"),
       div(class = "meta", "Designer"),
       rating_input("rate2", value = 3),
       div(class = "description", "John Bean is a designer from London."),
       br(),
       button("contact_2", "Contact Me!")
     )
   )
 )
)
<br>server &lt;- function(input, output) {}
<br>shinyApp(ui, server)
</code></pre>
<img class="wp-image-22927 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e676447f2063fd1e5d88_dd2bf580_Image2.webp" alt="Customizing with Themes" width="1071" height="619" /> Customizing with Themes
<h2>CDN Usage Flexibility</h2>
Ok, but what if you want to use a CDN? Maybe you want to speed up the application for a specific region or you want to include your custom theme? It is not a problem - simply set the <code>shiny.custom.semantic.cdn</code> option, e.g. in your <code>.Rprofile</code> file:
<pre><code class="language-r">
# .Rprofile
<br>option(shiny.custom.semantic.cdn = "URL of the CDN")
</code></pre>
<h2>What if I don’t want to upgrade shiny.semantic?</h2>
As long as there are applications that use the old CDN setup, we are not going to delete it. If you want to keep your app as it is, you shouldn’t face any problems. But we encourage you to consider the upgrade, as it comes also with bug fixes that can make your application more reliable and simply better. Also, more changes and improvements are coming, so stay tuned!
<h2>Explore the Rhinoverse Ecosystem</h2>
<code>shiny.semantic</code> is only one of the packages that build Rhinoverse - a family of R libraries built around Rhino - an R/Shiny framework designed to fulfil the needs of a modern web developer who wants to build reliable applications in an efficient way.
<blockquote>Make sure that you check the other members of the family - you can find them on <a href="https://rhinoverse.dev/" target="_blank" rel="noopener">rhinoverse.dev</a>!</blockquote>

‍