# Getting Started
In this tutorial, you'll create your first live wallpaper with Fluxlay and preview it on your desktop.
> ⚡ **Want to skip the boilerplate?** Use the official [Claude Code plugin](/en/studio/developer/tutorials/with-claude-code.md) — describe what you want and Claude scaffolds, implements, and ships it from a single prompt.
## Prerequisites
- [Node.js](https://nodejs.org/) v18 or later
- A package manager of your choice (npm / pnpm / yarn / bun)
- [Fluxlay desktop app](/download) installed
## Create a Project
Create a new directory and initialize the project:
```bash
mkdir my-wallpaper && cd my-wallpaper
```
Install the required dependencies:
## Configure the Manifest
Create a `fluxlay.yaml` in the project root:
```yaml title="fluxlay.yaml"
schemaVersion: 1
name: My First Wallpaper
slug: my-first-wallpaper
version: 0.1.0
kind: web
description: My first Fluxlay wallpaper.
```
## Configure Vite
Create a `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()]
});
```
## Create the Entry Point
Create `index.html`:
```html title="index.html"
```
Create `src/main.tsx`:
```tsx title="src/main.tsx"
import { StrictMode, useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
function Wallpaper() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => setCount(c => c + 1), 1000);
return () => clearInterval(id);
}, []);
return (
Hello, Fluxlay! ({count}s)
);
}
createRoot(document.getElementById("root")!).render(
);
```
## Preview on Your Desktop
Start the development server:
The Fluxlay desktop app will detect the dev server and display your wallpaper with hot reload. Every time you save a file, the wallpaper updates instantly.
## Next Steps
Pick whichever topic interests you next. The two tutorials below are independent — take them in either order, or skip one entirely.
- [Interactive Wallpaper](/en/studio/developer/tutorials/interactive-wallpaper.md) — Use SDK hooks to make your wallpaper respond to mouse movement.
- [Shell Wallpaper](/en/studio/developer/tutorials/shell-wallpaper.md) — Display live system information with shell commands.
> 💡 **Tip**: Planning to pull data from an external API? See [Fetch External APIs (CORS workaround)](/en/studio/developer/how-to/development/fetch-external-api.md) — it covers `network:` declarations and when to use `proxiedFetch` for endpoints that don't return CORS headers.
Want a head start? Browse the [official example wallpapers on GitHub](https://github.com/fluxlay/examples) — each one is a full project you can clone, run, and remix.
When you're ready to ship, head to [Publish Your Wallpaper](/en/studio/developer/tutorials/publish-wallpaper.md).