kixelated · pzanella · Feb 4, 2026
diff --git a/vite-7/.env.example b/vite-7/.env.example
@@ -0,0 +1,2 @@
+VITE_RELAY_URL=http://localhost:4443/anon
+VITE_BROADCAST_PATH=bbb
diff --git a/vite-7/.gitignore b/vite-7/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/vite-7/README.md b/vite-7/README.md
@@ -0,0 +1,59 @@
+# React 19 + TypeScript + Vite 7
+
+Minimal integration example demonstrating `@moq/hang` and `@moq/hang-ui` with React and Vite.
+
+## Features
+
+- Watch mode: Stream consumption from a relay
+- Publish mode: Stream publishing to a relay
+- Simple mode toggle to switch between viewer and publisher
+
+## Prerequisites
+
+- Node.js 20.19.0 or >=22.12.0
+- A running MoQ relay server (default: `http://localhost:4443/anon`)
+
+## Quick Start
+
+```bash
+npm install
+npm dev
+```
+
+The app opens at `http://localhost:5173`
+
+## Environment Variables
+
+Create a `.env.local` file to override defaults:
+
+```env
+VITE_RELAY_URL=http://localhost:4443/anon
+VITE_BROADCAST_PATH=demo
+```
+
+## Build
+
+```bash
+npm build
+```
+
+Output is generated in the `dist/` directory.
+
+## Project Structure
+
+```
+src/
+├── App.tsx              # Main component with mode toggle
+├── components/
+│   ├── HangWatch.tsx    # Stream viewer
+│   └── HangPublish.tsx  # Stream publisher
+├── App.css              # Component styles
+└── index.css            # Global styles
+```
+
+## Resources
+
+- [@moq/hang](https://www.npmjs.com/package/@moq/hang)
+- [@moq/hang-ui](https://www.npmjs.com/package/@moq/hang-ui)
+- [Vite](https://vite.dev)
+- [React](https://react.dev)
diff --git a/vite-7/eslint.config.js b/vite-7/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/vite-7/index.html b/vite-7/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@moq/hang Integration Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_RELAY_URL=http://localhost:4443/anon
		VITE_BROADCAST_PATH=bbb