# Create a Project
## Choose a kind
Every Fluxlay wallpaper declares a `kind` in its manifest. Setup differs depending on what you want to build, so pick one first:
| Goal | kind | Setup guide |
| ---------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
| A single static image (animated GIF included) | `image` | [Create an Image Wallpaper](/en/studio/developer/how-to/setup/create-image-wallpaper.md) |
| A looping video | `video` | [Create a Video Wallpaper](/en/studio/developer/how-to/setup/create-video-wallpaper.md) |
| React to mouse, audio, or system info | `web` | This guide (below) |
| Let users tweak settings via custom properties | `web` | This guide (below) |
The rest of this guide covers building a **web wallpaper** (`kind: web`) with React and Vite.
## Initialize
```bash
mkdir my-wallpaper && cd my-wallpaper
```
## Install Dependencies
## Create the Manifest
Create `fluxlay.yaml`:
```yaml title="fluxlay.yaml"
schemaVersion: 1
name: My Wallpaper
slug: my-wallpaper
version: 0.1.0
kind: web
description: A brief description of your wallpaper.
```
The `slug` must be unique across the Fluxlay store and can only contain lowercase letters, numbers, and hyphens.
## Create Vite Config
Create `vite.config.ts`:
```ts title="vite.config.ts"
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { fluxlay } from "@fluxlay/vite";
export default defineConfig({
plugins: [react(), fluxlay()]
});
```
The `fluxlay()` plugin configures build settings automatically (output directory, minification, console stripping).
## Create Entry Files
Create `index.html`:
```html title="index.html"
```
Create `src/main.tsx`:
```tsx title="src/main.tsx"
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
function Wallpaper() {
return (
{/* Your wallpaper content */}
);
}
createRoot(document.getElementById("root")!).render(
);
```
## Add Scripts
Add to `package.json`:
```json title="package.json"
{
"scripts": {
"dev": "fluxlay dev",
"build": "fluxlay build",
"publish": "fluxlay publish"
}
}
```
## Project Structure