WebView2 Plugin for Rainmeter

Embed modern web content directly into your Rainmeter skins with full JavaScript interactivity

📥 Download • 📖 Documentation • 💡 Examples • 🤝 Contributing

✨ What Can You Build?

Animated Widgets
_{Create stunning animated clocks, weather displays, and visualizers}

Web Dashboards
_{Embed live web content and interactive dashboards}

Smart Integrations
_{Connect to APIs and control Rainmeter with JavaScript}

🎯 Key Features

🚀 Modern Web Engine

Powered by Microsoft Edge WebView2, supporting:

✅ HTML5, CSS3, JavaScript ES6+
✅ Modern frameworks (React, Vue, Svelte)
✅ WebGL, Canvas, SVG animations
✅ Transparent backgrounds by default

🔌 Seamless JavaScript Bridge

Two-way communication between web and Rainmeter:

✅ Call Rainmeter API from JavaScript
✅ Execute JavaScript from Rainmeter
✅ Real-time data synchronization
✅ Custom events and callbacks

⚡ Dynamic & Flexible

✅ Load local HTML or remote URLs
✅ Multiple WebView instances per skin
✅ Hot-reload without flickering
✅ Developer tools (F12) built-in

📋 Requirements

Before you begin, make sure you have:

Requirement	Version	Status
Windows	10 (1803+) or 11
Rainmeter	4.5 or higher
WebView2 Runtime	Latest

📦 Don't have WebView2 Runtime?

Good news! Windows 11 includes it by default. For Windows 10:

🔗 Download WebView2 Runtime
🎯 Choose "Evergreen Standalone Installer"
⚡ Run the installer (takes ~1 minute)

📥 Installation

🎁 Method 1: One-Click Install (Recommended)

The easiest way to get started!

📦 Download the .rmskin file
🖱️ Double-click to install
✨ Done! Plugin and examples are ready to use

_{Rainmeter will automatically install everything you need}

🛠️ Method 2: Manual Installation

Click to expand manual installation steps

Download the plugin DLLs from Releases

Choose the right version:

📁 x64/WebView2.dll  ← For 64-bit Rainmeter (most common)
📁 x32/WebView2.dll  ← For 32-bit Rainmeter

Copy to your Rainmeter plugins folder:
```
%AppData%\Rainmeter\Plugins\
```
Restart Rainmeter

🚀 Quick Start

Your First WebView Skin

Create a new skin with this minimal configuration:

[Rainmeter]
Update=1000

[MeasureWebView]
Measure=Plugin
Plugin=WebView2
URL=file:///#@#index.html
W=800
H=600

Create index.html in your @Resources folder:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        h1 { font-size: 3em; animation: fadeIn 1s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
</head>
<body>
    <h1>🎉 Hello Rainmeter!</h1>
</body>
</html>

That's it! Load the skin and see your first WebView in action.

⚙️ Configuration Options

Option	Description	Default	Example
`URL`	🌐 HTML file or web URL _{Supports: file:///, http://, https://}	Required	`file:///#@#index.html`
`W`	📏 Width in pixels	800	`1920`
`H`	📏 Height in pixels	600	`1080`
`X`	↔️ Horizontal position offset	0	`100`
`Y`	↕️ Vertical position offset	0	`50`
`Hidden`	👁️ Start hidden _{0 = visible, 1 = hidden}	0	`1`
`Clickthrough`	🖱️ Mouse interaction _{0 = interactive, 1 = clickthrough}	0	`1`
`DynamicVariables`	🔄 Enable live updates	0	`1`

💡 Pro Tip: When DynamicVariables=1, the WebView updates smartly:

URL changes → Navigates without recreating

Size/Position changes → Applied instantly, no flicker

Visibility changes → Instant toggle

🎮 Bang Commands

Control your WebView with Rainmeter bangs:

Navigation Commands

; Go to a URL
[!CommandMeasure MeasureWebView "Navigate https://example.com"]

; Reload current page
[!CommandMeasure MeasureWebView "Reload"]

; Browser history
[!CommandMeasure MeasureWebView "GoBack"]
[!CommandMeasure MeasureWebView "GoForward"]

Control Commands

; Execute JavaScript
[!CommandMeasure MeasureWebView "ExecuteScript alert('Hi!')"]

; Developer tools
[!CommandMeasure MeasureWebView "OpenDevTools"]

🔥 JavaScript Integration

Lifecycle Hooks

Your JavaScript can respond to Rainmeter events:

// Called once when plugin is ready
window.OnInitialize = function() {
    console.log("🚀 WebView initialized!");
    return "Ready!"; // This becomes the measure's value
};

// Called on every Rainmeter update
window.OnUpdate = function() {
    const now = new Date().toLocaleTimeString();
    return now; // Updates measure value
};

⚠️ Note: JavaScript execution is asynchronous, so there's a 1-update delay between JS return and Rainmeter display. This is normal!

Call JavaScript from Rainmeter

Use section variables to call any JavaScript function:

[MeterTemperature]
Meter=String
Text=Current temp: [MeasureWebView:CallJS('getTemperature')]°C
DynamicVariables=1

// In your HTML
window.getTemperature = function() {
    return 72;
};

🌉 RainmeterAPI Bridge

Access Rainmeter's full power from JavaScript:

Read Skin Options

// Read from your measure
const refreshRate = await RainmeterAPI.ReadInt('UpdateRate', 1000);
const siteName = await RainmeterAPI.ReadString('SiteName', 'Default');

// Read from other sections
const cpuUsage = await RainmeterAPI.ReadStringFromSection('MeasureCPU', 'Value', '0');

Execute Bangs

// Set variables
await RainmeterAPI.Bang('!SetVariable MyVar "Hello World"');

// Control skins
await RainmeterAPI.Bang('!ActivateConfig "MySkin" "Variant.ini"');

// Update meters
await RainmeterAPI.Bang('!UpdateMeter MeterName');
await RainmeterAPI.Bang('!Redraw');

Get Skin Information

const skinName = await RainmeterAPI.SkinName;
const measureName = await RainmeterAPI.MeasureName;

// Replace variables
const path = await RainmeterAPI.ReplaceVariables('#@#images/logo.png');

// Get variable values
const theme = await RainmeterAPI.GetVariable('CurrentTheme');

Logging

await RainmeterAPI.Log('Debug info', 'DEBUG');
await RainmeterAPI.Log('Warning message', 'WARNING');
await RainmeterAPI.Log('Error occurred', 'ERROR');

Complete API Reference

📚 Click to see all available methods

Reading Options

ReadString(option, defaultValue) → Promise<string>
ReadInt(option, defaultValue) → Promise<number>
ReadDouble(option, defaultValue) → Promise<number>
ReadFormula(option, defaultValue) → Promise<number>
ReadPath(option, defaultValue) → Promise<string>

Reading from Sections

ReadStringFromSection(section, option, defaultValue) → Promise<string>
ReadIntFromSection(section, option, defaultValue) → Promise<number>
ReadDoubleFromSection(section, option, defaultValue) → Promise<number>
ReadFormulaFromSection(section, option, defaultValue) → Promise<number>

Utility Functions

ReplaceVariables(text) → Promise<string>
GetVariable(variableName) → Promise<string>
PathToAbsolute(relativePath) → Promise<string>
Bang(command) → Promise<void>
Log(message, level) → Promise<void>

Properties

MeasureName → Promise<string>
SkinName → Promise<string>
SkinWindowHandle → Promise<string>
SettingsFile → Promise<string>

💡 Examples

The plugin includes ready-to-use example skins:

🕐 Clock
_{Animated liquid clock with smooth animations}

📅 Calendar
_{Interactive month view calendar}

⚙️ Config Reader
_{Read options from measures and sections}

🔧 Utilities
_{Demonstrate all API functions}

To explore examples:

Install the .rmskin package
Check your Rainmeter skins folder
Load example skins from Rainmeter manager

🛠️ Building from Source

For Developers: Build Instructions

Prerequisites

Visual Studio 2022 with C++ desktop development
Windows SDK
PowerShell 5.1+

Build Steps

# Clone repository
git clone https://github.com/yourusername/WebView2.git
cd WebView2

# Open in Visual Studio
start WebView2-Plugin.sln

# Build with PowerShell
powershell -ExecutionPolicy Bypass -Command "& {. .\Build-CPP.ps1; Dist -major 0 -minor 0 -patch 3}"

Build Output

📁 dist/
  ├── 📁 x64/
  │   └── WebView2.dll
  ├── 📁 x32/
  │   └── WebView2.dll
  ├── WebView2_v0.0.3_x64_x86_dll.zip
  └── WebView2_v0.0.3_Alpha.rmskin

🆘 Troubleshooting

❌ "WebView2 Runtime is not installed"

Solution: Install WebView2 Runtime

Windows 11 has it pre-installed. For Windows 10, download and run the installer.

❌ "Failed to create WebView2 controller"

Try these steps:

✅ Right-click skin → Refresh skin
✅ Restart Rainmeter completely
✅ Verify WebView2 Runtime is installed
✅ Check Windows Event Viewer for detailed errors

❌ "RainmeterAPI is not defined" in JavaScript

Solution: Wait for page to load before accessing API:

document.addEventListener('DOMContentLoaded', () => {
    // Now you can use RainmeterAPI
    RainmeterAPI.Log('Page loaded!', 'DEBUG');
});

❌ WebView not visible

Checklist:

✅ Ensure Hidden=0 in your measure (default is 0)
✅ Check URL path is correct
✅ Verify HTML file exists
✅ Look for errors in Rainmeter log
✅ Try: [!CommandMeasure MeasureName "OpenDevTools"] to debug

Transparency tip: The WebView has transparent background by default. Use background: transparent; in your CSS.

📄 License

MIT License - Free to use, modify, and distribute

See LICENSE file for full details

🤝 Contributing

We welcome contributions! Here's how:

1. Fork
🍴
_{Fork this repo}

2. Branch
🌿
_{Create feature branch}

3. Code
💻
_{Make your changes}

4. Commit
📝
_{Commit with clear message}

5. PR
🚀
_{Open Pull Request}

git checkout -b feature/AmazingFeature
git commit -m 'Add some AmazingFeature'
git push origin feature/AmazingFeature

🙏 Acknowledgments

Built with powerful tools and inspired by the community

Microsoft Edge WebView2 • Rainmeter API • Rainmeter Community

💖 Made with love for the Rainmeter community

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 80 Commits
.github/workflows		.github/workflows
API		API
Resources		Resources
WebView2		WebView2
.gitignore		.gitignore
Build-CPP.ps1		Build-CPP.ps1
LICENSE		LICENSE
README.md		README.md
WebView2-Plugin.sln		WebView2-Plugin.sln

License

NSTechBytes/WebView2

Folders and files

Latest commit

History

Repository files navigation