Planter Basic is a web project starter that uses Vite and comes with starter styles built out with Sass. Basic is great for beginner web developers who are looking to take a step towards modern web development without jumping into a complex framework or library.



With planter-cli:

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

Or clone from GitHub.

Run Scripts


Run npm run dev or npm start to start the development server.

In package.json, the following scripts are set up for use:

"scripts": {
  "start": "npm run dev",
  "dev": "vite",
  "build": "vite build",
  "lint:js": "eslint --ext .js --fix "src/"",
  "lint:css": "npx stylelint --fix "src/""


  • dev – Runs the development vite task, which starts watching your files and starts the dev server.
  • build – Runs the build vite task, which builds your site for production.
  • start – An alias for the dev script.
  • lint:js – Run ESLint on your JS files.
  • lint:css – Run Stylelint on your SCSS/CSS files.

Project Structure




Any .html file at the root of /src will be treated as a page. Pages can use the internal placeholders: %TITLE%, %CSS%, and %JS%. When running dev and build, %CSS% will be replaced with <link href="./<name>.css" rel="stylesheet">, and %JS% will be replaced with <script src="<name>.js"></script>.

<html lang="en">
    <div>Some content</div>



The home for all your project code that will be watched and transformed by the dev and build scripts.



Static assets, such as images or external scripts. These files won’t be procesed by the dev or build scripts.



This directory will be generated when you run npm run build and will include all HTML, JS, CSS, and other static assets, ready for production.



The tasks and project structure of Planter Basic can be configured with planter.config.js. Check out the Config docs for more details.

MIT Licensed | © 2024 Matthew & Matt at Ditto Labs