Reactive variables

This section demonstrates the use of reactive variables that enable real-time, two-way synchronization between the browser UI and the Julia backend. 

Variable A is an input variable (@in), which can be modified both from the browser and the backend. 

Variable B is an output variable (@out), modifiable only by the backend. Any changes made in the browser are not propagated to the Julia code.


Variable C is automatically recalculated whenever A changes. Changes to B won't trigger recalculation.

@in A: {{A}}

@out B: {{B}}

@in C: {{C}}

{{msg}}

Inputs

This section showcases a variety of input components such as checkboxes, radio buttons, text inputs, sliders, range selectors, dropdowns, and buttons. Each input is bound to a reactive variable in the Julia backend, allowing for immediate, real-time interaction between the user interface and the server. 

Button process running: {{trigger}}

Note: the date field has a date picker nested inside of it. To configure its binding in the visual editor, go to the Layers panel and expand the component treee.

Plots

This figure plots the contents of an array as a line chart, configured via the chart editor. The buttons to the right will add new entries to the array or erase its contents.

This figure showcases dynamic generation of plots, where the number of traces is controlled with a slider. The plot is implemented with PlotlyBase in the Julia code, and the traces vector is updated when the slider moves.

Flow control

The Conditional component is a container that shows or hides its contents according to the value of its binding. The same binding can be attached to another control, such as a toggle, to manually control visibility.

The Looper component is a container that loops over an array and replicates the container's contents for each item in the array.

Tabs

Tabs enable the implementation of a tabbed interface where the content displayed changes dynamically based on the selected tab. The tabs are bound to reactive variables in the Julia backend, allowing the server to respond to tab selection changes.

The popup proxy can be added to any nestable component, and it'll make a popup window appear when the user clicks on the component.

Popup content
Table

The StippleTable component has built-in browser-side pagination, server-side pagination, and integrated search text field. Any DataFrame can be displayed as a table by wrapping it into a DataTable object.

Table with server-side pagination

Instead of loading all data at once, this table loads data in chunks as the user navigates through pages. The pagination is managed by an event handler in the Julia code.