7GUIs in Vanilla HTML, CSS, JavaScript

In plain words

7GUIs in Vanilla HTML, CSS, JavaScript is a collection of seven graphical user interface challenges implemented using only standard web technologies, without frameworks or libraries. It is designed for developers learning front-end programming who want to understand core HTML, CSS, and JavaScript fundamentals. The project demonstrates how to build interactive UI components from scratch, making it useful for those seeking to deepen their understanding of web development basics.

written from the facts on this page · September 2026

From the sources

7GUIs (7 Graphical User Interfaces) is a programming benchmark to compare implementations in terms of their notation. 7GUIs defines 7 tasks that represent typical challenges in GUI programming. This site implements the 7 tasks using vanilla HTML , CSS & JavaScript . Click a link below to see a description of a task, the rendered GUI & links to itsfrom 7guis.bradwoods.io

• 
  Svelte NodeGUI, a lightweight Electron alternative with native UI2021 · github.com · ▲624

  Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀 - nodegui/svelte-nodegui

• 
  Windows 7 GUI for the web2025 · khang-nd.github.io · ▲174

  A design system for building faithful recreations of the Windows 7 UI.

• RJ
  Rune.js – Graphic design systems with SVG in the browser or Node.js2015 · runemadsen.github.io · ▲92

  A JavaScript library for programming graphic design systems with SVG

• 
  CodePen2014 · codepen.io · ▲109

  HTML, CSS, and JavaScript editor in the browser.

• 
  HTML7 - Modern HTML2012 · github.com · ▲24
• 
  Monkberry – a JavaScript library for building web user interfaces2016 · monkberry.js.org · ▲115

  Monkberry is blazingly fast, small 1kb and simple JavaScript library for building web user interfaces.

• 
  Lofi Cities – Pixel-art city nights with browser-generated lofi▲319

  Endless lofi beats composed live in your browser, over pixel-art nights in Paris, Tokyo, New York, Hong Kong, Sydney, San Francisco and more. Free, no sign-up.

  Work · 24d ago · loficities.com

• 
  Smooth Recorder▲257

  Mac screen recordings that look edited when you hit stop

  Work · 18d ago · smoothrecorder.com

• 
  Figma Specs▲222

  A container for your context that lives on the Figma canvas

  Work · 3d ago · figma.com

• 
  The rarest tech books and docs you've probably never read▲190

  Work · 12d ago · readrare.com

• 
  40k HN comments mentioning books, extracted using deep learning▲1,359

  Thinking, Fast and Slow - with 523 comments from the Hacker News community

  Life & fun · 2021 · hacker-recommended-books.vercel.app

• 
  Tango▲1,167

  Automatically create how-to guides with screenshots

  Work · 2021

• WB
  Web browser to help programmers think clearly▲1,070

  Life & fun · 2021 · bonsaibrowser.com

• 
  Doodle Ipsum▲894

  The lorem ipsum of illustrations

  Dev tools · 2021 · doodleipsum.com

• 
  LetterHunt▲773

  10,000+ active, curated newsletters to promote your product

  Growth · 2021 · letterhunt.co

• 
  Noto▲737

  Create a Notion-style avatar with 120+ mix-and-match items

  Work · 2021 · abstractlab.gumroad.com