How to Create a Page in SvelteKit: Simple Guide

In SvelteKit, create a page by adding a +page.svelte file inside the src/routes folder. The file name becomes the page URL automatically, and you write your page content using Svelte syntax inside that file.

Syntax

To create a page in SvelteKit, add a +page.svelte file inside the src/routes folder. The file name defines the URL path. For example, src/routes/about/+page.svelte creates the /about page.

Inside the file, use standard Svelte syntax with HTML, JavaScript, and CSS to build your page.

svelte

<!-- src/routes/about/+page.svelte -->
<script>
  // JavaScript code here
</script>

<style>
  /* CSS styles here */
</style>

<h1>About Page</h1>
<p>Welcome to the about page!</p>

Example

This example creates a simple home page at the root URL /. The file src/routes/+page.svelte defines the page content using Svelte syntax.

svelte

<!-- src/routes/+page.svelte -->
<script>
  let name = 'Friend';
</script>

<h1>Hello, {name}!</h1>
<p>This is your SvelteKit home page.</p>

<style>
  h1 {
    color: #2c3e50;
  }
  p {
    font-size: 1.2rem;
  }
</style>

Output

<h1>Hello, Friend!</h1><p>This is your SvelteKit home page.</p>

Common Pitfalls

• Wrong file location: Placing page files outside src/routes means they won't become pages.
• Missing +page.svelte naming: In recent SvelteKit versions, the main page file must be named +page.svelte to be recognized.
• Forgetting to restart dev server: Sometimes changes in routes need a server restart to reflect.

svelte

<!-- Wrong: src/routes/home.svelte (legacy) -->
<h1>Home</h1>

<!-- Right: src/routes/+page.svelte -->
<h1>Home</h1>

Quick Reference

Summary tips for creating pages in SvelteKit:

• Put page files inside src/routes.
• Name main page files +page.svelte.
• Use Svelte syntax inside these files.
• File name or folder structure defines URL path.
• Restart dev server if new pages don't appear.

Key Takeaways

Create pages by adding +page.svelte files inside src/routes folder.

File names and folder structure map directly to URL paths in SvelteKit.

Use standard Svelte syntax inside page files to build content.

Remember to restart the development server if new pages don't show up.

Avoid placing page files outside src/routes or using legacy file names.