Cookbook Community Meetup - 12pm ET / 5pm GMT every week on Wednesdays



Contributors: Tom Wilson, Luke Cassady-Dorion
Last Updated:

Svelte/Vite Starter Kit

Svelte is the framework that compiles out of the way, that results is small packages, which is perfect for the permaweb. As developers, we value Dev Experience as much as we value User Experience. This kit uses the vite bundle system to give developers a great DX experience.

Installing vite with svelte and typescript

npm create vite@latest my-perma-app --template svelte-ts
npm create vite@latest my-perma-app -- --template svelte-ts
yarn create vite my-perma-app --template svelte-ts
pnpm create vite my-perma-app --template svelte-ts

Project Info

The vite build system places your index.html file in the root directory, this is where you would include any css or global script dependencies if needed. For more information about the vite project layout check out the vite documentationopen in new window

Setup hash-router

To setup the hash-router we will use tinroopen in new window. tinro is a tiny declarative routing library, that is similar to React Router.

npm install --save-dev tinro
yarn add -D tinro

Telling Svelte to use hash routing

In the src/App.svelte file, you want to configure the router to use the hash routing mode.

<script lang="ts">
	import { Route, router } from "tinro";
	router.subscribe((_) => window.scrollTo(0, 0));

The router.mode.hash function turns on hash router mode. The router.subscribe callback is nice to reset the page to the top on page transfers

Adding some transition components

These component will manage the transition between one page to another page when routing.

create a directory under the src directory called components and add these two files:


	import { router } from "tinro";
	$: current = $router.path === "/" ? "Home" : $router.path.slice(1);

<div aria-live="assertive" aria-atomic="true">{#key current} Navigated to {current} {/key}</div>

	div {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;

This component is for screen readers announcing when a page changes


  import { router } from "tinro";
  import { fade } from "svelte/transition";

{#key $router.path}
  <div in:fade={{ duration: 700 }}>
    <slot />

This component adds a fade to the page transition

Adding Routes to the app

<script lang="ts">
	import Announcer from "./components/announcer.svelte";
	import Transition from "./components/transition.svelte";
<Announcer />
	<Route path="/">
		<Home />
	<Route path="/about">
		<About />

Adding the Announcer and Transition components to our routing system will handle announcing page transitions as well as animating the transition.

Create some pages


<script lang="ts">
	let count = 0;

	function inc() {
		count += 1;
<h1>Hello Permaweb</h1>
<button on:click="{inc}">Inc</button>
<p>Count: {count}</p>
<a href="/about">About</a>


<h1>About Page</h1>
<p>Svelte/Vite About Page</p>
<a href="/">Home</a>

Modify App.svelte

<script lang="ts">
	import Home from './home.svelte'
	import About from './about.svelte'

Deploying to the Permaweb

Generate Wallet

yarn add -D arweave
node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json

install Irys

yarn add -D @irys/sdk

update package.json

  "scripts": {
    "deploy": "yarn build && irys upload-dir dist -h --wallet ./wallet.json -c arweave --index-file index.html --no-confirmation"

Run deploy

yarn deploy


You should now have a Svelte Application on the Permaweb! Great Job!

Fund Wallet

if your application is greater than 120 kb, you will need to fund you Irys wallet. See https://irys.xyzopen in new window for more information.


A completed version of this example is available here: in new window


This is a minimal version of publishing a Svelte application on the permaweb, but you may want more features, like hot-reloading and tailwind, etc. Check out hypar for a turnkey starter kit. HypARopen in new window