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.

View more

• 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.

View more

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.js

Output:

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\ElaraDemo

Output:

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