Genie Builder Extension

Genie Builder is a free VSCode plugin that helps you build interactive GUIs for your Genie/Julia apps with no-code. Combine UI elements such as text, sliders, data tables and plots with a drag & drop interface. Create dashboards and data apps without worrying about the front-end.

For bug reports and feature requests, join our Discord. For more info, visit our website and subscribe to our newsletter for updates.

Installation and first run

Install Genie Builder by searching in the VSCode marketplace or by visiting this URL: https://marketplace.visualstudio.com/items?itemName=GenieBuilder.geniebuilder

After installing the Genie Builder plugin you will see 2 new panes in the Explorer sidebar of VSCode:

Depending on your VSCode settings, they might be collapsed.

If that is the case, open them up.

If the "Genie Builder Server" pane indicates that the server is stopped, use the "Start Server" button to launch Genie Builder.

First run

Heads up! It is recommended to restart VSCode right after installing the plugin.

At the first run Genie Builder will take longer, as it will set up its Genie and Julia development environment.

Once the Genie Builder server has been successfully started, you can create your first app:

Congratulations! Follow the Quick Start Guide to see how to build apps with Genie Builder.

Quick start guide

Watch this video demo to get started, or check the guide below.

1. Start the server

Once the server status displays “running”, proceed to the next step.

2. Create and start a new Genie Builder app

In the Genie Builder Apps pane, click on the blue “+” sign to create a new app. After creating the app, a pop-up window will appear asking if you want to run the app.

If you decide to start the app later, simply right click on your app and select “start app”.

To preview the app in a browser, click on the monitor icon to the right of the "GET" tab

3. Add your data analysis code

The appl.jl file in the workspace is the main executable in the Genie app. Add your code to app.jl without deleting the existing imports and @handlersmacro block.

If you prefer to write your code in a separate file, create a new module and import it into app.jl with include("module_name.jl"); using ModuleName.

To manually execute code, open a new VSCode terminal in the workspace folder and launch a Julia REPL with julia --project.

4. Build the UI with the no-code editor

Drag & drop more than 30 UI components onto the white canvas to build your data app. Pick layout components, add text content, data tables, charts, multimedia, form elements (sliders, selectors, buttons), lists, multimedia, widgets, and more.

5. Connect your code to the UI

To make the UI interact with your code, do the following:

a) Expose variables to the UI with the @inand @out macros.
b) Add reactive code inside the @onany macro the @handlers block. This code will be executed when any of the listed variables changes.
c) Bind the UI components to the exposed variables in the no-code editor.

Troubleshooting

Genie Builder runs through a terminal process inside VSCode. So you can check the background jobs run by Genie Builder by looking at the VSCode terminal, at the "Genie Builder" process. If you see any errors in the terminal, please report the bug.

Reporting bugs and sending feature requests

Please report bugs and features requests on Github at https://github.com/GenieFramework/GenieBuilderIssues/issues and/or on the Genie Discord at https://discord.gg/9zyZbD6J7H

Requirements

1. Julia installed in $PATH. Our recommended way to install Julia (cross-platform) is with juliaup https://github.com/JuliaLang/juliaup

2. VSCode

Optional (but useful) VSCode plugins

1. Julia

2. Markdown Julia

Support

GenieBuilder should run on Julia v1.6 and up.

For support, join our Discord.