Genie Builder ExtensionGenie 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 runInstall 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 runHeads 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 guideWatch this video demo to get started, or check the guide below. 1. Start the serverOnce the server status displays “running”, proceed to the next step. ![]() 2. Create and start a new Genie Builder appIn 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 codeThe ![]() 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 editorDrag & 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 UITo make the UI interact with your code, do the following: a) Expose variables to the UI with the ![]() ![]() TroubleshootingGenie 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 requestsPlease 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
Optional (but useful) VSCode pluginsSupportGenieBuilder should run on Julia v1.6 and up. For support, join our Discord. |