Hello World Panel

Start here to create your very first Blueprint! Every blueprint has its own "region". So that means every blueprint is a file that can communicate with others.

After you logged in to Rual Studio, click on "Blueprints" in the topbar. This will lead you to an overview of all your blueprints. That will look like the image below.

Here you will find all blueprints ever created within your cluster. You can make as many blueprints as you like. We won't limit your creativity in any way!

After pressing on "create blueprint" you are redirected to the newly created blueprint.

First you see a menu with all kinds of actions you can start with. For this tutorial we need a page. Select the ui: page action. If for some reason the menu disappears before you select an action, or if you want to add another action in the same blueprint, you can open this menu anytime with a click of the right mouse button somewhere in the blueprint and then choose "selector".



You need to give the blueprint a title so you can find it back easily. You can give it a title by clicking on "title" in the top bar. Give your blueprint the title Hello World Panel

Next add a URL to the page by clicking on the pencil icon.



Type tutorial-helloworld. The full URL will be: (cluster name).rual.dev/tutorial-helloworld.



Now you have set up your page. You can click on "view" in the page action. That will redirect you to the frontend page directly.


You will see "blueprint is not active" in the left corner of the block. That means the blueprint is not activated yet. So your code will not work now. You can activate the blueprint by clicking "Activate" at the right top of the blueprint.


You can deactivate the blueprint anytime.


Now you are all set, you can start building your user interface! On the left of the ui: page block you see "in pins". On the right are "out pins". The user interface components are built from the in pins, so going left from the page block. The color of user interface component blocks is yellow. For this tutorial we are going to build a simple panel with Hello World.

By dragging out the ui component pin, a menu with all ui component blocks will open. Copy all actions in the image below, by selecting them from the menu.

Use the view button in the ui: page block to see the result.

Your first code in Rual studio has been made. Congratulations! Now you can continue with your page in the next tutorial: Button with modal.