explaingit

openui/open-ui

4,484MDXAudience · developerComplexity · 1/5Setup · easy

TLDR

A W3C community group that researches how web frameworks handle UI controls like dropdowns and date pickers, then submits formal proposals to make these controls work better natively in browsers.

Mindmap

mindmap
  root((Open UI))
    What it does
      Standards research
      Browser proposals
      Pattern cataloguing
    Topics covered
      Dropdowns
      Date pickers
      Form controls
    Process
      Community research
      W3C submissions
      Standards bodies
    Audience
      Web developers
      Standards contributors
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Read research documents to understand how popular frameworks have solved common UI control problems before a standard existed.

USE CASE 2

Follow active proposals to browsers' built-in form controls so you can adopt native features as they ship.

USE CASE 3

Contribute your design system's approach to a UI pattern to help shape what eventually lands in HTML.

Tech stack

MDXHTMLCSS

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Open UI is a community group affiliated with the W3C, the organization that defines how web technologies work. Its focus is improving the built-in controls that browsers provide for building user interfaces: things like buttons, dropdowns, date pickers, sliders, and color pickers. These controls have not seen major updates since HTML5 was introduced over a decade ago. The gap shows in everyday web development. When a designer asks for a custom menu, a modal dialog, or a dropdown that matches a site's visual style, the browser's built-in controls often cannot do it. Developers work around this by writing the control from scratch using JavaScript. The result is usually slower, less accessible to people relying on screen readers or keyboard navigation, and harder to maintain than a browser-native version would be. Open UI researches how popular web frameworks and design systems have approached these same problems, cataloguing which patterns appear consistently across many projects and standardizing the vocabulary used to describe them. Findings from this research are written up as formal proposals, which the group then submits to the relevant standards bodies such as the WHATWG, the W3C CSS Working Group, and TC39. Open UI does not write the final specifications itself. It recommends, and the standards bodies decide. The repository hosts research documents, meeting notes, drafted proposals, and the source files for the open-ui.org website. Contributing to the project requires joining the W3C Open UI Community Group before submitting a pull request. The group's work is public and ongoing, and the site tracks current proposals and the reasoning behind each one.

Copy-paste prompts

Prompt 1
Based on Open UI research, show me how to implement an accessible custom dropdown using the Popover API that browsers now support natively.
Prompt 2
Which browser-native UI controls has Open UI successfully standardized so far, and how do I use them without JavaScript polyfills?
Prompt 3
Using Open UI's research on the select element, help me build a styled dropdown that degrades gracefully in older browsers.
Prompt 4
Show me how to write a contribution to Open UI documenting how my design system handles a multi-select component.
Open on GitHub → Explain another repo

← openui on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.