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.
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.
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
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
If you prefer to write your code in a separate file, create a new module and import it into
To manually execute code, open a new VSCode terminal in the workspace folder and launch a Julia REPL with
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
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
Optional (but useful) VSCode plugins
GenieBuilder should run on Julia v1.6 and up.
For support, join our Discord.