# ANN: Custom Widget recipes for web apps and the new and improved Interact.jl package

**URL:** https://discourse.julialang.org/t/ann-custom-widget-recipes-for-web-apps-and-the-new-and-improved-interact-jl-package/12336
**Category:** Community
**Tags:** package, announcement
**Created:** [July 12, 2018, 4:15pm UTC](https://discourse.julialang.org/t/ann-custom-widget-recipes-for-web-apps-and-the-new-and-improved-interact-jl-package/12336 "2018-07-12T16:15:26Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)
#### Post date: [July 12, 2018, 4:15pm UTC](https://discourse.julialang.org/t/ann-custom-widget-recipes-for-web-apps-and-the-new-and-improved-interact-jl-package/12336/1 "2018-07-12T16:15:26Z")

</div>

This is to announce simultaneously two things:

1. [Widgets.jl](https://github.com/piever/Widgets.jl): a package to create “UI recipes”

2. The imminent release of the new and improved [Interact.jl](https://github.com/JuliaGizmos/Interact.jl)

## Widget recipes

Full documentation is available [here](https://juliagizmos.github.io/Interact.jl/latest/custom_widgets.html). This package provides the `@widget` macro to define and register custom widgets as well as the `@output!`, `@display!` and `@layout!` macro to set the output of a widget, the way it’s displayed and to reorganize the layout.

```julia
using Plots, DataFrames, Interact
@widget wdg function mywidget(df::DataFrame)
    :df = df
    :options = names(:df)
    :select = dropdown(:options)
    :btn = button("Plot histogram")
    @output! wdg ($(:btn); histogram(:df[:select[]])) # when button is pressed, plot the histogram
    @layout! wdg vbox(hbox(:select, :btn), _.output) # define custom layout
end

df = DataFrame(x = rand(1000), y = randn(1000), z = rand(1000).^ 2)
ui = mywidget(df)

```

Also note that with minimal effort this GUI can be improved to accept an `Observable` of a `DataFrame` (meaning when the DataFrame changes, it updates automatically the option list):

```julia
@widget wdg function mywidget(df::Observable{<:DataFrame})
    :df = df
    :options =names($(:df))
    :select = dropdown(:options)
    :btn = button("Plot histogram")
    @output! wdg ($(:btn); histogram($(:df)[:select[]])) # when button is pressed, plot the histogram
    @layout! wdg vbox(hbox(:select, :btn), _.output) # define custom layout
end
df = Observable(DataFrame(x = rand(1000), y = randn(1000), z = rand(1000).^ 2))
ui = mywidget(df)

```

And now if say `df[] = DataFrame(xx = randn(150), yy = 1:150)`, both the plot and the dropdown options will update automatically.

Also note that, even though the above example depends on Interact, it is possible to define these recipes while depending only on the low-dependency Widgets, which is handy if you want to define an interactive recipe for your custom type or analysis function in your own package.

## New and improved Interact

This is a heads up that a new release of Interact is about to get tagged and the new Interact will be quite different from the old version. If you’re afraid that the update will break your code you can pin it for the time being: `Pkg.pin("Interact", v"0.7.2")` (see [this post](https://discourse.julialang.org/t/ann-interactbase-a-redesign-of-interact-to-create-and-style-web-apps-in-julia/11471) for a comparison of the old Interact with the new framework). The most basic things (the `@manipulate` macro) will continue to work and have improved capabilites (like nesting `@manipulate` calls or custom layout) but most other things will need a new syntax.

Interact has been repurposed to become a metapackage containing the following:

- [InteractBase](https://github.com/piever/InteractBase.jl) for interactive widgets in native HTML
- [InteractBulma](https://github.com/piever/InteractBulma.jl) and [InteractUIkit](https://github.com/piever/InteractUIkit.jl) that are two “CSS” backends to give some default style to the widgets
- [Observables](https://github.com/JuliaGizmos/Observables.jl) to create `Observables`, that is references to values that can be updated and have callbacks when updated
- [CSSUtil](https://github.com/JuliaGizmos/CSSUtil.jl) for styling and layouting widgets
- [WebIO](https://github.com/JuliaGizmos/WebIO.jl) to create DOM elements in Julia
- [Knockout](https://github.com/JuliaGizmos/Knockout.jl) for two-way data binding between Julia and Javascript using the knockoutjs library
- [Widgets](https://github.com/piever/Widgets.jl), a low dependency library to define recipes for custom widgets

The advantage of combining all of these packages (they are separate packages but Interact reexport all of them) is twofold:

- users will only need to remember to load one package
- [documentation](https://juliagizmos.github.io/Interact.jl/latest/index.html) is now available in one single place

Hopefully, together these packages create a good toolkit for web app development in pure Julia.

Feedback is welcome!