Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Svelte Typescript Tailwind Pug Starter Template

A starter template to help you quickly launch a new project with Svelte / Sveltekit, Typescript, TailwindCSS, Pug. I call it the "Skinnypug" stack.  

0. Contents

  1. About this Template
  2. Dependencies
  3. Getting Started
  4. About Sveltekit
  5. Using Pug with Svelte
  6. Folder Shortcuts
  7. Editor & Extensions

1. About This Template

This starter was developed for the Lightning Jar team. It's designed to get one up and running quickly on a new project using the core technologies Svelte, Sveltekit, Typescript, TailwindCSS, Pug + a few other bells and whistles ( see the full breakdown below).

2. Dependencies

A. Frameworks & Build

B. Scripting / Typescript

C. Templating / Pug

  • Pug - HTML template engine

D. CSS / TailwindCSS

E. Formatting / Prettier

F. Linting / ESLint

G. Testing

3. Getting Started

A. Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

B. Building

To create a production version of your app:

npm run build

C. Preview

You can preview the production build with npm run preview.


4. About SvelteKit

Sveltekit is a new framework for building web applications. It's built on top of Svelte, which is a component framework for building user interfaces. Sveltekit is a great tool for building modern web applications.

If you get stuck working with SvelteKit you can reach out for help in the SvelteKit Discord chatroom.


5. Using Pug with Svelte

I love Pug, and the first thing I figured out when I started working with Svelte, was how to use Pug inside Svelte files. Thankfully other devs had already solved the technical challenges for me.

This starter uses the svelte-preprocess package.It is a Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.

Note: Special syntax is required to write Pug inside Svelte templates. Some basics are included below. You can learn more here.**


A. How to write Svelte's Template Syntax using Pug Mixins

Because some of Svelte's template syntax is invalid in Pug svelte-preprocess provides some pug mixins to represent svelte's {#...}{/...} blocks: +if(), +else(), +elseif(), +each(), +key(), +await(), +then(), +catch(), +html(), +const(), +debug().

	+if('posts && posts.length > 1')
		+each('posts as post')
					rel="prefetch") {  post.title  }
			span No posts :c


B. Svelte Element Attributes and Callbacks Using Pug

Pug encodes everything inside an element attribute to html entities, so attr="{foo && bar}" becomes attr="foo && bar". To prevent this from happening, instead of using the = operator use != which won't encode your attribute value:

button(disabled!="{ foo && bar }")

This is also necessary to pass callbacks:

button(on:click!="{ (e) => doTheThing(e) }")

It is not possible to use template literals for attribute values. You can't write attr=`Hello ${value ? 'Foo' : 'Bar'}`, instead write attr="Hello {value ? 'Foo' : 'Bar'}".


C. Spreading props in Svelte using Pug

To spread props into a pug element, wrap the {...object} expression with quotes ".


	{...slide.props}) Send




D. Svelte Element Directives using Pug

Syntax to use Svelte Element directives with Pug

input(bind:value="{ foo }")
input(on:input="{ bar }")


6. Folder Shortcuts

The following shortcuts and corresponding folders come pre-configured in this template:

  • $atoms: './src/lib/components/atoms'
  • $assets: "./src/lib/assets",
  • $components: './src/lib/components'
  • $data: '.src/lib/data'
  • $lib: './src/lib'
  • $molecules: './src/lib/components/molecules'
  • $organisms: './src/lib/components/organisms'
  • $stores: './src/lib/stores'
  • $tools: './src/lib/tools'
  • $types: './src/lib/types'
  • $utils: './src/lib/utils'


7. Editor & Extensions

If you are using VSCode, we recommend these extensions:


A starter template for projects using Sveltekit, Typescript, Tailwind and Pug.








No releases published


No packages published