---
slug: "web-standards-playground-showcase"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/hackur/web-standards-playground-showcase@main/README.md"
repo: "https://github.com/hackur/web-standards-playground-showcase"
source_file: "README.md"
branch: "main"
---
# Modern Web Standards Showcase

An interactive demonstration platform showcasing 32 cutting-edge web standards, APIs, and CSS features. Built with React 19, TypeScript, Vite 7, and modern web technologies.

## Features

- 32 Interactive Demos covering the latest web standards
- React 19.2.0 with automatic optimizations
- Vite 7.1.12 for lightning-fast builds
- TypeScript Strict Mode for maximum type safety
- WCAG 2.2 AA accessibility compliance
- PWA-Ready with manifest and meta tags
- Web Vitals Monitoring for performance tracking
- Security Headers (CSP, X-Frame-Options, etc.)
- Testing Infrastructure (Vitest + Playwright)

## Demos Included

### Animations (3)
- CSS Scroll-Driven Animations
- View Transitions API
- CSS Carousel Standards

### Components (1)
- Web Components (Custom Elements, Shadow DOM)

### CSS (6)
- Container Queries
- Cascade Layers
- Grid & Subgrid
- Custom Properties (Variables)
- Shapes
- Anchor Positioning

### Data (1)
- Web Streams API

### Device (1)
- Screen Wake Lock API

### Commerce (1)
- Payment Request API

### Input (1)
- Pointer Events

### Integration (1)
- Web Share API

### Layout (2)
- CSS Grid & Subgrid
- CSS Shapes

### Media (2)
- Media Session API
- Picture-in-Picture

### Performance (4)
- Intersection Observer
- Resize Observer
- WebAssembly (WASM)
- WebGPU

### Storage (3)
- IndexedDB
- File System Access API
- Service Workers

### UI (5)
- Popover API
- Command Dialog
- Enhanced Select Fields
- Anchor Positioning
- Hover Cards

### UX (1)
- CSS Scroll Snap

### Workers (2)
- Service Workers
- Background Workers (Shared & Dedicated)

## Getting Started

### Prerequisites

- Node.js: 20.19+ or 22.12+ (currently tested with v22.11.0)
- npm: 10.0+ or equivalent package manager

### Installation

```bash
# Clone the repository
git clone <YOUR_GIT_URL>

# Navigate to project directory
cd web-standards-playground-showcase

# Install dependencies
npm install

# Start development server
npm run dev
```

The app will be available at `http://localhost:5173` (or another port if 5173 is busy).

## Available Scripts

### Development
```bash
npm run dev          # Start Vite dev server with HMR
```

### Production
```bash
npm run build        # Build for production
npm run preview      # Preview production build
```

### Testing
```bash
npm test             # Run Vitest unit tests
npm run test:ui      # Run Vitest with UI
npm run test:coverage # Generate coverage report

npm run test:e2e       # Run Playwright E2E tests
npm run test:e2e:ui    # Run Playwright with UI
npm run test:e2e:debug # Debug Playwright tests
```

### Code Quality
```bash
npx tsc --noEmit     # TypeScript type checking
```

## Tech Stack

### Core
- React 19.2.0 - UI library with automatic optimizations
- TypeScript 5.6+ - Type-safe JavaScript (strict mode)
- Vite 7.1.12 - Next-generation build tool
- React Router v7.9.4 - Client-side routing

### UI Components
- shadcn/ui - Accessible component library
- Radix UI - Unstyled, accessible primitives
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Icon library

### State & Data
- TanStack Query - Async state management
- Zod 4.1.12 - TypeScript-first schema validation

### Testing
- Vitest 4.0.5 - Fast unit testing
- Playwright 1.56.1 - E2E testing
- Testing Library - React component testing
- Happy DOM - Fast DOM implementation

### Performance
- web-vitals 5.1.0 - Core Web Vitals monitoring
- @vitejs/plugin-react-swc - Fast refresh with SWC

## Bundle Size

Production build (gzipped):
- CSS: 77.60 kB (13.05 kB gzipped)
- Main bundle: 543.72 kB (153.44 kB gzipped)
- Total: ~166 kB gzipped

Chunking strategy:
- react-vendor: React, React DOM, React Router
- ui-vendor: Radix UI components
- query-vendor: TanStack Query

## Accessibility

All demos meet WCAG 2.2 Level AA standards:
- Keyboard navigation support
- Screen reader compatibility
- Minimum 4.5:1 color contrast
- Skip to main content link
- Touch target sizes (24x24px minimum)
- Focus indicators with high contrast mode
- Reduced motion preferences respected

## Security

Security headers configured:
- Content Security Policy (CSP)
- X-Frame-Options: SAMEORIGIN
- X-Content-Type-Options: nosniff
- Referrer-Policy: strict-origin-when-cross-origin
- Permissions-Policy for sensitive APIs

## PWA Support

Progressive Web App capabilities:
- Web app manifest (public/manifest.json)
- Installable on desktop and mobile
- Theme color and app icons
- Offline-ready (with service worker implementation)
- App shortcuts for quick access

## Performance Budgets

- Total Bundle: < 1MB (compressed)
- Individual Route: < 200KB
- LCP: < 2.5s
- INP: < 200ms
- CLS: < 0.1
- Lighthouse Score: > 90

## Browser Support

Most demos support:
- Chrome 113+
- Firefox 126+
- Safari 16.4+
- Edge 113+

Some experimental features (marked in UI):
- CSS Anchor Positioning (Chrome 125+)
- Scroll-Driven Animations (Chrome 115+, Safari 26+)
- File System Access (Chrome 86+, Edge 86+)

## Project Structure

```
.
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── ui/            # shadcn/ui components
│   │   └── DemoLayout.tsx # Standard demo page wrapper
│   ├── pages/             # Demo pages (32 total)
│   ├── lib/               # Utilities and helpers
│   ├── test/              # Unit tests
│   ├── App.tsx            # Main app with routing
│   └── main.tsx           # App entry point
├── e2e/                   # E2E tests (Playwright)
├── public/                # Static assets
├── .claude/               # Claude Code configuration
│   ├── agents/            # Specialized AI agents
│   ├── skills/            # Reusable patterns
│   └── commands/          # Workflow commands
├── IMPROVEMENTS.md        # Phase 1 completion summary
├── PHASE2_COMPLETE.md     # Phase 2 completion summary
└── README.md              # This file
```

## Creating New Demos

Each demo follows a standard structure:

```tsx
<DemoLayout
  title="Feature Name"
  description="Brief description"
  status="Stable|New|Experimental"
  specs={[{ name: "Spec", url: "spec-url" }]}
  browserSupport="Browser support info"
>
  <Card>{/* Interactive Demo */}</Card>
  <Card>{/* Code Examples */}</Card>
  <Card>{/* Use Cases */}</Card>
  <Card>{/* Browser Support */}</Card>
</DemoLayout>
```

## Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/new-demo`)
3. Add your demo following the standard structure
4. Update `App.tsx` with the new route
5. Update `Index.tsx` with demo metadata
6. Ensure tests pass (`npm test`)
7. Ensure TypeScript compiles (`npx tsc --noEmit`)
8. Submit a pull request

## Recent Updates

### Phase 2 (Complete)
- Added Screen Wake Lock API demo
- Added Scroll-Driven Animations demo
- Added File System Access API demo
- Added WebGPU demo
- Upgraded React Router to v7.9.4
- Updated all major dependencies

### Phase 1 (Complete)
- Upgraded to React 19.2.0
- Upgraded to Vite 7.1.12
- Enabled TypeScript strict mode
- Added security headers
- Implemented testing infrastructure
- WCAG 2.2 accessibility compliance
- Web Vitals monitoring
- PWA capabilities

See `IMPROVEMENTS.md` and `PHASE2_COMPLETE.md` for detailed changelogs.

## Known Issues

- Node.js version warning (v22.11.0 vs required v22.12+) - build still works
- React Router v7 installed but using v6 API patterns (works, can be optimized)

## Resources

### Web Standards Documentation
- [Web Standards Reference Guide](https://github.com/hackur/web-standards-playground-showcase/blob/HEAD/WEB_STANDARDS_REFERENCE.md) - Comprehensive guide to all 32 web standards with specifications, browser support, and learning resources

### Development Tools
- [React Documentation](https://react.dev/)
- [Vite Documentation](https://vitejs.dev/)
- [shadcn/ui Components](https://ui.shadcn.com/)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)

### Web Platform
- [MDN Web Docs](https://developer.mozilla.org/)
- [Web.dev](https://web.dev/)
- [Can I Use](https://caniuse.com/)
- [W3C Standards](https://www.w3.org/standards/)
- [WHATWG Living Standards](https://whatwg.org/)

### Accessibility
- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref/)
- [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)
- [WebAIM Resources](https://webaim.org/resources/)

### Browser Status
- [Chrome Platform Status](https://chromestatus.com/)
- [Firefox Platform Status](https://platform-status.mozilla.org/)
- [WebKit Feature Status](https://webkit.org/status/)
- [Microsoft Edge Platform Status](https://developer.microsoft.com/en-us/microsoft-edge/status/)

## Support

For issues or questions:
1. Check the demo documentation
2. Review `IMPROVEMENTS.md` for technical details
3. Open an issue on GitHub