Graphical User Interface Programming, by Brad Meyers, CMU (circa 2003 but still an interesting overview--not sure much has changed in two decades on this subject)
Project LightSpeed: "... using the native OS wherever possible, reusing the UI with dynamic templates powered by SQLite, using SQLite as a universal system, and building a server broker to operate as a universal gateway between Messenger and its server features." In many respects, sounds like part of what they did was adopt a partial Naked Objects-like approach to their UI, storing the UI description in data and building that UI at runtime.
"Build a Dev Portfolio as a 2D Game" - Video and Source. Cute idea.
"The Balance has Shifted Away from SPAs"
"A Whole Website in a Single JavaScript File"
Repositories for graphics:
Articles
-
"Programmatic and Direct Manipulation, Together at Last": "Direct manipulation interfaces and programmatic systems have distinct and complementary strengths. The former provide intuitive, immediate visual feedback and enable rapid prototyping, whereas the latter enable complex, reusable abstractions. Unfortunately, existing systems typically force users into just one of these two interaction modes. We present a system called SKETCH-N-SKETCH that integrates programmatic and direct manipulation for the particular domain of Scalable Vector Graphics (SVG). In SKETCH-N-SKETCH, the user writes a program to generate an output SVG canvas. Then the user may directly manipulate the canvas while the system immediately infers a program update in order to match the changes to the output, a workflow we call live synchronization. To achieve this, we propose (i) a technique called trace-based program synthesis that takes program execution history into account in order to constrain the search space and (ii) heuristics for dealing with ambiguities. Based on our experience with examples spanning 2,000 lines of code and from the results of a preliminary user study, we believe that SKETCH-N-SKETCH provides a novel workflow that can augment traditional programming systems. Our approach may serve as the basis for live synchronization in other application domains, as well as a starting point for yet more ambitious ways of combining programmatic and direct manipulation."
-
"The Market for Lemons": "Not only are new services being built to a self-defeatingly low UX and performance standard, existing experiences are pervasively re-developed on unspeakably slow, JS-taxed stacks. At a business level, this is a disaster, raising the question: "why are new teams buying into stacks that have failed so often before?" In other words, "why is this market so inefficient?"" A rather scathing takedown of the evolution of the web interface. Can't say I disagree too much.
-
"Beyond Page Objects: Testing Web Applications with State Objects"
User Interface
Guidebook Gallery: Graphical user interface gallery (up until 2006, right before the mobile/smartphone revolution!)
ECMA Report on User Interface Taxonomy (June 1992): Interesting high-level overview of different ideas around user interface and a taxonomy of that space:
- UI structure
- Metaphor
- Desktop: represents objects and actions traditionally associated with a desk and the surrounding office environment.
- Workbench: represents an environment which contains the tools and other work items organised to do work in a particular task area.
- Control panel: represents a physical panel containing an array of instruments for controlling a machine. Typical objects include dials and gauges (both analogue and digital), sliders, buttons and knobs.
- Dialogue technique
- Menus: A set of options presented by the dialogue system to the user.
- Language:
- Natural language
- Command language: A specified set of user inputs which, when processed by the dialogue system, result in associate actions. Users enter (rather than select) complete or abbreviated command(s) and the dialogue system performs the activities specified by the command(s). Command languages include both natural-like languages and specialised languages.
- Q&A: A dialogue technique by which the user responds to questions asked by the dialogue system (e.g. system-initiated dialogue). Questions are typically asked one at a time and may vary depending on the previous answer. In most applications of this dialogue technique, answers can be qualitative (yes/no) or quantitative (a number). (Hello, chatbots!)
- Direct manipulation
- Object based: A form of dialogue in which the user directly acts upon the objects to be manipulated by pointing at them, moving and/or changing their physical characteristics (or values) via the use of an input device. In its purest form, a direct manipulation dialogue allows users to perform all available interaction operation by acting on displayed objects in ways analogous to manipulating physical entities. Such objects are typically concrete, often graphical, representations of abstract software structures or capabilities, displayed within a simulated two or three-dimensional environment.
- Control panel based: This dialogue technique is defined by the closed loop consisting of machines and human operators controlling the machines using control actuators, which are represented by objects that are used to perform an action. The specifics of this dialogue technique are:
- variety of types of control actuators;
- input in digital or analogue form in normally fixed sequences;
- strong time constraints (real time);
- complexity of system control.
- Form filling
A dialogue technique that requires the user to fill in, complete or modify fields (typically labelled) on a form displayed by the system. This dialogue technique allows multiple user inputs in a single transaction and provides contextual information concerning the nature of the required inputs.
- Guidance function: Guidance functions can be divided into:
- guidance in non-error situations and error prevention;
- guidance in error situations and error management.
The guidance function is intended to promote efficient use of the dialogue system (quick and accurate use of full capabilities), minimise the memory load on the user, decrease the time required to learn how to use the dialogue system, provide support for users of different skill levels and help the user to escape from error situations.
- Guidance in non-error situations and error prevention
- Guidance in error situations and error management
- Dialogue control function
- System environment: The environment within which the dialogue system operates often provides general control functions. These include:
- Windowing: The division of a display area to provide one or more graphical contexts. The windowing system will normally support concepts such as input focus and provide mechanisms to allow the user to arrange the windows as desired.
- I/O equivalence: To support the different requirements and preferences of users, the dialogue system may support different user interactions as equivalent. Such equivalences are used to provide accelerators or to support disabled users, for example keyboard equivalents for mouse actions, flashing versus beeping.
- Global storage facilities: To support the interchange of data between applications or to act as a temporary repository, the dialogue system will often provide one or more globally accessible storage facilities, often referred to as clipboards.
- Dialogue flow: Dialogue flow functions allow control of the temporal progress of the dialogue. These include:
- start;
- suspend;
- resume;
- end;
- changes in the direction of the flow, e.g. to recover from errors by reverting to a previous dialogue state.
- Object management: Object management functions allow control of the existence, state and position of objects used in the dialogue. These include:
- create;
- delete;
- select;
- deselect;
- copy;
- move.
- Filtering: Filtering functions are used to reduce the volume of information exchanged during the dialogue. The purpose of these functions include:
- implementation of security and privacy restrictions (e.g. by means of passwords);
- implementation of user's capabilities and preferences (e.g. by means of user profiles);
- removal or modification of options inappropriate in the current mode (e.g. by greying menu items or removing them completely).
- Presentation of information
- Visual presentation: The use of visual appearance to categorize or identify objects and concepts.
- Enhancement: The altering of the visual appearance of selected parts of information on the display to attract attention and provide feedback. The ways in which the visual appearance can be altered include:
- size;
- shape;
- texture;
- colour;
- contrast;
- brightness.
- Alphanumeric: The use of letters or symbols with rules for their association. Used for reasons of brevity and security.
- Arbitrary: use of unique entities formed by letters or numbers that have little or no significance to the user and which bear no direct relationship to what they represent.
- Mnemonic: use of entities formed by letters or numbers that convey information that is meaningful to the user and have some association with the words they represent (e.g. abbreviations, acronyms).
- Graphical: The use of graphical information that can be interpreted by the user as concepts or objects.
- Abstract symbols: those which attempt to visualise a concept somehow apart from the concrete image.
- Representational symbols: those which attempt to visualise a concept related to a concrete image.
- Auditory presentation: The use of sound ranging from simple tones to sequences of tones to full speech capabilities.
- Tactile presentation: The use of touch to convey information (e.g. touch screen, mouse clicking).
- Temporal presentation: The use of variations in time to convey information (e.g. blinking, double clicking).
- Spatial presentation: The use of positions in space to convey information.
- I/O devices: Input/output devices can be divided into input devices, output devices and input/output devices. The last category is not treated separately, but is included in both the input and output devices taxonomy. Compound devices are considered to be combinations of I/O devices and hence do not require separate definitions here.
- Input device taxonomy: The following list shows the fundamental types of interaction tasks and which input devices are suitable to be used for each type.
- Selection
- Definition: Choosing from a set of alternatives
- Suitable devices: Mouse, tablet, light pen, pen, touch panel, touch screen, joystick, trackball, keyboard, microphone, glove, gesture suit.
- Position
- Definition: Indicating a location
- Suitable devices: Mouse, tablet, light pen, pen, touch panel, touch screen, joystick, trackball, keyboard, eye tracker, wheel, glove, gesture suit.
- Orientation
- Definition: The orientation of an entity in a two-dimensional or three-dimensional space
- Suitable devices: Joystick, keyboard, glove, gesture suit.
- Path
- Definition: Generating a series of positions or orientations over time
- Suitable devices: Mouse, tablet, light pen, touch panel, touch screen, joystick, trackball, keyboard, eye tracker, wheel, glove, gesture suit.
- Quantify
- Definition: Specifying a value to quantify a measure.
- Suitable devices: Switches, keyboard, mouse, wheel, microphone.
- Text capture
- Definition: Entering text directly, e.g. for annotating a drawing.
- Suitable devices: Keyboard, microphone.
- Image capture
- Definition: Entering an image directly.
- Suitable devices: Video, scanner.
- Output device taxonomy: At the highest level, output devices can be divided into those that provide output of a static and permanent nature and those that provide dynamic, temporary output.
- Static output
- Definition: providing an image on a permanent directly readable medium (e.g. paper).
- Suitable devices: Printers, plotters
- Dynamic output
- Definition: providing variable information on a non-permanent medium.
- Suitable devices: Screen, head mounted displays, loudspeakers, light.
- Engineering/ergonomic principles
- Action/object order: Some systems are based upon actions being invoked on objects. Whether the action or the object is selected first varies from system to system.
- Complexity of function set: Some systems provide a rich set of complex functions while others provide a small set of elementary functions which can achieve the same effect by being used in combination.
- Complexity of objects: Some systems have a simple set of objects with limited possibilities for combining them to form more complex ones. Other systems allow objects to be combined in various ways such as nesting, embedding, grouping, linking etc.
- WYSIWYG: A user interface methodology where the representation on the screen is judged by the user to have a close relationship to that which would be produced on a static output device (e.g. paper). (The "close" relationship may range from similar to identical, e.g. because of software or hardware limitations.)
- Physical principles: Certain aspects of the user interface should be modelled closely on human perception and behaviour. For example:
- font styles and sizes and the use of colour should be appropriate to human vision capability;
- keyboard layout and required key combinations should be appropriate to human manual dexterity;
- use of sound should be appropriate to human auditory characteristics.
- Dialogue principles
- Suitability for the task: A dialogue is suitable for a task to the extent that it supports the user in the effective and efficient completion of the task.
- Self-descriptiveness: A dialogue is self-descriptive to the extent that each dialogue step is immediately comprehensible through feedback from the system or is explained to the user on his or her requesting the relevant
information.
- Controllability: A dialogue is controllable to the extent, that the user is able to maintain direction over the whole course of the interaction until the point at which the goal has been met.
- Conformity with user expectations: A dialogue conforms with user expectations to the extent, that it corresponds to the user's task knowledge, education, experience, and to commonly held conventions.
- Error tolerance: A dialogue is error tolerant to the extent, if despite evident errors in input, the intended result may be achieved with either no or minimal corrective action having to be taken.
- Suitability for individualisation: A dialogue is suitable for individualisation to the extent, that the dialogue system is constructed to allow for modification to the user's individual needs and skills for a given task.
- Suitability for learning: A dialogue is suitable for learning to the extent, that it provides means, guidance, and stimulation to the user during the learning phases.
- Drivability: The extent to which user interfaces permit users to easily transfer from one application to another with minimal interference, error, confusion, re-learning and re-training.
- Look and Feel: The extent to which a user interface complies with a particular style guide.
- Internationalisation: Systems vary in the extent to which they support the needs of different cultural and language groups. These include translation of messages, formats, sorting/collating sequences, paper sizes, alphabets, text direction.
- Applicability domain
- User domain
- individual characteristics (e.g. skill level, preferences);
- work group characteristics (e.g. open plan vs closed office, CSCW);
- organisational characteristics (e.g. company policies).
- Application domain
- office;
- public information systems;
- education;
- home;
- control rooms;
- factory floor.
- Environmental constraints
- implementation dependencies (e.g. portability);
- system environment constraints (e.g. technology, non-graphic screens);
- economic constraints (e.g. cost of use, training)
Miscellaneous reading
"How to Draw S-Curved Arrows"
"Have SPAs ruined the Web?"
Event-Driven GTK by Example — 2021 Edition - Michael Murphy
Practical Typography:
- The four most important typographic considerations for body text are point size, line spacing, line length, and font (see font recommendations), because those choices determine how the body text looks.
- point size should be 10–12 points in printed documents, 15-25 pixels on the web.
- line spacing should be 120–145% of the point size.
- The average line length should be 45–90 characters (including spaces).
- The easiest and most visible improvement you can make to your typography is to use a professional font, like those found in font recommendations.
- Avoid goofy fonts, monospaced fonts, most free fonts, and system fonts—especially times new roman and arial.
- Use curly quotation marks, not straight ones (see straight and curly quotes).
- Use bold or italic as little as possible, and not together.
- Never underline, except perhaps for web links.
- all caps are fine for less than one line of text.
- Use centered text sparingly.
- Put only one space between sentences.
- Don’t use multiple word spaces or other white-space characters in a row.
- If you don’t have real small caps, don’t use them at all.
- Use 5–12% extra letterspacing with all caps and small caps.
- kerning should always be turned on.
- Use first-line indents that are one to four times the point size of the text, or use 4–10 points of space between paragraphs. Don’t use both.
- Always use hyphenation with justified text.
- Don’t confuse hyphens and dashes, and don’t use multiple hyphens as a dash.
- Use ampersands sparingly, unless included in a proper name.
- Use proper trademark and copyright symbols—not alphabetic approximations.
- In a document longer than three pages, one exclamation point is plenty (see question marks and exclamation points).
- Put a nonbreaking space after paragraph and section marks.
- Make ellipses using the proper character, not periods and spaces.
- apostrophes point downward.
- Make sure foot and inch marks are straight, not curly.
Programming with gtkmm 4
Search User Interfaces - Marti A. Hearst
The GLib/GTK+ Development Platform - Sébastien Wilmet (PDF)
Web Design Primer - Richard Adams, Ahmed Sagarwala
Web Style Guide Online - Patrick J. Lynch and Sarah Horton
Visual design rules you can safely follow every time
Implementation notes
Web UI
Detail Pages:
- _hyperscript Small scripting language for the web. ("The underscore is silent.")
- .NET Multi-platform App UI (MAUI) Build native apps using a .NET cross-platform UI toolkit that targets the mobile and desktop form factors on Android, iOS, macOS, Windows, and Tizen.
- 960 Grid System An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels; there are two variants: 12 and 16 columns, which can be used separately or in tandem.
- Accessibility resources A collection of resources around accessibility as it relates to UI/UX.
- ActionScript Programming language for the Adobe Flash plugin for web browsers.
- ActionScript VM Actionscript virtual machine.
- Adalo Mobile app-builder tool.
- Aephea Effective and adaptable HTML authoring.
- A-Frame A web framework for building virtual reality (VR) experiences.
- Amplication Open-source application development tool.
- Android Jetpack Compose The functional-composition way to build UIs in Android; "Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android".
- Angular Single-Page Application component-centric MVC-patterned framework for the browser.
- Ant Design A design system for enterprise-level products.
- Anytype A next-generation software that breaks down barriers between applications, gives back privacy and data ownership to users.
- Apache.org The Apache site is a collection of numerous open-source projects, in all stages of life (incubating, maintained, archived).
- Apache Cordova Mobile apps with HTML, CSS and JS
- Apache Isis Provides apps with a standard, automatically generated UI.
- Apache Royale A productive, open-source frontend application technology that lets you code in MXML and ActionScript3 and output to different formats.
- Apache Wicket An open source, component oriented, serverside, Java web application framework.
- appery.io A low-code tool for building presentation tiers.
- AppSmith An open source web framework for building internal tools, admin panels, dashboards, and workflows. Appsmith lets you drag-and-drop components to build dashboards, write logic with JavaScript objects and connect to any API, database or GraphQL source.
- Arc (browser) Browser challenger to Chrome, Edge, etc.
- ASP.NET/ASP.NET Core Microsoft's HTML/HTTP server-side framework.
- Astro The web framework for content-driven websites.
- Aurelia Build modern web applications with a framework that puts you first.
- Avalonia A cross-platform .NET UI framework that supports all the major platforms.
- Awesome (lists) (Project Awesome) A curated collection of lists.
- Backbone A JavaScript rich-client web app framework based on the model–view–controller design paradigm, intended to connect to an API over a RESTful API.
- Backstage An open platform for building developer portals.
- Baklavajs Graph / node editor in the browser using VueJS.
- Blackprint A general purpose visual programming tool.
- Blazor A tool to convert C# to WASM for interactive browser UIs written in C#.
- Blockly An editor that represents coding concepts as interlocking blocks.
- Bootstrap A design framework-slash-CSS library for building websites that don't look like programmer-built websites.
- Box A text-based visual programming language inspired by Unreal Engine Blueprint function graphs.
- Browser Reading A collection of articles about browser-related development (how things work, etc)
- Browsers (Web) Standardized web browser programming.
- Buffalo A Go web development eco-system, designed to make your life easier.
- Build-Your-Own-X A collection of links on how to build various things as a learning exercise.
- Caffeine A livecoding environment for web browsers, Deno, and WebAssembly; after adding it to a webpage, you can use it to make live persistent changes to that page and other pages running Caffeine, without reloading.
- CapacitorJS Capacitor turns any web app into a native app so you can run one app across iOS, Android, and the Web with the same code.
- Cappuccino A framework which makes it easy to create advanced web apps.
- Cascading StyleSheets (CSS) Collections of reading and links on the second triad of the HTML/CSS/JS browser layer.
- Chart.js Simple yet flexible JavaScript charting for designers & developers.
- Chrome (browser) (Chrome) Extensions are software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.
- clip (command-line illustration processor) An open-source software package for creating charts and other data-driven illustrations.
- cmdpixl Totally practical command-line image editor.
- Compost.js A data visualization library that lets you compose rich interactive data visualizations from a small number of basic primitives. The library is based on the functional programming idea of composable domain-specific languages.
- Corecalc A research prototype implementation of core spreadsheet functionality in C#, intended as a platform for experiments with technology and novel functionality.
- CreateJS A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
- CSS snippets Cool CSS snippets I find along the way.
- CSS Specifications All the specification docs that make up CSS.
- cT An easy to use graphics- and mouse-oriented programming environment
- Cuis-Smalltalk A free Smalltalk-80 environment with a specific set of goals: being simple and powerful.
- CycleJS A functional and reactive JavaScript framework for predictable code.
- D2 A modern diagram scripting language that turns text to diagrams.
- DataStory Real-time, observable, Flow-based programming for React, Node.js and VS Code; it ships a React component which connects to a computation server that executes your diagram with real time feedback.
- DeltaScript A lightweight, general-purpose Java framework used to develop GUI applications and games
- DerbyJS MVC framework for writing realtime, collaborative applications that run in both NodeJS and browsers.
- DFlat An original text UI framework built piece-by-piece by Al Stevens in DDJ.
- DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements.
- Diataxis A way of thinking about and doing (organizing) documentation.
- Discourse A platform for community discussion.
- DocBook Collection of XML/XSLT tags for publishing articles, books, and other forms of content.
- DOT A graph description language, developed as a part of the Graphviz project.
- DotVVM An open-source framework for ASP.NET to build interactive webapps with just C# and HTML (MVVM pattern).
- Draflow A Simple flow library.
- DZSlides A one-file HTML template to build slides in HTML5 and CSS3.
- Easylang An easy programming language that runs in the browser.
- ElectronJS A framework for building desktop applications using JavaScript, HTML, and CSS, by embedding Chromium and Node.js into its binary, thus allowing one to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux.
- Elemental UI A UI toolkit for React.js Websites and Apps.
- Eleventy A simpler static site generator.
- Elmish Bringing the Elm language to the Fable world.
- Ember A productive, battle-tested JavaScript framework for building modern web applications.
- EPIC stack Javascript/Web project starter stack.
- Evergine The graphics development engine for business and industry. Build high-quality 3D solutions and deploy to any platform.
- Extensible Markup Language (XML) Data or presentation format inspired by HTML and SGML, used extensively in software development.
- Fable A compiler that brings F# into the browser.
- Fabulous F# Functional App Development, using declarative dynamic UI.
- Fanx A full-stack programming language base on Fantom.
- Fenster Tiny 2D canvas library that's just a C/C++ drop-in header.
- Firefox (browser) The Firefox browser as a platform.
- Flakes A combination of CSS Libraries, JavaScript Libraries and Design files that serve as a foundation for internal business applications, and gives priority to function and usability over glitz, it takes a no-nonsense approach to user interface design.
- Flowpipe Very simple flow-based programming framework.
- Fluid Create a Real Mac App (or "Fluid App") out of any website or web application, effectively turning your favorite web apps into OS X desktop apps.
- Fluid Framework A collection of client libraries for distributing and synchronizing shared state, allowing multiple clients to simultaneously create and operate on shared data structures using coding patterns similar to those used to work with local data.
- Flutter A functional/reactive cross-platform mobile framework.
- Flutter Articles A functional/reactive cross-platform mobile framework.
- Flutter Examples A functional/reactive cross-platform mobile framework.
- Fonoster APIs for SMS, voice and video.
- Forem An open source platform for building modern, independent, and safe communities.
- Foundation A family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
- Frappe Open source, metadata driven, full stack framework in Python and Javascript; comes with Admin UI, Roles and Permissions and much more.
- FTXUI C++ Functional Terminal User Interface.
- Fun Programming language for the realtime web.
- FuncSug Language for GUI programming that allows program codes to follow the same order as the scenario.
- Glimesh Live streaming platform.
- Glinda Combines live programming, GUIs, and a DSL for data science.
- GNUStep A foundation for a portable desktop environment (inspired by NeXTStep), seeking to be code-compatible with Apple's Cocoa.
- Graphics and Animation A collection of links and pages around graphics (but not UI) programming.
- GraphQL A query language APIs can support to enable SQL-like behavior across APIs; supports both query and mutation, and can define complex entity descriptions.
- Graphviz The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages; PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
- Handel A small procedural programming language for writing songs in the browser.
- HBuilder Yet another mobile presentation framework/library.
- Heatrix A microlang that let's you customize your visualizations using "directives".
- Hibiki A powerful new web framework for creating modern, dynamic, frontend applications without JavaScript, that can be fully scripted and controlled by backend code.
- Hilla Integrates a Spring Boot Java back end with a reactive TypeScript front end. It helps you build apps faster with type-safe server communication, included UI components, and integrated tooling.
- HonKit Building beautiful books using Markdown.
- HonoX A simple and fast meta-framework for creating full-stack websites or Web APIs.
- HTMX Thin layer over HTML, seeking to apply consistency and simplify the browser programming model.
- Hugo Static site generator written in Go and using that language for its programmatic control.
- HyperCard Apple's original "low-code" environment
- HyperText Markup Language (HTML) The OG.
- ImageSharp A modern, cross-platform, 2D Graphics library for .NET.
- ImGui Bloat-free GUI for C++ with minimal dependencies.
- Ionic An open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies with integrations for popular frameworks like Angular, React, and Vue.
- JAMStack Javascript, APIs, and Markdown presentation layer
- Jexer An open-source 100% Java Text User Interface (TUI) originally designed to outwardly resemble the DOS-era Turbo Vision library--an advanced text windowing system framework to help new applications take full advantage of the terminal.
- Jitsi Video conferences platform and SDK.
- JogAmp The home of high performance Java™ libraries for 3D Graphics, Multimedia and Processing. JOGL, JOCL and JOAL provide cross platform Java™ language bindings to the OpenGL®, OpenCL™, OpenAL and OpenMAX APIs.
- jQuery, jQuery Mobile Fast, small, and feature-rich JavaScript library (libraries). It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
- JustPy An object-oriented, component based, high-level Python Web Framework that requires no front-end programming and makes no distinction between front-end and back-end.
- Kivy Python cross-platform GUI framework.
- Kotter A declarative, Kotlin-idiomatic API for writing dynamic console applications.
- Kraken (OpenKraken) High-performance web rendering engine, built on Flutter.
- Lanterna A Java library allowing you to write easy semi-graphical user interfaces in a text-only environment, very similar to the C library curses but with more functionality.
- LeanQt A stripped-down Qt version easy to build from source and to integrate with an application.
- Less (CSS) It's CSS, with just a little more.
- libui Simple and portable (but not inflexible) GUI library in C that uses the native GUI technologies of each platform it supports.
- Lightning Presentation layer for the Salesforce platform.
- Lit Elements on top of WebComponents.
- Lit A simple library for building fast, lightweight web components.
- LiveCode Commercial open-source cross-platform low-code (natural language expression) platform.
- LiveKit SFU and SDKs for high-performance, scalable WebRTC.
- Lively Kernel A new approach to Web programming available that provides a complete platform for Web applications, including dynamic graphics, network access, and development tools.
- Lucee CFML application server/engine. Lucee provides a lot of functionality (tags and functions) to deal with all kinds of web related actions. Manipulating images, PDF files, XML, string, numbers, dates and a lot more.
- LynxJS A family of technologies empowering developers to use their existing web skills to create truly native UIs for both mobile and web from a single codebase.
- Markdown Text-based markup language originally intended for easy HTML creation.
- Marko Bringing back progressive HTML rendering to the masses.
- Marp Markdown presentation ecosystem.
- mdBook A command-line tool to create books with Markdown.
- MDP A command-line based markdown presentation tool.
- Mermaid Generation of diagram and flowchart from text in a similar manner as markdown.
- Metawidget A smart widget that populates itself, either statically or at runtime, with UI components to match the properties of your domain objects.
- microui Simple GUI interface library.
- Mint A refreshing programming language for the front-end web.
- Miso A small, production-ready, "isomorphic" Haskell front-end framework for quickly building highly interactive single-page web applications.
- Mithril Another client-side JS framework for building Single-Page Applications.
- Mobile Angular UI A mobile UI HTML/CSS/JS framework based on Angular and Twitter Bootstrap.
- mobl A mobile application language and framework.
- Morphic A style of "direct-manipulation" (of objects) user interface first seen in the Self language/environment and later adopted by other object platforms.
- Mux An API that enables developers to build unique live and on-demand video experiences.
- Naked Objects The practice of generating UI (and, optionally, persistence) directly from domain objects without compilation requirements.
- Naked Objects Framework Turns a POCO domain model (that follows a few simple conventions) into a complete application.
- Netlify CMS Git-based CMS for static site generators.
- NextJS Browser-based React framework.
- NeXTSpace A desktop environment that brings a NeXTSTEP look and feel to Linux.
- NiceGUI A Python-based UI framework, which shows up in your web browser.
- NocoDB The Open Source Airtable alternative.
- Noodle Visual programming UI and framework driven by pure functional language and data streams.
- Nuklear A single-header ANSI C immediate mode cross-platform GUI library.
- NXUI NXUI (nex-ui), next-gen UI - Create minimal Avalonia applications using C# 10 and .NET 6 and 7.
- OhMyForm Create stunning embedable forms for recruiting, market research, surveys and more; open source alternative to TypeForm, TellForm, or Google Forms.
- Onsen UI The fastest way to develop beautiful HTML5 hybrid and mobile web apps.
- OOUI A small cross-platform UI library for .NET that uses web technologies; presents a classic object-oriented UI API that controls a dumb browser.
- OpenVidu Platform and SDKs to build on-premises WebRTC video conferences.
- Oqtane A Modular Application Framework for Blazor (.NET WebAssembly).
- P5 A JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators.
- Paper websites Can you build a website from a piece of paper?
- PATAT Terminal-based presentations using Pandoc.
- Patat (Presentations Atop The ANSI Terminal) Terminal-based presentations using Pandoc.
- PDF24 Tools Free and easy-to-use online PDF tools that make you more productive.
- Pencil Project GUI prototyping tool.
- Photino A lightweight open-source framework for building native, cross-platform desktop applications with Web UI technology.
- PicoCSS A minimal CSS framework for semantic HTML.
- Pinafore A language that allows you to structure information and create user interfaces for it.
- PixiJS A rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.
- Play Visual app builder intended for use on mobile devices. "Design, test and share powerful mobile products—directly from your mobile device."
- Polymer Creating custom elements for HTML presentation layers.
- Polymer (Project) Libraries, tools, and standards for a better web: LitElement, lit-html, web components, ...
- Portable Document Format (PDF) A cross-platform format for rendering pixel-correct pages.
- PortableGL An implementation of OpenGL 3.x-ish in clean C.
- Preact Fast 3kB alternative to React with the same modern API that can be used directly in the browser without any transpilation steps.
- Processing An open-source graphical library and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.
- Progressive Web applications (PWAs) Collection of resources and ideas on PWAs.
- Pug A little language that compiles into the HTML. It has cleaner syntax with additional features like if statements and loops. It can also be used as a server side templating language for server languages like NodeJS.
- Puter Cloud-hosted OS-like platform.
- PyAutoGui Lets Python scripts control the mouse and keyboard to automate interactions with other applications.
- Pyglet A cross-platform windowing and multimedia library for Python.
- Python UI frameworks/libraries A collection of links to (and on) Python GUI libraries/frameworks.
- q5JS A small and fast alternative (experimental) implementation of p5.js.
- Qt One framework. One codebase. Any platform. Qt is the fastest and smartest way to produce industry-leading software that users love.
- Quarkly Design tool for creating websites and web apps.
- Quarto An open-source scientific and technical publishing system.
- Quasar An open-source VueJS-based framework, to quickly create response++ websites/apps.
- Quick.Ref Cheat Sheets A collection of "cheat sheets"/quick-reference-guides for various tools and platforms and languages and ....
- Qwik An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.
- Railo An open-source CFML server.
- Ratchet Build mobile apps with simple HTML‚ CSS‚ and JS components.
- React SinglePageApplication component-based functional framework for the browser.
- ReactiveUI Use the Reactive Extensions for .NET to create elegant, testable user interfaces that run on any mobile or desktop platform.
- React Native An implementation that takes React source and executes it on mobile devices.
- Rebol A lean, extensible platform that operates over a variety of operating systems and devices.
- Redux State management for React.
- Refactoring to HTML Early thoughts about how to get back to HTML-first web page design.
- Remix A full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.
- Responsive Grid System A responsive grid system for web applications.
- RestDB.io Simple online NoSQL database backend with automatic APIs and low code javascript hooks.
- RevealJS An open source HTML presentation framework tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.
- RIFE2 A full-stack, no-declaration, framework to quickly and effortlessly create web applications with modern Java.
- RPD A Minimal Engine for creating Node-Based Visual Programming User Interfaces.
- ruby-opengl OpenGL wrapper for Ruby.
- Ruffle A Flash Player emulator built in the Rust programming language.
- Safari (Browser) The Apple macOS/iOS Web browser as a platform.
- SAFE Stack Full-stack web development based on F# throughout each layer.
- Sciter Embeddable HTML/CSS/script engine for modern UI development
- Scratch A fork of Google's Blockly project that provides a design specification and codebase for building creative computing interfaces.
- ScratchJr an introductory programming language that enables young children (ages 5-7) to create their own interactive stories and games.
- SemanticUI A UI component framework based around useful principles from natural language.
- Sencha (ExtJS) Comprehensive JavaScript framework for building data-intensive, cross-platform web and mobile applications for any modern device.
- Shoelace A forward-thinking library of web components.
- Shoelace A framework-independent component-based UX library.
- Silk.NET One-stop-shop for high-speed .NET multimedia, graphics, and compute; providing bindings to popular low-level APIs such as OpenGL, OpenCL, OpenAL, OpenXR, GLFW, SDL, Vulkan, Assimp, and DirectX; use to spruce up your games and applications with cross-platform 3D graphics, audio, compute and haptics.
- Simple DirectMedia Layer A cross-platform development library designed to provide low level access to audio, keyboard, mouse, joystick, and graphics hardware via OpenGL and Direct3D.
- SimpleMDE A simple, embeddable, and beautiful JS markdown editor.
- Skeleton A dead simple, responsive HTML/CSS/JS boilerplate.
- Spectre Console A .NET library that makes it easier to create beautiful console applications.
- Spice A spicy cross-platform UI framework.
- StackEdit Add StackEdit to any website.
- Stamp A microlang that makes it as concise as possible to write, edit, share and expand project templates.
- Starcounter "Fused" ACID memory centric database engine and C# VM.
- Static Site Generators list The definitive listing of Static Site Generators.
- Stencil A compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.
- Streamlit Turns data scripts into shareable web apps in minutes. All in pure Python. No front‑end experience required.
- Streamlit Turns data scripts into shareable web apps in minutes.
- Svelte A framework for building websites.
- TabrisJS Native mobile apps in JavaScript. TypeScript as a first class citizen for app development..
- Taichi Language for high-performance, sparse & differentiable graphics computing.
- Taipy An open-source data & AI web application builder.
- Tauri Build smaller, faster, and more secure desktop applications with a web frontend
- Terminal.GUI Console-based user interface toolkit.
- Textual A framework for building terminal-based applications with interactive and visually appealing text interfaces.
- Textual A Rapid Application Development framework for Python.
- Thyrd An experimental, reflective, visual programming language and environment. In Thyrd, both data and code are stored in cells situated in nested two-dimensional grids. The user interface animates the transition from a cell to its subordinate or superordinate grid to help keep the user oriented in the hierarchical grid structure. All operations the user can perform to edit the structure are implemented as operators in the Thyrd language, thus a Thyrd program can inspect and modify itself or other programs in the same space.
- Tidal (TidalCycles) A free/OSS that allows you to make (musical) patterns with code, whether live coding music at algoraves or composing in the studio.
- Tina Visual editor for React websites.
- TinyBase A JavaScript library for structured state.
- Titanium Mobile Develop cross-platform native mobile applications and build great mobile experiences using JavaScript.
- TogetherJS A free, open source JavaScript library by Mozilla that adds collaboration features and tools to your website.
- Tooljet An open-source low-code framework to build & deploy internal tools with minimal engineering effort.
- Turbo Vision Reimplementations of Borland's old Character User Interface framework.
- Twilio Commercial platform for various (human) communication (SMS, video, etc).
- Twitch Commercial live streaming platform.
- uhtml One of the smallest, fastest, memory consumption friendly, yet zero-tools based, library to safely help creating or manipulating DOM content.
- UILang A minimal, UI-focused programming language for web designers.
- UI patterns A collection of links and notes on commonly-recurring elements in UI design.
- Uno The first and only UI Platform for single-codebase applications for Windows, WebAssembly, iOS, macOS, Android and Linux.
- Vaadin A open source Java web app development platform for Java. With Vaadin, your UI code runs securely on the server, right next to your business logic that you can access with native Java API. Vaadin takes care of routing and server-client communication transparently, quickly, and securely, so you can focus on what matters - building a great app for your users.
- Vanilla A platform for community discussion.
- VanillaJS (aka No Web Framework) Articles and links about using no Web framework at all.
- vis.js A dynamic, browser-based visualization library.
- vtmc (Video Terminal Master of Ceremonies) A terminal-based presentation program.
- Vue Page-centric component-based framework for the browser.
- W3M An open-source terminal web browser (and pager) available for any Unix-like OS.
- WASM WinForms C# Winforms for Webassembly.
- Web analytics Tools/platforms/notes on gathering metrics about web pages.
- Web Components A set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
- Webix JavaScript UI library and framework fro cross-platform Apps development.
- WebSharper Robust, full-stack, client-server/single-page/HTML applications in C# and F#.
- WinUI A native user experience (UX) framework for both Windows desktop and UWP applications.
- Wired Elements Web components.
- WyldCard A clone of Apple's HyperCard and HyperTalk scripting language.
- Xamarin A cross-platform library for building applications on iOS, Android, etc, using the CLR-based tooling and platform.
- XForms Proposed standard for replacing HTML forms in a browser.
- XOOM DDD naked objects-like platform for low-code to full-code reactive, event-driven apps and microservices.
- Yet Another Multicolumn Layout (YAML) A modular CSS framework for truly flexible, accessible and responsive websites.
- Zola A single executable static website generator with Sass compilation, syntax highlighting, table of contents and many other features that traditionally require setting up a dev environment or adding some JavaScript libraries to your site.
- Zotonic The open source, high speed, real-time web framework and content management system, built with Erlang.
Last modified 05 May 2025