Modern HTML playgrounds

Explore datalist as a collection of suggested values for an input. Change the control type, configure attributes, and compare native menus, range ticks, and pickers without restricting the value to the available options.

Explore details with controls to edit each summary and content, add new blocks, and test the name attribute for JavaScript-free exclusive accordions.

Explore dialog with a minimal preview made only from the opening button and the modal. Change command, commandfor, and closedby without generating CSS.

Explore <geolocation> as a declarative browser-managed location control, adjust its attributes, and copy the HTML with fallback content. This declarative option is useful because the browser owns a contextual, trusted permission UI, reduces imperative JavaScript, and better reflects explicit user intent.

Explore <usermedia> as a trusted, browser-managed control for requesting camera and microphone access. Configure setConstraints(), connect the MediaStream to a preview, and compare the native element with progressive enhancement based on getUserMedia().

Explore <install> as a declarative browser-rendered installation button, with one option for the current app and another for an external app such as MDN. This declarative option is useful because the browser renders a trusted install button, avoids the beforeinstallprompt ceremony, and keeps the user intent signal clear.

Combine the three HTML list types, create nested levels, and generate semantic markup with ul, ol, li, dl, dt, and dd.

Build tabular data with table, caption, th, scope, thead, tbody, tfoot, colgroup, colspan, and rowspan while previewing and copying the result.

Explore meter with controls for the current value, total range, and low, high, and optimum thresholds of a known scalar measurement.

Explore progress with controls for the current value, the task maximum, and the indeterminate state created by omitting the value attribute.

Explore select with controls to edit its label, reorder options, create optgroups, add hr separators, and test multiple and size without JavaScript.

Create non-modal top-layer content with the popover attribute. Compare declarative controls and JavaScript, test light dismiss, and copy reusable HTML, CSS, and JS.