DEPRECATION NOTICE: This repository will no longer receive updates, it has moved to https://github.com/benjaminsattler/os-window-mono/.
A web component (also known as custom element) based library which provides window decorations from the most common operating systems.
This HTML5 web component allows you to display any HTML in a operating system window on your web page. You can choose between various operating systems and themes (dark mode).
Choose any of the following methods to get started
Run the following command in your command line to add os-window to your project
# for NPM
> npm install --save os-window
# for YARN
> yarn add os-window
Include the JavaScript module in your HTML page
<script type="module" src="node_modules/os-window/main.js"></script>
Or import the module into your JavaScript code
import 'os-window';
This project is also published to the CDN unpkg, which enables you to skip any local module installation when including this module in your webpage:
<!-- Include specific version (recommended) -->
<script type="module" src="https://unpkg.com/os-window@0.3.0"></script>
<!-- Include latest version (not recommended) -->
<script type="module" src="https://unpkg.com/os-window"></script>
For more information have a look at the Installation Guide or the detailled documentation.
Try the latest version of os-window online at https://bit.ly/39Yqb2d!
This example creates a non-interactive window with light macos theme
<os-window
window-title="Random Cat Pic"
>
<img src="https://placekitten.com/250/250">
</os-window>
The next example creates a fully interactive window with dark macos theme
<os-window
hover
interactive
os-theme="mac"
theme="dark"
window-state="maximized"
window-title="Random Cat Pic"
>
<img src="https://placekitten.com/250/250">
</os-window>
Similarly, here are two examples creating windows with light and dark win-xp theme:
<os-window
window-title="Random Cat Pic"
os-theme="win-xp"
>
<img src="https://placekitten.com/250/250">
</os-window>
<os-window
window-title="Random Cat Pic"
os-theme="win-xp"
theme="dark"
>
<img src="https://placekitten.com/250/250">
</os-window>
Finally, here are two examples creating windows with light and dark win-7 theme:
<os-window
window-title="Random Cat Pic"
os-theme="win-7"
>
<img src="https://placekitten.com/250/250">
</os-window>
<os-window
window-title="Random Cat Pic"
os-theme="win-7"
theme="dark"
>
<img src="https://placekitten.com/250/250">
</os-window>
- Browsers:
- IE: not supported
- Edge: Ver. >= 80
- Firefox: Ver. >= 63
- Chrome: Ver. >= 67
- Safari: Ver. >= 10.1
- Opera: Ver >= 41
- switch operating system designs
- currently supported themes:
macos
,win-xp
, andwin-7
- currently supported themes:
- switch between light & dark themes
- create non-interactive or interactive window frames
- use any HTML as window contents
- fully scriptable interface
- listen to events from the window
- dynamically toggle any property (including design and theme)
Find more detailed information in the documentation.
If you have any ideas, just open an issue and tell me what you think.
If you find any bugs, just open an issue and let me know. Or go right ahead and create a pull request.
If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.
This project is licensed under MIT license. You'll find a copy of the MIT license in the file LICENSE.