JavaScript Test Playground

🎛 Strudel 라이브 코딩 코드로 드럼·베이스를 짜서 브라우저에서 바로 재생 (별도 페이지)

1. Counter

Stimulus controller with state management

2. Tabs

Tab navigation component

Content for Tab 1

3. Modal

Modal dialog with backdrop

4. Dropdown

Dropdown menu with click outside to close

Selected: None

5. Form Validation

Client-side validation with live feedback

6. Fetch API

AJAX requests demonstration

7. Clipboard

Copy to clipboard functionality

8. Toggle

Toggle visibility with animation

This is the hidden content that appears with a smooth animation.

You can toggle it by clicking the button above.

9. Debounce

Debounced search input (300ms delay)

Waiting for input...

10. Animation

CSS transitions and animations

Box

11. Canvas Image + Text Composite

Generate image with text overlay using Canvas API

Background

Or Upload Image

Text

Font Size: 48px

Text Color

Text Position

Text Shadow Text Stroke

Preview

Canvas size: 640 x 360 (16:9)

12. Media Access (Browser Resources)

Access microphone, camera, and screen sharing via MediaDevices API

🎤 Microphone

Inactive

Requests permission to access your microphone and shows audio level visualization.

📹 Camera

Inactive

Requests permission to access your webcam and displays live preview.

🖥️ Screen Share

Inactive

Requests permission to share your screen, window, or tab.

Available Media Devices

Loading devices...

💡 Other Browser Resource Access APIs

Geolocation API: Access user's location (navigator.geolocation)
Battery API: Check battery status (navigator.getBattery())
File System Access API: Read/write local files (showOpenFilePicker)
Clipboard API: Access clipboard (navigator.clipboard)
USB API: Access USB devices (navigator.usb)
Bluetooth API: Connect to Bluetooth devices (navigator.bluetooth)
Web Serial API: Access serial ports (navigator.serial)
WebHID API: Access HID devices (navigator.hid)
Notifications API: Send desktop notifications (Notification)
Storage API: Access local storage quota (navigator.storage)

⚠️ Most APIs require HTTPS and explicit user permission. Some APIs are only available in specific browsers.

13. Cursor Zoom (Cursorful-style)

Cursorful 원리: 클릭 시 자동 줌 + 커서 따라가기 패닝 + 클릭 펄스 효과

Zoom: 2.0x

Speed: 500ms

Follow Cursor Click Pulse

Ready

Cursor: (0, 0)

Click anywhere to zoom in!

📊

Analytics

12,847 views

👥

Users

1,234 new

💰

Revenue

$89,432

Recent Activity Last 24h

User signed up2m ago

File uploaded5m ago

Payment received12m ago

Click any element to zoom in. Move mouse while zoomed to pan. Press ESC to reset.

Core Principles

1. Cursor Tracking

mousemove -> (x, y)

2. Click Zoom

scale(zoom) translate()

3. Smooth Pan

transition: transform ease

4. Click Pulse

@keyframes pulse

14. Capture Screen

Screen Capture API를 사용하여 화면, 윈도우, 탭을 캡처합니다.

Ready

구현 방법

API: navigator.mediaDevices.getDisplayMedia()

Flow: 권한 요청 → MediaStream → ImageCapture.grabFrame() → Canvas

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true })
const track = stream.getVideoTracks()[0]
const imageCapture = new ImageCapture(track)
const bitmap = await imageCapture.grabFrame()
ctx.drawImage(bitmap, 0, 0)
stream.getTracks().forEach(t => t.stop())

⚠️ 사용자 권한 필수, HTTPS 환경 필요

Preview

Screenshot will appear here

15. Capture Element

html-to-image 라이브러리를 사용하여 특정 DOM 요소를 이미지로 캡처합니다.

Sample Capture Area

This element can be captured as an image.

Tag 1 Tag 2 Tag 3

Captured at: 2026-10-01 13:02

Ready

구현 방법

라이브러리: html-to-image (SVG foreignObject 기반)

Flow: DOM → SVG foreignObject → Base64 → Canvas

import * as htmlToImage from 'html-to-image'

const canvas = await htmlToImage.toCanvas(element, {
  pixelRatio: 2,
  backgroundColor: '#ffffff'
})

✅ 권한 불필요, 특정 DOM 요소만 캡처

Preview

Screenshot will appear here

16. 부분캡처 (Select Area) - 에러 발생

마우스로 드래그하여 원하는 영역만 캡처하는 기능입니다.

Ready

❌ 에러 발생

의도한 구현:

오버레이 표시 → 마우스 드래그로 영역 선택
선택 영역 좌표 저장
해당 영역만 캡처

에러 원인:

html-to-image: 전체 페이지 캡처 시 외부 CSS/폰트 CORS 에러
Screen Capture API: 매번 사용자 권한 요청 필요

Preview

Screenshot will appear here

시도한 구현 방법

방법 1: html-to-image로 body 캡처 후 crop

// 실패: 외부 리소스 로드 에러
const dataUrl = await htmlToImage.toPng(document.body)
// Error: Failed to load external resources

방법 2: Screen Capture API + crop

// 동작하지만 매번 권한 필요
const stream = await navigator.mediaDevices.getDisplayMedia()
// NotAllowedError: Permission denied

💡 대안: Puppeteer (서버사이드) 또는 브라우저 확장 프로그램

17. Screen Recorder

MediaRecorder API를 사용하여 화면을 녹화하고 비디오 파일로 저장합니다.

00:00 Ready to record

Sample Record Area

Content in this area can be recorded.

📊

Stats

📁

Files

⚙️

Settings

Supported format: video/webm

Tip: Use "Capture Screen" to record any screen area

Recording Preview

Recording will appear here

APIs Used

MediaRecorder

스트림을 비디오로 인코딩

getDisplayMedia()

화면 캡처 스트림 획득

Blob API

녹화 데이터를 파일로 변환

Bonus: Turbo Frame Test

Test Turbo Frame lazy loading and updates

Original frame content. Click button to update.

Updated: Never

Event Log

> Turbo test initialized

17. WebGL

GPU-accelerated shader rendering in the browser

-- fps

Detecting GPU...

Fragment shader: animated gradient + moving circle + pulsing ring

All computed per-pixel on GPU every frame (not CPU)

18. Popover API

Browser-native popover — no JS for open/close, Esc, aria-expanded, focus restore

Basic Toggle (JS 0 lines)

Auto Popover

Click outside or press Esc to dismiss.

popover="auto" — light dismiss enabled

Invoker Commands (popovertargetaction)

Manual Popover

popover="manual" — only closes via Hide button or Esc.

No light dismiss. Multiple can be open.

Tooltip (role="tooltip")

Hover Intent (still needs JS)

300ms delay before show, stays open when moving to popover. This is what Popover API can't do alone.

Hover Intent Demo

Move your mouse here — it stays open.

JS adds: 300ms show delay, 200ms hide delay, pointer tracking between trigger and popover.

Event Log

Basic/Invoker/Tooltip: pure HTML — zero JavaScript for open/close, Esc, focus restore

Hover Intent: JS required — browser can't distinguish intentional hover from pointer passing through

Inspect buttons in DevTools to see aria-expanded auto-sync

19. Chrome Built-in AI (Prompt API / Translator API)

브라우저에 내장된 로컬 모델(Gemini Nano / Gemma)을 JS로 직접 호출합니다. 서버 요청 없음, API 키 없음.

LanguageModel: 확인 중...

Translator: 확인 중...

Prompt (promptStreaming)

댓글 악플 판정 (responseConstraint)

⚠️ 클라이언트 판정은 JS로 우회할 수 있습니다. 서버비 절감용 1차 필터일 뿐, 보안 검증은 서버에서 해야 합니다.

번역 (Translator API)

→

Event Log

모델 다운로드(create)는 사용자 클릭 안에서만 시작됩니다. 페이지 로드 시에는 availability() 만 확인합니다.

모든 추론은 방문자 PC의 GPU에서 돌고, 입력한 문장은 서버로 전송되지 않습니다.

20. Stereo Channel Control (Web Audio API)

음원 파일에 들어 있는 L/R 을 앱 단에서 바꿔 봅니다. 이어폰은 받은 L/R 을 그대로 틀 뿐이고, 좌우는 이 단계에서 정해집니다. 아래 스펙트럼으로 이어폰 없이도 결과를 확인할 수 있습니다.

① 음원

내 음원 파일 (mp3 / wav / 5.1ch 도 가능)

테스트 신호 — L 에만 440Hz(낮은 삐), 1초 뒤 R 에만 880Hz(높은 삐)

② 앱 단 처리

원본 그대로 Panner (옮기기) 왼쪽 채널만 (고르기) 오른쪽 채널만 (고르기) 좌우 교차 모노 다운믹스

③ 입력 vs 출력 (0〜1500Hz)

비교 포인트: Panner(pan=-1)는 출력 L 에 440Hz 와 880Hz 가 둘 다 나온다. 「왼쪽 채널만」은 440Hz 만 나온다.

OS 설정의 모노 오디오 / 좌우 밸런스가 켜져 있으면 여기 결과를 덮어쓴다 (스펙트럼은 OS 적용 전 값).

5.1 이상 파일은 입력 노드(2ch 고정)에서 스테레오로 다운믹스된다. 채널 수는 음원 정보에 표시.

JavaScript Test Playground

1. Counter

2. Tabs

3. Modal

Modal Title

4. Dropdown

5. Form Validation

6. Fetch API

7. Clipboard

8. Toggle

9. Debounce

10. Animation

11. Canvas Image + Text Composite

12. Media Access (Browser Resources)

🎤 Microphone

📹 Camera

🖥️ Screen Share

Available Media Devices

💡 Other Browser Resource Access APIs

13. Cursor Zoom (Cursorful-style)

Click anywhere to zoom in!

Core Principles

14. Capture Screen

구현 방법

Preview

15. Capture Element

Sample Capture Area

구현 방법

Preview

16. 부분캡처 (Select Area) - 에러 발생

❌ 에러 발생

Preview

시도한 구현 방법

17. Screen Recorder

Sample Record Area

Recording Preview

APIs Used

Bonus: Turbo Frame Test

Event Log

17. WebGL

18. Popover API

Basic Toggle (JS 0 lines)

Invoker Commands (popovertargetaction)

Tooltip (role="tooltip")

Hover Intent (still needs JS)

Event Log

19. Chrome Built-in AI (Prompt API / Translator API)

Prompt (promptStreaming)

댓글 악플 판정 (responseConstraint)

번역 (Translator API)

Event Log

20. Stereo Channel Control (Web Audio API)

① 음원

② 앱 단 처리

③ 입력 vs 출력 (0〜1500Hz)