OnFramer is a powerful, customizable Chromium Embedded Framework (CEF) designed to streamline the development of desktop applications using familiar web technologies like HTML, CSS, and JavaScript. By leveraging the robustness of Chromium, OnFramer enables developers to create sophisticated, multi-monitor-supported applications with advanced window management features, all while maintaining the flexibility and ease of use that web development offers.
Version 1.0.0-beta. More info
In today's fast-paced development environment, the need for rapid prototyping and seamless
integration of web and desktop technologies has never been greater. Traditional GUI frameworks like
Qt or C++ often come with a steep learning curve, especially for developers who are more familiar
with web technologies. This can slow down the development process and make it challenging to create
flexible, cross-platform applications.
OnFramer was born out of a desire to bridge this gap. We wanted to provide a
framework that allows
developers to harness the full power of the web within desktop applications, without the
complexities of traditional GUI frameworks. With OnFramer, developers can take advantage of the rich
ecosystem of web development tools and resources, while also benefiting from robust desktop-specific
features like window transparency control, multi-monitor support, and remote window management.
At the heart of OnFramer lies the Chromium Embedded Framework (CEF), a powerful open-source project
that enables developers to embed Chromium web browser functionalities into their applications.
By leveraging CEF, OnFramer provides a stable and modern web rendering engine, ensuring that
your
desktop applications have the same level of performance, security, and compatibility as the latest
web browsers.
Welcome to OnFramer! This section will guide you through the initial steps to get up and running with OnFramer. Whether you're new to desktop application development or a seasoned developer looking to explore new tools, this guide will help you quickly set up OnFramer and start building powerful, web-integrated desktop applications.
Important: OnFramer is currently available only for Microsoft Windows x64. Ensure your system meets this requirement before proceeding with the installation.
Before Install Paranoid? No Problem! 😅 If you're feeling a little cautious (or just want to take OnFramer for a spin without risking your precious operating system), we totally get it! You can easily test OnFramer in an isolated environment. Simply fire up a VirtualBox VM or use Windows Sandbox to create a safe, virtual playground where you can experiment without any commitments.
Installing OnFramer is a straightforward process, and we’ve provided detailed instructions to guide you through every step. Whether you're setting up OnFramer for the first time or upgrading to the latest version, we've got you covered.
To ensure you have the most up-to-date and accurate information, please visit our Installation Page available on the release page. There, you will find everything you need to get started with OnFramer.
Once OnFramer is installed, getting started is as simple as typing a command. OnFramer is automatically added to your system’s environment path, allowing you to open it from anywhere in your command line or terminal.
To open OnFramer, simply open your command prompt or terminal and type:
onframer --widget
By default onframer will open https://onframer.io if no url parameter is defined
OnFramer also supports a variety of command-line arguments that give you greater control over how the application starts. Here are a few useful ones:
onframer --url="https://onframer.io"
onframer --url="https://onframer.io" --widget
onframer --url="https://onframer.io" --widget --dev
NOTE:
CEF and Chromium support a wide range of command-line switches. Above are the command-line switches specific to the
OnFramer application. Check the following links for more info:
Cef specific argument list
Chromium argument list
Click here if you want install custom schema protocol (onframer:// and widget://)
OnFramer allows you to define and use custom schema protocols to load your applications in a more intuitive
and flexible way. If you've installed a custom schema protocol, you can launch OnFramer also invoking it from
your browser or application. With custom schema onframer will be loaded with widget mode and without dev.
If you already install custom schema you can check it with the following links:
onframer://https://onframer.io
widget://https://onframer.io
Welcome to the Basic Features section of OnFramer. Here, you'll find a collection of simple, practical examples that demonstrate how to control and manage application windows using OnFramer. From basic window operations like opening, closing, minimizing, and maximizing to more advanced features like transparency control and multi-monitor support, these examples are designed to help you quickly grasp the core functionalities of OnFramer. Whether you're just getting started or need a quick refresher, this section will provide the foundational knowledge you need to build and manage powerful desktop applications.
Soon! We will create an dedicated GitHub repositories for each OnFramer example feature. These repositories will include all the basic scaffolding you need to get started quickly. Each repository will provide a complete setup, including sample code and detailed instructions, making it easier than ever to explore and implement OnFramer's features in your own projects. Stay tuned!
To harness the full power of OnFramer, you can easily control your application windows directly from your web project using JavaScript. By adding a simple JavaScript file to your project, you’ll gain access to a suite of commands that allow you to manage window behavior, such as opening, closing, resizing, and more. This section will guide you through the steps needed to integrate and use these controls, giving you the flexibility to tailor your desktop application’s user experience seamlessly.
<script src="https://cdn.jsdelivr.net/gh/soft2help/onframer-js@v1.0.0-beta/onframer.js" ></script>
OnFramer’s transparency feature allows you to create modern, sleek interfaces. When launched with the --widget flag, transparent mode is enabled by default. Simply control the background and opacity settings to achieve your desired results.
OnFramer’s powerful multi-monitor support allows you to seamlessly manage windows across multiple displays, maximizing productivity and enhancing user experience. Whether you’re developing applications that require spanning content across several screens or need precise control over window placement on different monitors, this section will guide you through all the essential features and techniques. Learn how to detect, position, and manage windows on multiple monitors, ensuring your applications take full advantage of multi-display setups.
OnFramer.sendMessage("MonitorInfo")
.then((monitors) => {
const nScreens = monitors.lenght;
const infoScreens = monitors;
})
.catch((error) => {
console.error("Failed to send message:", error);
});
Response Payload example
[
{
"rcMonitor.left": 0,
"rcMonitor.top": 0,
"rcMonitor.right": 3440,
"rcMonitor.bottom": 1440,
"rcWork.left": 0,
"rcWork.top": 0,
"rcWork.right": 3440,
"rcWork.bottom": 1392
},
{
"rcMonitor.left": 3440,
"rcMonitor.top": 357,
"rcMonitor.right": 5360,
"rcMonitor.bottom": 1437,
"rcWork.left": 3440,
"rcWork.top": 357,
"rcWork.right": 5360,
"rcWork.bottom": 1437
}
]
var monitors = null;
var firstMonitorCenter = null;
var secondMonitorCenter = null;
OnFramer.sendMessage("MonitorInfo").then((infoMonitors) => {
monitors = infoMonitors;
console.log(monitors);
firstMonitorCenter = getMonitorCenter(monitors[0]);
secondMonitorCenter = getMonitorCenter(monitors[1]);
setWindowPosition(firstMonitorCenter);
setWindowPosition(secondMonitorCenter);
});
function getMonitorCenter(monitor) {
let centerX = (monitor["rcMonitor.right"] + monitor["rcMonitor.left"]) / 2;
let centerY = (monitor["rcMonitor.bottom"] + monitor["rcMonitor.top"]) / 2;
return {
centerX,
centerY,
};
}
function setWindowPosition(center) {
let width = $(window).width();
let height = $(window).height();
let top = center.centerY - height / 2;
let left = center.centerX - width / 2;
console.log(top, left, width, height);
OnFramer.sendMessage("Position", `${left},${top},${width},${height}`);
}
onframer --url="https://examples.onframer.io/position/example1" --widget --dev
OnFramer’s Always on Top feature ensures that your application window remains visible above all other windows, providing uninterrupted access and improved usability. Whether you're building productivity tools, floating widgets, or quick-access utilities, this feature guarantees that your content stays in view—regardless of user activity in other apps.