Add interactive CTL2 GitHub Pages playground

.github/workflows/pages.yml

@@ -0,0 +1,54 @@
+name: Deploy playground
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    name: Build playground
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Check out source
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Set up Node.js
+        uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version: 24
+          cache: npm
+      - name: Use the declared npm version
+        run: npm install --global npm@11.21.1
+      - name: Install exact dependencies
+        run: npm ci
+      - name: Build the static playground
+        run: npm run build:playground
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@45bfe0192ca1faeb007ade9deae92b16b8254a0d # v6.0.0
+      - name: Upload GitHub Pages artifact
+        uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
+        with:
+          path: site-dist
+
+  deploy:
+    name: Deploy playground
+    needs: build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@368f82528645a54fb793d4d04e342629a3f51346 # v5.0.1

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 coverage/
+site-dist/
 *.tgz
 .DS_Store

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes are documented here. This project follows [Semantic Versioni
 
 ## Unreleased
 
+### Added
+
+- Interactive browser playground with live validation, encoding, decoding, byte comparisons, API examples, and GitHub Pages deployment.
+
 ## 0.3.0 - 2026-10-17
 
 ### Changed

README.md

@@ -3,11 +3,14 @@
 [![CI](https://github.com/lcherone/ctl2/actions/workflows/ci.yml/badge.svg)](https://github.com/lcherone/ctl2/actions/workflows/ci.yml)
 [![GitHub release](https://img.shields.io/github/v/release/lcherone/ctl2)](https://github.com/lcherone/ctl2/releases)
 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![Try the playground](https://img.shields.io/badge/try-the_playground-cfff2e.svg)](https://lcherone.github.io/ctl2/)
 
 CTL2 is a small TypeScript codec for deterministic, reversible task handovers. It turns a validated structured task into a compact canonical string and decodes that string without asking a model to infer missing information.
 
 It is intended for systems that need to preview, compare, store, sign, or transmit the exact task that an agent or worker will receive.
 
+Try every format and API in the [interactive CTL2 playground](https://lcherone.github.io/ctl2/). It runs entirely in your browser; task content is never uploaded.
+
 ## When CTL2 is a good fit
 
 Use CTL2 when you need:

eslint.config.js

@@ -1,12 +1,17 @@
 /** Source, test, script, and JSDoc rules for the repository quality gate. */
 import js from '@eslint/js';
 import jsdoc from 'eslint-plugin-jsdoc';
+import reactHooks from 'eslint-plugin-react-hooks';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['coverage/**', 'dist/**', 'node_modules/**'] },
+  { ignores: ['coverage/**', 'dist/**', 'site-dist/**', 'node_modules/**'] },
   js.configs.recommended,
   ...tseslint.configs.recommended,
+  {
+    ...reactHooks.configs.flat['recommended-latest'],
+    files: ['playground/**/*.tsx']
+  },
   {
     ...jsdoc.configs['flat/recommended-typescript-error'],
     files: ['src/**/*.ts'],
@@ -16,7 +21,7 @@ export default tseslint.config(
     }
   },
   {
-    files: ['**/*.ts'],
+    files: ['**/*.ts', '**/*.tsx'],
     rules: {
       '@typescript-eslint/no-non-null-assertion': 'off'
     }