<div align="center">

[][gwt-website] [][teavm-website] [][vertx-website]

<a href="https://webfx.dev"><img src="WebFX.png"/></a>  

[][webfx-discord]

</div>

WebFX

WebFX is a JavaFX application transpiler powered by [GWT][gwt-website] or [TeaVM][teavm-website]. It can transpile a JavaFX application into a traditional self-contained pure JavaScript or WebAssembly web app (with no plugin or server required for its execution in the browser).

For more explanation, please visit the [website][webfx-website].

Graphical demos

<div align="center"> <table> <tr> <td align="center"><a href="https://tallycounter.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/TallyCounter.webp"/><br/>Tally Counter</a> </td> <td align="center"><a href="https://enzoclocks.webfx.dev"> <img src="https://webfx-demos.github.io/webfx-demos-videos/EnzoClocks.webp"/><br/> Enzo Clocks</a></td> <td align="center"><a href="https://demofx.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/DemoFX.webp"/><br/>DemoFX</a> ♪</td> <td align="center"><a href="https://moderngauge.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/ModernGauge.webp"/><br/>Modern Gauge</a></td> </tr> <tr> <td align="center"><a href="https://raytracer.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/RayTracer.webp"/><br/>Ray Tracer</a></td> <td align="center"><a href="https://mandelbrot.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/Mandelbrot.webp"/><br/>Mandelbrot</a></td> <td align="center"><a href="https://cube.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/Cube.webp"/><br/>Cube</a></td> <td align="center"><a href="https://spacefx.webfx.dev"><img src="https://webfx-demos.github.io/webfx-demos-videos/SpaceFX.webp"/><br/>SpaceFX</a> ♪</td> </tr> <tr> <td colspan="4" align="center"> <a href="https://github.com/webfx-demos"> <img width="100%" src='MoreDemos.svg'/> </a> </td> </tr> </table> </div>

Enterprise demo (coming soon)

Modality is the first real-world Enterprise-level WebFX application in development. Here are a few wireframes of the back-office (WebFX will provide all the components required for these UIs):

<table> <tr> <td><a href="https://modality.one/wireframes/Modality-wireframe-01.png"><img src="https://modality.one/wireframes/Modality-wireframe-01-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-02.png"><img src="https://modality.one/wireframes/Modality-wireframe-02-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-03.png"><img src="https://modality.one/wireframes/Modality-wireframe-03-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-04.png"><img src="https://modality.one/wireframes/Modality-wireframe-04-thumbnail.png"/></a></td> </tr> <tr> <td><a href="https://modality.one/wireframes/Modality-wireframe-05.png"><img src="https://modality.one/wireframes/Modality-wireframe-05-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-06.png"><img src="https://modality.one/wireframes/Modality-wireframe-06-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-07.png"><img src="https://modality.one/wireframes/Modality-wireframe-07-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-08.png"><img src="https://modality.one/wireframes/Modality-wireframe-08-thumbnail.png"/></a></td> </tr> <tr> <td><a href="https://modality.one/wireframes/Modality-wireframe-09.png"><img src="https://modality.one/wireframes/Modality-wireframe-09-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-10.png"><img src="https://modality.one/wireframes/Modality-wireframe-10-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-11.png"><img src="https://modality.one/wireframes/Modality-wireframe-11-thumbnail.png"/></a></td> <td><a href="https://modality.one/wireframes/Modality-wireframe-12.png"><img src="https://modality.one/wireframes/Modality-wireframe-12-thumbnail.png"/></a></td> </tr> </table>

Universal Platform Compatibility

WebFX doesn't target only the Web. WebFX applications can be compiled to run natively on 7 platforms from a single code base!

<div align="center"> <table> <tr> <td><img src="html5.svg"/></td> <td><img src="android.svg"/></td> <td><img src="ios.svg"/></td> <td><img src="windows.svg"/></td> <td><img src="apple-dark.svg"/></td> <td><img src="linux-dark.svg"/></td> <td><img src="raspberry-pi.svg"/></td> </tr> </table>

| Platform | 32 or 64-bit JRE | 64-bit Native | |---------------------------------------------|:-----------------------------:|:-----------------------------:| | Desktops (Windows, macOS & Linux) | ✅ | ✅ | | Tablets & mobiles (Android & iOS) | ❌ | ✅ | | Embed (Raspberry Pi) ~ not yet documented | ✅ | ✅ | | Web (Chrome, FireFox, Edge, etc...) | <img height=24 src="JS.svg"/> | <img height=24 src="JS.svg"/> |

</div>

You can check out the demos to see how a GitHub workflow can generate these executables. For example, here is the GitHub workflow for the FX2048 demo and the executables that it generated.

How it works

WebFX compiles your JavaFX application together with the WebFX Kit - a GWT compatible version of OpenJFX.

<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://docs.webfx.dev/webfx-readmes/webfx-kit-dark.svg"> <img src="https://docs.webfx.dev/webfx-how-it-works.svg"> </picture> </div>

For more explanation, please read the [documentation][webfx-docs].

Getting started

The [guide to getting started][webfx-guide] is included in the documentation.

Ecosystem

<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://docs.webfx.dev/webfx-readmes/webfx-project-dark.svg"> <img src="https://docs.webfx.dev/webfx-readmes/webfx-project-light.svg" /> </picture> </div>

Although the WebFX Kit (this repository) is the very heart of the project, there are other important repositories that together comprise the WebFX ecosystem. More info about them is given at the organization level.

Status

WebFX is still in the incubation phase. You can consult our roadmap below. At this stage, we provide only snapshot releases, and breaking changes may occur until the first official release.

<details> <summary>Roadmap</summary>

• [x] Proof of Concept
• [x] Prototype
• [x] [WebFX CLI][webfx-cli-repo]
• [x] WebFX Demos
• [x] [WebFX Website][webfx-website]
• [x] [WebFX Docs][webfx-docs]
• [x] [WebFX Blog][webfx-blog]
• [ ] <img src="plot.svg"></img>
  • [ ] <img src="plot.svg"></img> javafx-base
  • [ ] <img src="plot.svg"></img> javafx-graphics ⓵
  • [ ] <img src="plot.svg"></img> javafx-controls ⓶
  • [ ] <img src="plot.svg"></img> javafx-media
  • [ ] <img src="plot.svg"></img> javafx-web
  • [ ] <img src="plot.svg"></img> javafx-fxml ⓷
• [ ] <img src="plot.svg"></img> Language, Build & Runtime Environments
  • [x]
  • [x] ⓼
  • [ ] <img src="plot.svg"></img> ⓸
  • [x] ⓹
  • [ ] (via J2CL or TeaVM)
  • [ ] (via TeaVM only)
  • [ ] ⓺
  • [ ] (via J2CL or TeaVM)
• [ ] <img src="plot.svg"></img> Ecosystem
  • [ ] <img src="plot.svg"></img> [WebFX Platform][webfx-platform-repo]
  • [ ] <img src="plot.svg"></img> [WebFX Extras][webfx-extras-repo] ⓻
  • [ ] <img src="plot.svg"></img> [WebFX