Skip to main content

Tutorial - Using the Visual Builder

What is the Visual Builder?

The Visual Builder is a feature that can be used to create a user interface directly from your VIKTOR environment. It allows you to quickly put together your desired UI without writing a single line of code.

You can find the Visual Builder under VIKTOR Labs in the main menu of your VIKTOR environment.

In this short guide you will learn how to transfer a blueprint created with the Visual Builder to your Development Workspace. By doing so you will be able to develop your app further. Please make sure that you have activated your account before starting this guide.

  1. Create a new folder for your app

    Add a new folder in your filesystem (e.g. C:\Users\<username>\viktor-apps\my-app) and open it in your code editor

  1. Create app template files

    In the terminal, type the command shown below and hit enter

    viktor-cli create-app --app-type editor

  2. Install and start the app

    We'll do a clean installation of the app's dependencies by running the following command in the terminal. Just be patient, this could take a few minutes.

    viktor-cli clean-start

    If all went well, your app is installed and running in your development workspace:

    INFO    :  __      __ __  __  __
    INFO    :  \ \    / / | | | |/ /
    INFO    :   \ \  / /  | | | ' /
    INFO    :    \ \/ /   | | |  <
    INFO    :     \  /    | | | . \
    INFO    :      \/     |_| |_|\_\
    INFO    :   _______   ____    _____
    INFO    :  |__   __| / __ \  |  __ \
    INFO    :     | |   | |  | | | |__) |
    INFO    :     | |   | |  | | |  _  /
    INFO    :     | |   | |__| | | | \ \
    INFO    :     |_|    \____/  |_|  \_\
    INFO    : VIKTOR connector vX.Y.Z
    INFO    : VIKTOR SDK vX.Y.Z
    INFO    : Connecting to cloud.viktor.ai...
    INFO    : Connection is established:
    INFO    : 
    INFO    :     https://cloud.viktor.ai/workspaces/XXX/app  <--- navigate here to find your app
    INFO    : 
    INFO    : The connection can be closed using Ctrl+C
    INFO    : App is ready

    Do not close the terminal as this will break the connection with your app.

  3. Click 'Copy Blueprint' in the Visual Builder, replace the content of the app.py file with the generated Blueprint and save your file.

  4. Go to your your development workspace to inspect the app you just created with the Visual Builder! Go to the the main menu, select 'Workspaces' and open your Development workspace by clicking the button.