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
A looping video	`video`	Create a Video Wallpaper
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

mkdir my-wallpaper && cd my-wallpaper

pnpm init

Install Dependencies

pnpm add react react-dom @fluxlay/react

pnpm add -D @fluxlay/cli @fluxlay/vite @vitejs/plugin-react vite typescript

Create the Manifest

Create fluxlay.yaml:

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:

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:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Create src/main.tsx:

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
 
function Wallpaper() {
  return (
    <main style={{ height: "100vh", width: "100vw", backgroundColor: "#1a1a2e" }}>{/* Your wallpaper content */}</main>
  );
}
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Wallpaper />
  </StrictMode>
);

Add Scripts

Add to package.json:

package.json

{
  "scripts": {
    "dev": "fluxlay dev",
    "build": "fluxlay build",
    "publish": "fluxlay publish"
  }
}

Project Structure

fluxlay.yaml
index.html
package.json
vite.config.ts
main.tsx