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 our video demo here or check the guide below.

0. Start your server (see “installation and first run” paragraph above)

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

1. Create and start a new Genie Builder app

1.a) In the Genie Builder Apps pane, click on the blue “+” sign to create a new app.

A bar will appear at the top: provide a name for your app and press enter.

1.b) Start your app. After creating the app, a pop-up window will appear asking if you want to run the app. Click yes. Wait until the process is complete.

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

1.c) After starting the app, you’ll be able to see its main files: model (data), views (UI) and layout (look & feel).

2. Build the UI with the no-code editor

Right click on the “views” file and select “open no-code editor”.
(Starting with Genie Builder v0.2, users will be able to open the no-code editor by simply clicking on the “views” file)

3. Drag & drop UI components to build your dashboard

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.

4. Write the backend: data functions, reactive model, handlers function

All code related to data manipulation is in the model file. That includes the data functions, the reactive model to connect with the frontend, and the handlers function.

5. Go back to the no-code editor to set the bindings between the UI & the data model.

In the no-code editor, find the properties symbol on the top right side. Connect the properties of each UI element to the corresponding fields of the reactive model.

6. Run the app locally or deploy on the cloud

To run the app locally on a randomly-chosen port, right click on “GET” and select “Open in Internet Browser”.

For cloud deployment, you can deploy to Heroku by following this guide: https://youtu.be/lko1jgZ3xlw?t=1357.

Genie Builder will soon have one-click deployments, so stay tuned for more updates!

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.