Homepage

Your first page

When you access your system for the first time, you'll see a prompt to add your first Artboard, which is where the graphical elements of your page will be placed.

Click the prompt and add your first Artboard.

It's likely your Artboard will be too large for your screen. To zoom out and comfortably position your camera, hold spacebar to turn the Drag Tool on, and use the mouse scroll wheel to zoom in/out, and click and drag to pan.

Creating your first Block

The Block is the most basic graphical element. To add a new Block, click the Block tool in the top bar to activate it.

Click and drag to draw blocks in your Artboard.

Reactivate the Selection tool in top bar (hotkey: V).

Click your block to select it, if it isn't selected already, and you'll notice that the Inspector, the right-hand panel, will show all the parameters of the selected block.

Let's change the block's background. Look for the parameter Fill in the Inspector and select another color.

Fill the Text parameter with whatever you like. To emphasize the text, increase the font size by setting Text Size to 32.

To save your changes unselect the block by clicking your Artboard.

It's a good practice to check how your Artboard is, to do that, click on the Preview button under the Artboard's name.

Result:

Your first Application

We'll create an Application to link what you're building with a valid web address.

To add an Application, double click the Builder background. A menu will open, click on the Application card.

Select your Application, using the inspector we'll configure two parameters: Domain and Entry Point.

1. Set Domain to app.
2. To configure Entry Point, enable it by clicking on the circle next to its name. A control with two inputs should appear, on the first one, Component, select data2-core-primitives@Artboard, and on the second one, select the Artboard that was just created, its name should be New Artboard since we didn't modify it.

Unselect the Application to save it.

To verify if it's working, click on the Play button and select your Application.

Now, we have a home page!