Elara enables creating a Windows/MacOS like window manager experience inside a web browser. This JavaScript library is written with performances and compatibility in mind. No third-party libraries or frameworks are needed to use Elara.
Open the LIVE DEMO to try Elara yourself.
Scroll down for some screenshots.
The demo site is hosted using GitHub pages. Running Elara requires no back-end code besides static file hosting.
- Move windows around the screen.
- Resize windows from all sides.
- Maximize/Minimize/Close windows.
- Dock windows on the sides or in the corners of the screen.
- Double click the top of the window to maximize it.
- Select windows with the taskbar on the bottom of the screen.
- Switch between unlimited workspaces, each with their own set of active windows.
- Grab windows to bring them to the top level.
- Animations and smooth movement.
- Split windows, cascade windows, maximize/minimize/show all.
- Supports all major web browsers.
- Can run directly on Electron, CEF and other Web standards-based environments.
- Technically works, but it is not very useful in mobile web browsers.
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Bundling the Elara code into a single Javascript and CSS file with Webpack requires Node.js. Install Node.js and run the command below to bundle Elara. The files that can be used for distribution will be placed in the /dist directory.
npm run build
Grab the files from the /dist directory if you want only to use Elara without modifying it.
This project uses ESLint to ensure a consistent coding style. The rules are a minor extension on the Airbnb rules. Use this command to run ESLint:
npm run lint
Use
eslint --fix ./src/for automated fixing (where possible).
Please create a new issue if you encounter any issues with this project.
Contributing to the project is welcome and appreciated. If you would like to contribute, feel free to create a pull request or bug report. Code contributors will be listed in the README.
 |
 |
 |
 |
The Elara library itself does not require any backend to work. However, just opening index.html on your local system will not work properly. This repository contains 3 implementations of simple servers to try or test Elara. Each server is written in a different programming language. Please use the server implementation you prefer. Use the online live demo described earlier in this document if you just want to try the last stable version of Elara. The server implementations are written in:
- Node.js
- ASP.NET Core
- Go
Command:
node demo\nodejs\server.jsOutput:
Routes:
"/" ->: D:\GitHub Workspace\elara\demo\shared\index.html
"/dist/*" ->: D:\GitHub Workspace\elara\dist
"/*" ->: D:\GitHub Workspace\elara\demo\shared
Elara demo server running at http://127.0.0.1:3000/
TIP: Press Ctrl+C to shut down.
Command:
dotnet run --project .\demo\aspnetcore\ElaraDemoOutput:
info: Microsoft.Hosting.Lifetime[0]
Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: D:\GitHub Workspace\elara\demo\aspnetcore\ElaraDemo
TIP: Press Ctrl+C to shut down.
Command:
cd demo/go
go build server.go
.\server.exe
Output:
2020/03/07 13:50:14 Listening on :3500..
TIP: Press Ctrl+C to shut down.
Some of the icons used in the demo are from the Feather icon pack. Feather is licensed under the MIT License.
- Website: feathericons.com
- GitHub: feathericons/feather
An useful tool to generate browser support tables in markdown format. This project is licensed under the MIT License.
- Website: godban.github.io/browsers-support-badges/
- GitHub: godban/browsers-support-badges