Stipple is a reactive UI library for building interactive data applications in pure Julia. It uses Genie.jl (on the server side) and Vue.js (on the client).

Stipple uses a high performance MVVM architecture, which automatically synchronizes the state two-way (server -> client and client -> server) sending only JSON data over the wire.

The Stipple package provides the fundamental communication layer, extending Genie's HTML API with a reactive component.

The Stipple ecosystem also includes:

• StippleUI.jl - the UI library for Stipple.jl, providing access to 30+ reactive UI elements (including forms, lists, tables, as well as layout).
• StippleCharts.jl - the charts library for Stipple.jl, providing access to a growing collection of reactive charts.

Stipple can be added from the GitHub repo, via Pkg:

pkg> add Stipple

Add Genie and Stipple first:

pkg> add Stipple
pkg> add Genie

Now we can run the following code at the Julia REPL:

using Genie, Genie.Router, Genie.Renderer.Html, Stipple

Base.@kwdef mutable struct Name <: ReactiveModel
  name::R{String} = "World!"
end

model = Stipple.init(Name)

function ui()
  page(
    root(model), class="container", [
      h1([
        "Hello "
        span("", @text(:name))
      ])

      p([
        "What is your name? "
        input("", placeholder="Type your name", @bind(:name))
      ])
    ], title="Basic Stipple"
  ) |> html
end

route("/", ui)

up()

This will start a web app on port 8000 and we'll be able to access it in the browser at http://localhost:8000

Once the page is loaded, we'll be able to interact with the data and see how it's synced.

We can update the name value from Julia, and see it reflected on the page, at the REPL:

julia> model.name[] = "Adrian" # updating the property in Julia will update the values on the front

Also, on the webpage, we change the name in the input field and confirm that it has been updated in Julia:

julia> model.name[] # will have the same value as what you have inputted on the web page

You can see a quick video demo here: https://www.dropbox.com/s/50t5bqd2zk4ehxo/basic_stipple_3.mp4?dl=0

The Stipple presentation from JuliaCon 2020 is available here (8 minutes): https://www.dropbox.com/s/6atyctgomsqwjki/stipple_exported.mp4?dl=0

The full application is available at: https://github.com/GenieFramework/Stipple-Demo-GermanCredits

The full application is available at: https://github.com/GenieFramework/Stipple-Demo-IrisClustering