├── .npmrc ├── static ├── robots.txt └── favicon.svg ├── src ├── lib │ └── images │ │ ├── svelte-welcome.png │ │ ├── svelte-welcome.webp │ │ ├── github.svg │ │ └── svelte-logo.svg ├── routes │ ├── +page.js │ ├── about │ │ ├── +page.js │ │ └── +page.svelte │ ├── +layout.svelte │ ├── +page.svelte │ ├── layout.css │ ├── Counter.svelte │ └── Header.svelte ├── app.d.ts └── app.html ├── vite.config.js ├── .gitignore ├── svelte.config.js ├── jsconfig.json ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | # allow crawling everything by default 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/lib/images/svelte-welcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/kit-template-default/HEAD/src/lib/images/svelte-welcome.png -------------------------------------------------------------------------------- /src/lib/images/svelte-welcome.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/kit-template-default/HEAD/src/lib/images/svelte-welcome.webp -------------------------------------------------------------------------------- /src/routes/+page.js: -------------------------------------------------------------------------------- 1 | // since there's no dynamic data here, we can prerender 2 | // it so that it gets served as a static asset in production 3 | export const prerender = true; 4 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # Output 4 | .output 5 | .vercel 6 | .netlify 7 | .wrangler 8 | /.svelte-kit 9 | /build 10 | 11 | # OS 12 | .DS_Store 13 | Thumbs.db 14 | 15 | # Env 16 | .env 17 | .env.* 18 | !.env.example 19 | !.env.test 20 | 21 | # Vite 22 | vite.config.js.timestamp-* 23 | vite.config.ts.timestamp-* 24 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /src/routes/about/+page.js: -------------------------------------------------------------------------------- 1 | import { dev } from '$app/environment'; 2 | 3 | // we don't need any JS on this page, though we'll load 4 | // it in dev so that we get hot module replacement 5 | export const csr = dev; 6 | 7 | // since there's no dynamic data here, we can prerender 8 | // it so that it gets served as a static asset in production 9 | export const prerender = true; 10 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | kit: { 6 | // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. 7 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter. 8 | // See https://svelte.dev/docs/kit/adapters for more information about adapters. 9 | adapter: adapter() 10 | } 11 | }; 12 | 13 | export default config; 14 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias 15 | // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files 16 | // 17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 18 | // from the referenced tsconfig.json - TypeScript does not merge them in 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kit-template-default", 3 | "private": true, 4 | "version": "0.0.1", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "prepare": "svelte-kit sync || echo ''", 11 | "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", 12 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch" 13 | }, 14 | "devDependencies": { 15 | "@fontsource/fira-mono": "^5.2.7", 16 | "@neoconfetti/svelte": "^2.2.2", 17 | "@sveltejs/adapter-auto": "^7.0.0", 18 | "@sveltejs/kit": "^2.48.5", 19 | "@sveltejs/vite-plugin-svelte": "^6.2.1", 20 | "svelte": "^5.43.8", 21 | "svelte-check": "^4.3.4", 22 | "typescript": "^5.9.3", 23 | "vite": "^7.2.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/routes/about/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | About 7 | 8 | 9 | 10 |
11 |

About this app

12 | 13 |

14 | This is a SvelteKit app. You can make your own by typing 15 | the following into your command line and following the prompts: 16 |

17 | 18 | 
npx sv create
19 | 20 |

21 | The page you're looking at is purely static HTML, with no client-side interactivity needed. 22 | Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening 23 | the devtools network panel and reloading. 24 |

25 |
26 | -------------------------------------------------------------------------------- /src/lib/images/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sv 2 | 3 | Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```sh 10 | # create a new project in the current directory 11 | npx sv create 12 | 13 | # create a new project in my-app 14 | npx sv create my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```sh 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```sh 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 |
11 | 12 |
13 | {@render children()} 14 |
15 | 16 | 21 |
22 | 23 | 59 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | Home 9 | 10 | 11 | 12 |
13 |

14 | 15 | 16 | 17 | Welcome 18 | 19 | 20 | 21 | to your new
SvelteKit app 22 |

23 | 24 |

25 | try editing src/routes/+page.svelte 26 |

27 | 28 | 29 |
30 | 31 | 60 | -------------------------------------------------------------------------------- /static/favicon.svg: -------------------------------------------------------------------------------- 1 | svelte-logo -------------------------------------------------------------------------------- /src/lib/images/svelte-logo.svg: -------------------------------------------------------------------------------- 1 | svelte-logo -------------------------------------------------------------------------------- /src/routes/layout.css: -------------------------------------------------------------------------------- 1 | @import '@fontsource/fira-mono'; 2 | 3 | :root { 4 | --font-body: 5 | Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 6 | 'Open Sans', 'Helvetica Neue', sans-serif; 7 | --font-mono: 'Fira Mono', monospace; 8 | --color-bg-0: rgb(202, 216, 228); 9 | --color-bg-1: hsl(209, 36%, 86%); 10 | --color-bg-2: hsl(224, 44%, 95%); 11 | --color-theme-1: #ff3e00; 12 | --color-theme-2: #4075a6; 13 | --color-text: rgba(0, 0, 0, 0.7); 14 | --column-width: 42rem; 15 | --column-margin-top: 4rem; 16 | font-family: var(--font-body); 17 | color: var(--color-text); 18 | } 19 | 20 | body { 21 | min-height: 100vh; 22 | margin: 0; 23 | background-attachment: fixed; 24 | background-color: var(--color-bg-1); 25 | background-size: 100vw 100vh; 26 | background-image: 27 | radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%), 28 | linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); 29 | } 30 | 31 | h1, 32 | h2, 33 | p { 34 | font-weight: 400; 35 | } 36 | 37 | p { 38 | line-height: 1.5; 39 | } 40 | 41 | a { 42 | color: var(--color-theme-1); 43 | text-decoration: none; 44 | } 45 | 46 | a:hover { 47 | text-decoration: underline; 48 | } 49 | 50 | h1 { 51 | font-size: 2rem; 52 | text-align: center; 53 | } 54 | 55 | h2 { 56 | font-size: 1rem; 57 | } 58 | 59 | pre { 60 | font-size: 16px; 61 | font-family: var(--font-mono); 62 | background-color: rgba(255, 255, 255, 0.45); 63 | border-radius: 3px; 64 | box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); 65 | padding: 0.5em; 66 | overflow-x: auto; 67 | color: var(--color-text); 68 | } 69 | 70 | .text-column { 71 | display: flex; 72 | max-width: 48rem; 73 | flex: 0.6; 74 | flex-direction: column; 75 | justify-content: center; 76 | margin: 0 auto; 77 | } 78 | 79 | input, 80 | button { 81 | font-size: inherit; 82 | font-family: inherit; 83 | } 84 | 85 | button:focus:not(:focus-visible) { 86 | outline: none; 87 | } 88 | 89 | @media (min-width: 720px) { 90 | h1 { 91 | font-size: 2.4rem; 92 | } 93 | } 94 | 95 | .visually-hidden { 96 | border: 0; 97 | clip: rect(0 0 0 0); 98 | height: auto; 99 | margin: 0; 100 | overflow: hidden; 101 | padding: 0; 102 | position: absolute; 103 | width: 1px; 104 | white-space: nowrap; 105 | } 106 | -------------------------------------------------------------------------------- /src/routes/Counter.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 | 23 | 24 |
25 |
26 | 27 | {Math.floor(count.current)} 28 |
29 |
30 | 31 | 36 |
37 | 38 | 104 | -------------------------------------------------------------------------------- /src/routes/Header.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 | 11 | SvelteKit 12 | 13 |
14 | 15 | 31 | 32 |
33 | 34 | GitHub 35 | 36 |
37 |
38 | 39 | 128 | --------------------------------------------------------------------------------