# \[ANN\]: InteractBase, a redesign of Interact to create and style web apps in Julia

**URL:** https://discourse.julialang.org/t/ann-interactbase-a-redesign-of-interact-to-create-and-style-web-apps-in-julia/11471
**Category:** Community
**Tags:** package, announcement
**Created:** [June 6, 2018, 1:34pm UTC](https://discourse.julialang.org/t/ann-interactbase-a-redesign-of-interact-to-create-and-style-web-apps-in-julia/11471 "2018-06-06T13:34:03Z")
**Posts on this page:** 3
**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: [June 6, 2018, 1:34pm UTC](https://discourse.julialang.org/t/ann-interactbase-a-redesign-of-interact-to-create-and-style-web-apps-in-julia/11471/1 "2018-06-06T13:34:03Z")

</div>

I’m happy to announce the [InteractBase](https://github.com/piever/InteractBase.jl), [InteractBulma](https://github.com/piever/InteractBulma.jl) and [InteractUIkit](https://github.com/piever/InteractUIkit.jl) packages, to build interactive HTML5 widgets in Julia (InteractBulma and InteractUIkit are used to add “styling” to the widgets, using the [Bulma](https://bulma.io) or [UIkit](http://getuikit.com/) CSS frameworks respectively: adding a CSS framework is relatively straightforward and there may easily be more in the future).

## How is it different from Interact?

The [Interact](https://github.com/JuliaGizmos/Interact.jl) package has provided similar functionality (adding widgets from Julia) for a while. This package is different in several ways:

- It’s built on top of [WebIO](https://github.com/JuliaGizmos/WebIO.jl) and therefore works in an Electron window via Blink, in the Juno IDE plot pane and in the browser via Mux, as well as in Jupyter notebook and Jupyter lab (meaning that the same code used in the Juno plot pane or in a notebook can be deployed as a web app)

- The logic is decoupled from the styling, which allows for styling and responsive layout capabilities using existing CSS frameworks. This is an example of a UI designed with InteractBulma:

 ![bulma](https://global.discourse-cdn.com/julialang/original/3X/1/0/1055530604410c873121ddcd45435fea27cd006f.png)

- Any HTML5 component can be used for widgets, which covers a lot of input types (color, date, time, text, number, range, email, password, autocomplete…) as well as custom features from CSS frameworks (accordions, tabs, etc…)

In the future, the Interact package will probably be repurposed to be a wrapper around InteractBase and its various themes (see [PR](https://github.com/JuliaGizmos/Interact.jl/pull/226)).

## A small demo

Here’s a small demo to see the package in action in combination with Plots in a jupyter notebook:

[![](https://global.discourse-cdn.com/julialang/original/3X/6/c/6ca78e114e546ed237ff3f5ff2443c3a8bd7a824.png)](https://vimeo.com/273565899)

And [here](https://piever.github.io/simpleblog/post/sputnik2/) is the link to the blog post describing the package as part of my Google Summer of Code project.

## Acknowledgments

The package benefitted immensely from the mentorship and previous packages of @shashi (in particular, the set of packages from [JuliaGizmos](https://github.com/JuliaGizmos/) organization) and @jobjob who worked on a previous iteration of this redesign of Interact with the package [InteractNext](https://github.com/JuliaGizmos/InteractNext.jl). The future is for InteractNext to be reused as “material design” theme on top of InteractBase.

---

<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: [June 14, 2018, 4:58pm UTC](https://discourse.julialang.org/t/ann-interactbase-a-redesign-of-interact-to-create-and-style-web-apps-in-julia/11471/2 "2018-06-14T16:58:00Z")

</div>

Important update (as this has already caused confusion to some users):

The package [Interact](https://github.com/JuliaGizmos/Interact.jl) (on master branch) is now a metapackage based on WebIO, CSSUtil, Observables, InteractBase/Bulma/UIkit. See the [documentation](https://juliagizmos.github.io/Interact.jl/latest/) for details on how to use it. The most basic functionality (that is to say `@manipulate`) is preserved with the same syntax, whereas more sophisticated usage of the package may break. In particular, as the new framework uses Observables, rather than Reactive, one should call `observe(widget)` rather than `signal(widget)` to obtain an `Observable` whose value will update when the user interacts with the widget.

The documentation already reflects the new (as of now unreleased) version. If you are willing to try the new version already, you can `Pkg.checkout("Interact")` and experiment with it before it gets released, which could be helpful to catch bugs early on in the process / understand which features of Interact that were commonly used are not adequately implemented in the new framework. If on the other hand, you (or a package you are developing) rely on many features of “Interact” and want to make sure your code does not break, it is of course possible to do `Pkg.pin("Interact", v"0.7.2")` or add an upper bound to Interact in REQUIRE.

---

<div class="post-metadata">

### Author: ![Saliha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@Saliha](https://discourse.julialang.org/u/Saliha)
#### Post date: [March 19, 2021, 11:29am UTC](https://discourse.julialang.org/t/ann-interactbase-a-redesign-of-interact-to-create-and-style-web-apps-in-julia/11471/3 "2021-03-19T11:29:51Z")

</div>

Hi,  
I recently joined the JuliaLang community. I am a beginner with the language.  
I am using Interact to build a desktop app. I coudn’t find how to embed images (icons for exemple) on the window app.  
I know we can do it with Tk or Gtk but I would like to use Interact. If you have any clues of information, that will be of great use to me. Thank you very much!
