In the past few years, the most dominant JavaScript frameworks and libraries have included React, Angular, and Vue; however, since being released in November 2016, Svelte has been growing in popularity.

👁 Svelte Material UI

Renowned for its reactivity, Svelte is a powerful tool for building high-speed web applications that updates the DOM by compiling code and converting it to pure JavaScript.

In this tutorial, we’ll explore Svelte Material UI (SMUI), a helper library for building custom and advanced UI components that is inspired by Google’s Material Design. To follow along with this tutorial, you’ll need:

• Familiarity with HTML, CSS, and JavaScript
• A code editor, i.e., Visual Studio Code
• Node.js installed on your machine

To follow along, you can access the source code on my GitHub repo. Let’s get started!

Getting started with Svelte

To get started with Svelte, first, we’ll need to install a Svelte package called degit, allowing us to clone the latest commit from the Svelte Material UI GitHub repo. We’ll use degit to get a starter template for a new application from the Svelte GitHub repo. Run the following command in your terminal:

npm install -g degit

To create a new app, run the command below in your application directory’s command line. Be sure to add a unique name for your project:

degit sveltejs/template your-project-name

Next, CD into the new file directory and run code ., which will open your app folder in VS Code:

👁 App Folder Visual Studio Code

We got the files in the screenshot above from the Sveltejs/template repository. Notice that Svelte apps follow a similar structure to other JavaScript frameworks.

In your app directory’s terminal, run the command below to install the required dependencies:

npm install

Next, we’ll get the Node modules and the package-lock.json file that controls the dependencies. To open your application locally on the browser, run the following command in your terminal:

npm run dev

Now, your Svelte application should open on a local server in your browser, as seen in the image below:

👁 New Svelte Application Open Browser

Adding Svelte Material UI to your Svelte project

To use SMUI in our Svelte project, first, we have to install it by running the following command in our terminal:

npm install --save-dev svelte-mui

The dependencies will be installed in our package.json file, which will look like the image below:

👁 Dependencies Installed Svelte Materialui Project

Svelte Material UI is a collection of lightweight UI components that we can easily import into our Svelte application, including components for UI elements like a checkbox, menu, icon, floating label, form field, and radio buttons.

As an example, let’s say we need a slider component in our Svelte application. We can run the command below in our app terminal:

npm install --save-dev @smui/slider

To import the slider component into our application, we’ll copy and paste the code below in our script tag:

import {MDCSlider} from '@material/slider';

Next, we’ll call a continuous slider in our HTML with the code below:

<div class="mdc-slider">
<input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
<div class="mdc-slider__track">
 <div class="mdc-slider__track--inactive"></div>
 div class="mdc-slider__track--active">
 <div class="mdc-slider__track--active_fill"></div>
 </div>
 </div>
 <div class="mdc-slider__thumb">
 <div class="mdc-slider__thumb-knob"></div>
 </div>
</div>

The slider will appear in our app like the image below:

👁 Slider UI Element Display

Build a simple to-do list with Svelte Material UI

Let’s build a simple to-do list application using pre-built components from Svelte Material UI.

Our application will have a button for adding new tasks, which the user can define using a text field. We’ll also add a delete button for removing events once they are completed. To do so, we’ll import the Add button, Text field, and Delete button components from SMUI.

Getting started

First, let’s create a new file in our src/components folder called Header.svelte, which will contain the UI for our application’s header:

<script>

</script>
<style>
 .header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 20px;
 color: #fff;`
 font-weight: bold;
 font-size: 1.5em;
 background: rgba(0, 0, 0, 0.1);
 }
</style>


<div class="header">
 <span>Onome's Todo list</span>
</div>

In your App.svelte file, run the code below to import the component in your script tag:

import Header from "./components/Header.svelte";

Now, call the header in your HTML as follows:

<Header />

Import the Add button

Next, we’ll import the Add button from SMUI, which creates a new text field for users to add a new task in the to-do list. To import the button component, first, run the following command in your terminal:

npm install @material/button

Import the button component in your script tag with the code below:

import { Button } from 'svelte-mui/src';

Now, import the code below in your script tag, giving the Add button the ability to add new tasks as text fields:

<script>
import { Button } from 'svelte-mui/src'
 let tasks = [];
 const addTasks = () => {
 tasks = [...tasks, '']
 }
</script>
<div>
<Button on:click={addTasks} raised color="#ff4d14">Add
 </Button>
</div>

If you run npm run dev in your terminal, your application will look like the image below:

👁 Add Button Display

Import the Text field

To import the SMUI Text field component, first, run the following command in your app’s terminal:

npm install --save-dev @smui/textfield

Now, you can import the Text field component in your application with the following code:

import {MDCTextField} from '@material/textfield';

To get your Text field, copy and paste the code below in your HTML:

<label class="mdc-text-field mdc-text-field--outlined">
 <span class="mdc-notched-outline">
 <span class="mdc-notched-outline__leading"></span>
 <span class="mdc-notched-outline__notch">
 <span class="mdc-floating-label" id="my-label-id"></span>
 </span>
 <span class="mdc-notched-outline__trailing"></span>
 </span>
 <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
 </label>

Import the Delete button

Finally, we’ll create a Delete button, which uses a trash can icon wrapped with the SMUI button component. When clicked, the button will delete a task from the to-do list using the slice() function.

First, run the command below in your terminal:

npm install @material/icon-button

Now, import the icon and button component into your application with the following code:

import {MDCRipple} from '@material/ripple';

Let’s retrieve the trash can icon from Google Fonts Material Icons; first, we’ll import Material Icons in our application with the code below:

<head>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>

To import the icon of your choice, simply add its HTML code in your app. In this case, we used the delete icon. Next, we’ll write the script for the delete button, causing it to remove the task when a click event is triggered:

<script>
 import { Button } from 'svelte-mui/src'
 let tasks = [];
 const removeTask = (index) => {
 tasks = [...tasks.slice(0, index), ...tasks.slice(index+1)];
 }
</script>
<div>
{#each tasks as task, index }
<Button on:click={()=>removeTask(index)} > <span class="material-icons" >
 delete
 </span> </Button>
{/each}
</div>

Deploy your Svelte application

You can deploy your Svelte app as you would any other web app. However, you must run npm run build in your terminal before deploying on Netlify or any other site of your choice. Our final app looks like the image below:

👁 Svelte Material UI To Do Application

You can also see the deployed app here.

Conclusion

As a relatively new JavaScript frontend compiler, Svelte is still a work in progress. However, it has already proven itself to be effective and easily understandable, thanks in part to third-party packages and component libraries. This article demonstrated how Svelte Material UI utilizes Material UI components, providing utilities for creating faster applications that have a more attractive and understandable UI.

If you have any questions, feel free to comment below!

👁 Image