React Templates & Themes Logo React Templates & Themes
Fable Elmish Electron Material UI Demo screenshot

Fable Elmish Electron Material UI Demo

Author Avatar Theme by Fable compiler
Updated: 5 Jan 2026
113 Stars

Complete boilerplate for Electron apps using Fable and Elmish with hot module reloading, time-travel debugging, etc.

Github

Categories

Scss Material ui Templates & themes

Overview:

The Fable-Elmish-Electron-Material-UI demo is an example of an F# Electron app that combines Fable 2 and Elmish. It serves as a guide for using Material-UI, including JSS/style-as-code, and implementing UX patterns in Elmish. The demo can be used as a scaffolding tool for developing Fable/Elmish/Electron apps.

Features:

  • Hot module reloading for both code and styles
  • Time-travel debugging using Redux DevTools, RemoteDev, and Fable.Elmish.Debugger
  • Single-command development and packaging with FAKE
  • Uses electron-webpack for most of the webpack configuration
  • Uses electron-builder to package the app
  • Uses electron-window-state for remembering window state between launches
  • Uses Devtron for Electron-specific debugging and linting

Installation:

  1. Ensure you have the following requirements installed:

    • .NET Core SDK 3.0
    • Node (for npm)

  2. Clone the repository.

  3. Restore the necessary CLI tools by running the command:

    dotnet tool restore

  4. To run the app locally in “live mode”, execute the following command:

    dotnet fake build -t Dev

    Note: Dev is the default target, so you can also simply run dotnet fake build.

  5. After the app starts, make changes to the renderer project located in /src/Renderer, and the changes will appear in real-time thanks to hot module reloading.

  6. Place static files in the root /static folder as required by electron-webpack. Refer to the code for the “Static assets” page and the helpers in Utils.fs to learn how to use them.

  7. To build the app to an unpacked directory, run:

    dotnet fake build -t DistDir

  8. To build the app to a packed installer, run:

    dotnet fake build -t Dist

Summary:

The Fable-Elmish-Electron-Material-UI demo showcases an F# Electron app built using Fable 2 and Elmish. It provides examples of how to use Material-UI and implements various UX patterns in Elmish. The demo offers features such as hot module reloading, time-travel debugging, and single-command development and packaging. The installation process involves cloning the repository, restoring CLI tools, and running commands to start the app in live mode. The demo also supports building the app to an unpacked directory or a packed installer. Improvement suggestions are welcome through issue or pull request submissions.