Getting Started

Planter Svelte is a web project starter that uses SvelteKit and comes with starter styles built out with Sass as well as a few simple components to serve as both examples and for use in your project.

---

With planter-cli:

> npx @planter/cli create ditto-codes/planter-svelte my-project

Or clone from GitHub.

Get started by running these two commands to install dependencies and startup the local dev server:

npm install
npm run dev

Make sure to set up your editor for Svelte language support. We recommend the Svelte for VS Code extension, but there’s also support for other editors (Submlime, Vim, WebStorm).

---

There are two basic concepts of SvelteKit:

• Each page of your app is a Svelte component
• You create pages by adding files to the src/routes directory of your project.

The home for all your project code.

Static assets, such as images or external scripts.

Create pages by adding files to the src/routes directory of your project. Read more about routing in SvelteKit. Note: at the root of src/routes, there’s a file named +layout.svelte; Planter Svelte uses this file to apply global styles to all pages. Read more about layouts in SvelteKit.

A place to house your components. This directory includes a few simple components to get you started.

Global stylesheets, Sass variables, mixins, and functions.

The src/routes/demo page showcases how SvelteKit can work, while also documenting the components and default styles we’ve included. All demo content is contained within src/routes/demo and src/components/demo and can be freely deleted.