Skip to content
WPF for JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
Granular.BuildTasks.Tests Compatibility - Namespaces Dec 13, 2016
Granular.BuildTasks BuildTasks - GeneratedItems - Remove Oct 2, 2017
Granular.Common.Web Common - Compatibility - Cleanup Oct 2, 2017
Granular.Common Common - Compatibility - Cleanup Oct 2, 2017
Granular.Host.Tests.Web Bridge - 16.3.2 Oct 2, 2017
Granular.Host.Web Common - Compatibility - Cleanup Oct 2, 2017
Granular.Host.Wpf UIElement - Clip Oct 2, 2017
Granular.Presentation.Generic Theme - ButtonChrome - Shared storyboards Mar 24, 2017
Granular.Presentation.Tests.Web Common - Compatibility - Cleanup Oct 2, 2017
NuGet BuildTasks - Application html template - Remove Oct 2, 2017
.gitattributes Initial version Mar 29, 2015
.gitignore NuGet - CreatePackages Dec 13, 2016
Granular.sln NuGet - CreatePackages Dec 13, 2016
Granular.vsmdi Initial version Mar 29, 2015 Version 0.3.0 Oct 2, 2017
License.txt Initial version Mar 29, 2015
Local.testsettings Initial version Mar 29, 2015 Bridge - 16.3.2 Oct 2, 2017

Granular - WPF for JavaScript

Granular is a re-implementation of WPF, compiled to JavaScript, allowing WPF applications to run in the browser (using Bridge.NET C# to JavaScript compiler).


  1. Create a Wpf application, call it WpfApplication1
  2. Add a Class Library to the solution, call it WpfApplication1.Web
  3. Install Granular NuGet package into WpfApplication1.Web
    (from Package Manager Console: Install-Package Granular -ProjectName WpfApplication1.Web)
  4. Build
  5. Open WpfApplication1.Web\bin\Debug\bridge\index.html

A list of common issues can be found here


WPF defines many advanced UI concepts (such as visual / logical trees, layouts, routed events, resources, bindings and many others), and it also naturally supports MVVM and other UI patterns, with Granular we can enjoy all of them in the web.


Granular supports many of WPF features, such as xamls, templates, binding, animations and many others.
A full list of the currently implemented features can be found here

Live demo

GranularPad is a good showcase of the current Granular framework capabilities.
(Don't forget to inspect the visual tree in the DOM :)

A small example of how it works

The following solution contains two projects:

  1. WPF application - This is the project that's being developed and tested, in this case, it contains a window with templated buttons (which incorporates many of WPF capabilities).

  2. Web application - Containing only links to the first WPF application files, it references Granular (instead of WPF) and it's being compiled to JavaScript using Saltarelle.

Visual Studio - Solution window

This is what the WPF application looks like (as you would expect)

WPF application window

And this is what the Web application looks like (exactly the same, except it has a browser around it :)

Web application window

The main advantage of this approach is that the development and testing is done solely in Visual Studio, away from any browser or JavaScript debugger.
Also there is no need to deal with all the html/css and fashionable JS frameworks mess, Granular exposes the WPF strong and well-defined APIs, and the whole development process is much cleaner and faster.

Moving forward

Granular is still under development, and there are a lot of ways it can be moved forward. Any help from developers who are passionate about WPF (or not-so-passionate about the html/css ecosystem) would be much appreciated :)

You can’t perform that action at this time.