Visage: UI library meets creative coding

Visage is a GPU-accelerated, cross-platform C++ library for native UI and 2D graphics. It merges the structure of a UI framework with the features of a creative graphics libraries.

Full Basic Example

#include <visage/app.h>

int main() {
  visage::ApplicationWindow app;

  app.onDraw() = [&app](visage::Canvas& canvas) {
    canvas.setColor(0xffff00ff);
    canvas.fill(0, 0, app.width(), app.height());
  };

  app.show(800, 600); // Opens as 800 x 600 pixel window
  app.runEventLoop(); // Runs window events. Returns when window is closed.
  return 0;
}

Demos

• Showcase
• Blend Modes
• Bloom
• Gradients
• Paths
• Post Shader Effects
• Backdrop Effects
• Live Shader Editing

UI Features

• Event Normalization
     Cross-platform support for keyboard and mouse input normalization.

• Window Normalization
     Cross-platform support for opening and handling windows.

• Text entry
     Unicode text entry with multi line text editing

• ✨ Emojis ✨
     If you're into that kind of thing 🤷

• Flexbox Layout
     Flex-style layout for positioning and sizing frames

• Widgets
     Buttons, text editors, popup menus, scroll views, a color picker and more

• Plugin Embedding
     Attach the UI to a window owned by a host, like an audio plugin

• Partial Rendering
     Redraws only the dirty regions for optimal performance.

Graphics Features

• Fluid motion
     New frames are displayed at the monitor's refresh rate and animations are smooth

• Automatic Shape Batching
     Automatically groups shapes for efficient GPU rendering.

• SVG
     Draw SVG files with gradients, clip paths and masks

• Paths
     Fill and stroke Bézier paths with dashes, joins and caps

• Gradients
     Linear and radial gradients for shapes, paths and text

• Blend Modes
     Supports blending layers with additive, subtractive or by drawing a custom mask for the UI to pass through

• Shaders
     Write shaders once and transpile them for Direct3d, Metal and OpenGL

• Included Effects
     Real-time effects such as large blur and bloom

• Backdrop Effects
     Blur or run a shader on whatever is behind a frame, like frosted glass

• Pixel Accuracy
     Access to device pixel size ensures precise rendering without blurring.

Supported Platforms

• Windows: Direct3D11
• MacOS: Metal
• Linux: Vulkan on Wayland or X11 (Wayland when available; set VISAGE_WINDOWING=x11 or wayland to choose)
• Web/Emscripten: WebGL