# \[ANN\] Matte.jl - interactive dashboards written in Julia

**URL:** <https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920>\
**Category:** Package Announcements\
**Tags:** package, announcement, webapps\
**Created:** [March 13, 2020, 9:40am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920 "2020-03-13T09:40:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [March 13, 2020, 9:40am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/1 "2020-03-13T09:40:04Z")

</div>

[![matte-logo](https://global.discourse-cdn.com/julialang/original/3X/e/d/ede7903a240636afaae9b4184c6ff43ae3db1372.png) ](https://angusmoore.github.io/Matte.jl/stable)  
Hi julians, I’m really pleased to announce the release of my first julia package:  
[Matte.jl](http://github.com/angusmoore/Matte.jl)

Matte is a package for creating interactive dashboards in julia, inspired/based on material design. This simple [example of interactive plotting](http://104.154.85.59/mattejl/plotsexample/) shows the basic functionality.

I’m a long-time Shiny user, and that sort of functionality is what I had in mind for Matte.

Give it a try for yourself by installing from the General repository and then creating and running the included `hello_world` app (there are other examples too)

```julia-auto
]add Matte
using Matte, Revise
matte_example("hello_world", "hello_world")
includet("app.jl")
run_app(HelloWorldApp)

```

Navigate your favourite browser to `localhost:8000` / `0.0.0.0:8000` and (after a bit of a lag as julia compiles everything) you should see your brand new app.

You can find documentation [here](https://angusmoore.github.io/Matte.jl/stable).

### Some caveats

![Lifecycle](https://img.shields.io/badge/lifecycle-experimental-orange.svg)  
Matte is very experimental!

I am very much not a web developer, so I apologise to anyone who is and looks at my code. I’m sure it’ll be very ugly and I have done things a totally terrible way.

Matte isn’t well tested – it’s just been me messing around with it. There are likely to  
be many bugs. Please report any you find on [github](https://github.com/angusmoore/Matte.jl/issues)

### Basic structure

Matte apps comprise three key elements:

- A module that defines the app
- A function that creates the UI
- A module that defines the server-side logic

Matte has a simple logic: each function in the server module is an output in the UI. You access the output from these functions by using the function name as the `id` for output elements in the UI. Inputs work similarly: you assign each input in the UI an `id`; you access the value of the input by using its `id` as an argument to a function in the server module.

Let’s make this concrete with an example. Suppose we want to create an app that adds two numbers specified by our users. We define in our server module:

```julia-auto
function my_add(number1, number2)
  number1 + number2
end

```

This relationship is expressed in our app accordingly:

 ![](https://global.discourse-cdn.com/julialang/original/3X/6/d/6ddef6cbfd491e65e2bdcc454a48b576463f64c9.png)

The docs go in to lots more detail, so have a look at those if you’re interested and want  
to learn more: [![](https://img.shields.io/badge/docs-stable-blue.svg)](https://angusmoore.github.io/Matte.jl/stable)

### Acknowledgements

Matte leans _very_ heavily on a whole bunch of great packages – Genie and HTTP on the julia side and the javascript packages Vue and Vuetify.

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 13, 2020, 10:03am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/2 "2020-03-13T10:03:58Z")

</div>

Hello world worked nicely for me, very cool! Ooooo, exciting…!

---

<div class="post-metadata">

**Author:** ![carstenbauer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/carstenbauer/32/4981_2.png) [@carstenbauer](https://discourse.julialang.org/u/carstenbauer)\
**Post date:** [March 13, 2020, 10:14am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/3 "2020-03-13T10:14:42Z")

</div>

Minor note: I realized that the colors in your logo aren’t the official Julia colors, which you can find [here](https://github.com/JuliaLang/julia-logo-graphics). Maybe you want to change that.

---

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [March 13, 2020, 10:24am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/4 "2020-03-13T10:24:22Z")

</div>

Oh thanks, that’s really helpful! I definitely just picked random red green and purple. Will change.

---

<div class="post-metadata">

**Author:** ![Tomas\_Pevny](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tomas_pevny/32/25466_2.png) [@Tomas\_Pevny](https://discourse.julialang.org/u/Tomas_Pevny)\
**Post date:** [March 13, 2020, 11:14am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/5 "2020-03-13T11:14:52Z")

</div>

How this is different from Interact.jl. Does it shares backend?

---

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [March 13, 2020, 11:20am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/6 "2020-03-13T11:20:13Z")

</div>

It doesn’t share code with interact, no.

As I understand interact (though I’m by no means an expert) it’s more flexible and modular. It can be used in notebooks, or in web pages etc. But, as a result, to build a full dashboard is a bit more work (because you have _lots_ of options and control, and have to make more choices). Matte is more like R’s shiny, where it does most of the lifting for you (the cost being that you don’t have as much ability to customise).

---

<div class="post-metadata">

**Author:** ![zgornel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/zgornel/32/217487_2.png) [@zgornel](https://discourse.julialang.org/u/zgornel)\
**Post date:** [March 13, 2020, 2:32pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/7 "2020-03-13T14:32:51Z")

</div>

This looks pretty cool 🙂

---

<div class="post-metadata">

**Author:** ![versipellis](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/versipellis/32/7878_2.png) [@versipellis](https://discourse.julialang.org/u/versipellis)\
**Post date:** [March 19, 2020, 9:49pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/8 "2020-03-19T21:49:02Z")

</div>

This is really awesome! How well does Matte.jl work with background updates of data? As in, could it be used to run a realtime-updating visualization?

I know @essenciary had plans to make dashboard building a part of Genie in the future, are you working with him on that?

---

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [March 20, 2020, 12:29am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/9 "2020-03-20T00:29:23Z")

</div>

That’s a good question, I haven’t experimented with it. I think you should just be able to `update_output` anytime you get a data update and it will ''just work". But it’s not something I’ve tested. I’ve found plots updating to be a bit slow, so if you want really high frequency updates it probably will be a bit too sluggish. But every second or two should be fine.

I haven’t spoken with essenciary about Genie integration, but I’d be happy to explore it. Matte is at this stage just my experiment in what this sort of functionality _could_ look like; keen to keep evolving and exploring options!

---

<div class="post-metadata">

**Author:** ![essenciary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/essenciary/32/210469_2.png) [@essenciary](https://discourse.julialang.org/u/essenciary)\
**Post date:** [March 20, 2020, 7:52am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/10 "2020-03-20T07:52:14Z")

</div>

That is fantastic, I’ll take a look today! Happy to hear Genie helped!  
I’m also actively working on a similar project based on the same stack: Genie + Vue. I’ve actually made a talk proposal for JuliaCon on the topic, fingers crossed!

I’d love to have a chat and cooperate on this! Also, I’m planning on adding some Genie enhancements which will be useful for such apps. One is to make WebChannels work not only over WebSockets but also over AJAX.

---

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [March 22, 2020, 5:45am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/11 "2020-03-22T05:45:44Z")

</div>

That sounds really exciting, hopefully your talk gets up. Absolutely, I’d love to chat about how we could cooperate. I’ll send you a PM and we can figure out the best way forward.

---

<div class="post-metadata">

**Author:** ![tlyim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlyim/32/1915_2.png) [@tlyim](https://discourse.julialang.org/u/tlyim)\
**Post date:** [April 21, 2020, 6:48pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/12 "2020-04-21T18:48:17Z")

</div>

Just curious. Is there anything you are not satisified with R shiny that made you move to Julia to accomplish what you have in mind?

---

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [April 21, 2020, 10:34pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/13 "2020-04-21T22:34:51Z")

</div>

Great question. I would say it wasn’t dissatisfaction with Shiny so much, as with R. I really like using Julia for numerical work that I do, and I thought it would be nice to be able to seamlessly hook a front-end up to that. (Not that I’ve been doing much numerical work of late, but in theory anyway). Matte is born from wanting to be able to unify my analysis and the front-end/dashboard I expose for end users in one language. And for that single language to be Julia, for the simple reason that I like using Julia.

(I should say that I still like R, I use it for a lot of my data wrangling work, I just like Julia better 😀)

---

<div class="post-metadata">

**Author:** ![xiaodai](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/xiaodai/32/15937_2.png) [@xiaodai](https://discourse.julialang.org/u/xiaodai)\
**Post date:** [April 22, 2020, 12:49am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/14 "2020-04-22T00:49:24Z")

</div>

How did I miss this? The name is great!

---

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [April 22, 2020, 11:10pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/15 "2020-04-22T23:10:29Z")

</div>

This looks great and I am keen to try it out, but it does not compile on my machine: (Windows 10, Julia 1.4.0). Missing a path apparently.

```julia
[Info: Precompiling Matte [b0b859e2-eb2e-45cd-bd98-8fc21bfdc9fa]
ERROR: LoadError: InitError: UndefVarError: sorcepath not defined
Stacktrace:
 [1] filter_valid_cachefiles(::String, ::Array{String,1}) at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\pkgs.jl:84
 [2] pkg_fileinfo(::Base.PkgId) at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\pkgs.jl:99
 [3] parse_pkg_files(::Base.PkgId) at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\pkgs.jl:163
 [4] __init__ () at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\Revise.jl:1201
 [5] _include_from_serialized(::String, ::Array{Any,1}) at .\loading.jl:697
 [6] _require_search_from_serialized(::Base.PkgId, ::String) at .\loading.jl:781
 [7] _require(::Base.PkgId) at .\loading.jl:1006
 [8] require(::Base.PkgId) at .\loading.jl:927
 [9] require(::Module, ::Symbol) at .\loading.jl:922
 [10] include(::Module, ::String) at .\Base.jl:377
 [11] top-level scope at none:2
 [12] eval at .\boot.jl:331 [inlined]
 [13] eval(::Expr) at .\client.jl:449
 [14] top-level scope at .\none:3
during initialization of module Revise
in expression starting at D:\Users\paumi69p\.julia\packages\Genie\9ipqT\src\Genie.jl:6
ERROR: LoadError: Failed to precompile Genie [c43c736e-a2d1-11e8-161f-af95117fbd1e] to D:\Users\paumi69p\.julia\compiled\v1.4\Genie\8eazC_fO3aY.ji.
Stacktrace:
 [1] error(::String) at .\error.jl:33
 [2] compilecache(::Base.PkgId, ::String) at .\loading.jl:1272
 [3] _require(::Base.PkgId) at .\loading.jl:1029
 [4] require(::Base.PkgId) at .\loading.jl:927
 [5] require(::Module, ::Symbol) at .\loading.jl:922
 [6] include(::Module, ::String) at .\Base.jl:377
 [7] top-level scope at none:2
 [8] eval at .\boot.jl:331 [inlined]
 [9] eval(::Expr) at .\client.jl:449
 [10] top-level scope at .\none:3
in expression starting at D:\Users\paumi69p\.julia\packages\Matte\nYRds\src\Matte.jl:3
ERROR: Failed to precompile Matte [b0b859e2-eb2e-45cd-bd98-8fc21bfdc9fa] to D:\Users\paumi69p\.julia\compiled\v1.4\Matte\VMBvG_fO3aY.ji.
Stacktrace:
 [1] error(::String) at .\error.jl:33
 [2] compilecache(::Base.PkgId, ::String) at .\loading.jl:1272
 [3] _require(::Base.PkgId) at .\loading.jl:1029
 [4] require(::Base.PkgId) at .\loading.jl:927
 [5] require(::Module, ::Symbol) at .\loading.jl:922'''

```

---

<div class="post-metadata">

**Author:** ![angusmoore](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/angusmoore/32/5654_2.png) [@angusmoore](https://discourse.julialang.org/u/angusmoore)\
**Post date:** [April 22, 2020, 11:56pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/16 "2020-04-22T23:56:43Z")

</div>

Thanks, and thanks for opening an issue on GitHub for it too. This seems to be an upstream issue with Revise (for which I’ve opened a [PR](https://github.com/timholy/Revise.jl/pull/462)). In the meantime, you can try downgrading Revise to v2.6.1 and see if that works:

```julia
]add Revise@2.6.1

```

---

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [April 23, 2020, 1:24am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/17 "2020-04-23T01:24:24Z")

</div>

Yes. That fixed it. Thanks! 😃

---

<div class="post-metadata">

**Author:** ![Juan](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/juan/32/7657_2.png) [@Juan](https://discourse.julialang.org/u/Juan)\
**Post date:** [October 14, 2020, 12:27am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/18 "2020-10-14T00:27:40Z")

</div>

Hello.

How is Matte.jl different from Stipple.jl?

---

<div class="post-metadata">

**Author:** ![liuyxpp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/liuyxpp/32/9870_2.png) [@liuyxpp](https://discourse.julialang.org/u/liuyxpp)\
**Post date:** [October 14, 2020, 2:25am UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/19 "2020-10-14T02:25:33Z")

</div>

How is Matte.jl and Stipple.jl different from Dash.jl? Thanks!

---

<div class="post-metadata">

**Author:** ![Palli](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/palli/32/3380_2.png) [@Palli](https://discourse.julialang.org/u/Palli)\
**Post date:** [October 14, 2020, 2:00pm UTC](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920/20 "2020-10-14T14:00:16Z")

</div>

> Matte is made possible by a range of excellent julia and javascript open source libraries. Of particular note: [Genie.jl](https://genieframework.github.io/Genie.jl/), [Vuetify](https://vuetifyjs.com/) and [Vue.js](https://vuejs.org/).

This makes it in some sense similar to Stipple.jl (and somehow compatible or competing only? easier to change your mind and switch between these two if you made the wrong choice?), also based on Genie.jl (the guy behind it is also behind Stipple), and the former uses Vue too.

Dash.jl is based on React however, not Vue, and to me these are mostly buzzwords, pros and cons explained in another thread, by @essenciary which competes with it. And uses Plotly.jl.

I imagine for simple uses, all three are ok, and similar. For more complex plots/functionality, there might be a difference (and vue or react “plugins” might matter). Besides the technical differences, I guess it’s also about which of these is more mature, and Stipple was updated days ago.

I do see “Matte is still highly experimental.” and it hasn’t been updated in 6 months (except for updated js dependency). Maybe the author realized it was redundant with Stipple?

[Next page](https://discourse.julialang.org/t/ann-matte-jl-interactive-dashboards-written-in-julia/35920.md?page=2)