Installation

Prerequisites

Node.js and npm: You need Node.js version 16 or higher.
- Windows/macOS: Download from nodejs.org
- Linux: Use your package manager or nvm
Code Editor: We recommend Visual Studio Code with these extensions:
- Svelte for VS Code
- TypeScript and JavaScript Language Features
- Tailwind CSS IntelliSense
Git: Required for version control and template installation

Installation Methods

Method 1: Using create-p5-svelte-app (Recommended)

This is the easiest way to get started. Open your terminal and run:

npx create-p5-svelte-app my-sketch-app

This will:

Create a new directory called 'my-sketch-app'
Install all required dependencies
Set up the project structure
Initialize a Git repository

Method 2: Manual Installation

If you prefer more control over the installation process:

Clone the repository:

git clone https://github.com/yourusername/p5-svelte-template.git my-sketch-app

Navigate to the project directory:
```
cd my-sketch-app
```
Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

Project Structure

p5-svelte-template/
├── src/
│   ├── lib/
│   │   ├── components/    # Reusable components
│   │   ├── core/          # P5 integration core
│   │   ├── stores/        # State management
│   │   └── utils/         # Utility functions
│   ├── routes/            # Pages and examples
│   └── app.html           # App template
├── static/                # Static assets
├── tests/                 # Test files
├── package.json          # Dependencies and scripts
├── svelte.config.js      # Svelte configuration
├── tailwind.config.js    # Tailwind CSS config
├── tsconfig.json         # TypeScript config
└── vite.config.js        # Vite config

Configuration

Environment Variables

Create a .env file in the root directory:

PUBLIC_APP_NAME=My P5 App
PUBLIC_APP_DESCRIPTION=My creative coding project

TypeScript Configuration

The template includes a pre-configured tsconfig.json. You can customize it based on your needs:


    {
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    // Add your custom TypeScript options here
  }
}

Next Steps

Check out the Quick Start Guide
Create your First Sketch
Explore the Example Gallery

Troubleshooting

Common Issues

npm install fails

Try:

Clear npm cache: npm cache clean --force
Delete node_modules: rm -rf node_modules
Delete package-lock.json
Run npm install again

TypeScript errors

Ensure you have the correct TypeScript version:

npm install typescript@latest

Support

If you need help:

Check the Examples
Join our Discord community
Open an issue on GitHub
Email support: support@p5svelte.dev