DEV Community

Carlos Saltos
Carlos Saltos

Posted on • Updated on

My dream Svelte template using Sapper and Material UI

What ?

A web app template using Sapper 0.28.0 and Svelte 3.17.3 with a Material UI theme based on Smelte 1.0.15 updated to September 25th, 2020

NOTE: TypeScript, PostCSS and CSS purging are included as a bonus.

Why ?

Because Material UI is cool and when used with Sapper and Svelte is really productive and powerful.

How ?

Run the commands:

npx degit csaltos/sapper-svelte-material-ui app1
cd app1
npm i
npm run dev
Enter fullscreen mode Exit fullscreen mode

And open the browser at http://localhost:3000 to see a Sapper page done with a Material UI using Svelte.

Where ?

At https://github.com/csaltos/sapper-svelte-material-ui you will find the source code as a reference which is based on the original Sapper with Svelte template.

Please take special attention to the commit at 17a3021 which contains the exact change details to activate Material UI with Sapper using Smelte.

Who ?

This template is possible thanks to Maxim Matyunin and his cool Smelte project and also Jacob Babich for his excellent template based on PostCSS. Also especial thanks to dan for his reference code.

IMPORTANT: obviously this is only a starting point, please review the documentation at https://smeltejs.com/ and https://www.apostrof.co/blog/getting-tailwind-css-to-integrate-nicely-with-svelte-sapper/ for further steps.

NOTE: if you prefer to use Tailwind CSS with other UI please give it a check to a base project on https://dev.to/csaltos/tailwindcss-with-sapper-and-svelte-50ll

Top comments (1)

Collapse
 
damiensawyer profile image
damiensawyer

Thanks for that, it's great. Reminds me so much of knockout js.