lab-starter — Vite Starter Template

SHA-256: 10eaaf85c354df7bde544b889ba358f957fbabfb8ba4506d4dd5343e806d8c7c

2026-10-17T01:36:16.958Z

# Lab Starter

A modern template for creative coding experiments and interactive demos. Built with React, TypeScript, Vite, and Tailwind CSS, featuring [Tweakpane](https://tweakpane.github.io/docs/) for live parameter controls.

## Features

- **React 19** - Modern hooks and concurrent features
- **TypeScript** - Full type safety
- **Vite** - Fast development and optimized builds
- **Tailwind CSS v4** - Utility-first styling
- **Tweakpane** - Interactive parameter controls
- **ESLint** - Code linting and formatting
- **Modular architecture** - Clear separation between starter code and demo

## Getting Started

### Prerequisites

- Node.js 18+
- pnpm (recommended), npm, or yarn

### Installation

```bash
# Clone or use this template
git clone <your-repo-url>
cd lab-starter

# Install dependencies
pnpm install

# Start development server
pnpm dev
```

The app will be running at `http://localhost:5173`

### Build for Production

```bash
pnpm build
```

### Preview Production Build

```bash
pnpm preview
```

## Template Structure

This template includes two main parts:

### Starter Kit

Reusable components and utilities:

- `src/components/` - Reusable React components
  - `Background.tsx` - Dot grid background with theme support
  - `TweakpanePanel.tsx` - Generic wrapper for Tweakpane controls
- `src/lib/` - Utility functions
  - `cn()` - Tailwind class merging with conflict resolution
  - `withViewTransition()` - View Transitions API wrapper
- Configuration files - Prettier, ESLint, EditorConfig

### Demo Application

A reference implementation demonstrating the starter capabilities:

- `src/demo/` - Complete demo application
  - `DemoApp.tsx` - Main demo component
  - `useDemoControls.ts` - Tweakpane configuration
  - `constants.ts` - Demo constants
  - `utils.ts` - Demo utilities

## Starting a New Project

### Remove Demo (Recommended)

1. Delete the demo folder:

   ```bash
   rm -rf src/demo
   ```

2. Update `src/App.tsx`:

   ```tsx
   export const App = () => {
     return <div>{/* Your application */}</div>;
   };
   ```

### Keep Demo as Reference

Alternatively, keep the demo folder during initial development and remove it later.

## Use Cases

- Creative coding experiments
- Interactive demos and prototypes
- Data visualizations
- Animation showcases
- Educational projects

## Component Usage

### TweakpanePanel Component

Use the reusable `TweakpanePanel` component to add controls:

```tsx
import { TweakpanePanel } from "@/components/TweakpanePanel";
import { useState } from "react";

export const MyLab = () => {
  const [value, setValue] = useState(100);

  const setupControls = (pane) => {
    const params = { myValue: value };

    pane
      .addBinding(params, "myValue", { min: 0, max: 200 })
      .on("change", (ev) => setValue(ev.value));
  };

  return (
    <>
      <TweakpanePanel title="My Controls" onInit={setupControls} />
      <div>Value: {value}</div>
    </>
  );
};
```

### Background Component

```tsx
import { Background } from "@/components/Background";

<Background theme="dark">
  <YourContent />
</Background>;
```

### Utility Functions

```tsx
import { cn, withViewTransition } from "@/lib/utils";

// Merge Tailwind classes
const className = cn("px-4 py-2", isDark && "bg-gray-900", "px-6");

// Smooth transitions
withViewTransition(() => {
  setState(newValue);
});
```

## Tech Stack Details

- **React 19.2** - UI library
- **TypeScript 5.9** - Type system
- **Vite 7.3** - Build tool
- **Tailwind CSS 4.1** - Styling
- **Tweakpane 4.0** - Control panel
- **ESLint 9** - Linting

## Browser Support

- All modern browsers (Chrome, Firefox, Safari, Edge)
- Best experience on latest versions

## Project Structure

```
lab-starter/
├── src/
│   ├── components/          # Reusable components (STARTER)
│   │   ├── Background.tsx
│   │   └── TweakpanePanel.tsx
│   ├── lib/                 # Utility functions (STARTER)
│   │   └── utils.ts
│   ├── demo/                # Demo application (removable)
│   │   ├── DemoApp.tsx
│   │   ├── useDemoControls.ts
│   │   ├── constants.ts
│   │   └── utils.ts
│   ├── App.tsx              # Main entry point
│   ├── main.tsx             # React entry point
│   ├── global.css           # Global styles
│   └── vite-env.d.ts        # TypeScript declarations
├── .github/                 # GitHub templates
│   ├── ISSUE_TEMPLATE/
│   └── PULL_REQUEST_TEMPLATE.md
├── public/                  # Static assets
├── .editorconfig            # Editor configuration
├── .nvmrc                   # Node.js version
├── .prettierrc.json         # Prettier configuration
├── CHANGELOG.md             # Version history
├── CONTRIBUTING.md          # Contribution guidelines
├── eslint.config.js         # ESLint configuration
├── index.html               # HTML entry point
├── package.json             # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
└── README.md                # Documentation
```

## Contributing

Contributions are welcome. Please read [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.

## License

See [LICENSE](LICENSE) file for details.

## Resources

- [Tweakpane Documentation](https://tweakpane.github.io/docs/)
- [Tailwind CSS v4 Documentation](https://tailwindcss.com/docs)
- [Vite Documentation](https://vite.dev/)
- [React Documentation](https://react.dev/)