✎
Canvas drawing
Draw with a mouse, finger, or stylus using the Canvas 2D API and Pointer Events.
<canvas> · Pointer Events · toDataURL()
The modern web, in one file
Build more.
With the browser.
A hands-on gallery of native HTML5 elements and browser APIs. Draw, drag, speak, save, pick, and explore — no frameworks, libraries, or build tools required.
Interactive experiments
Everything below runs right inside this page.
▣
Native dialog
A built-in modal with a real browser-managed backdrop and keyboard dismissal.
dialog.showModal()
// press Esc to close
<dialog> · ::backdrop
◈
Color & date inputs
Try browser-native input types with instant CSS updates.
Choose a date to begin.
type="color" · type="date"
≋
Local storage
Persist a note between reloads without any backend server.
Waiting for input…
localStorage API
⇧
Drag & drop files
Drop a local file to inspect its metadata. It never gets uploaded.
Drop a file here
or click to browse
or click to browse
No file selected.
File API · Drag and Drop
◉
Web notifications
Ask the browser for permission to show a system notification.
Permission: checking…
Notifications require permission and a secure context; file:// support varies.
◷
Semantic progress
Built-in progress and meter elements represent measurements accessibly.
<progress> · <meter>
⌁
Speech synthesis
Have the browser read a phrase aloud using available system voices.
Ready to speak.
Web Speech API · SpeechSynthesis
◧
Expandable details
Accessible collapsible sections, with no JavaScript necessary.
What's special about HTML5?
Semantic elements and native browser APIs let you build rich applications with less custom code.
Does this page work offline?
Yes. Save this HTML file locally and open it in your browser. A few permission-based APIs depend on browser security rules.
<details> · <summary>
✦
Content editable
Edit this content directly, without a textarea or input control.
Write right here.
Select text, delete it, or type your own message.
0 characters
contenteditable · Clipboard API
◎
Geolocation
Request your current location, only if you choose to grant access.
No location requested.
Geolocation API · requires browser permission and a secure context
⌗
Native form validation
Browsers handle required fields and email validation natively.
Form has not been submitted.
Constraint Validation API · required · type="email"
A little more under the hood
Browser-native functionality beyond the visible widgets.
◐
Responsive layout
CSS Grid, custom properties, gradients, and media queries adapt across screens.
CSS Grid @media
♿
Accessible HTML
Semantic landmarks, labels, focusable controls, and reduced-motion support.
ARIA Semantic HTML
⏣
Single-file architecture
All CSS and JavaScript are embedded. Nothing is fetched from third-party servers.
Offline No dependencies