Editor Tools

Learn the basic design tools available in the Editor.

The tools panel on the left side of the editor contains a variety of tools to help you out with the basic needs of this UI Editor.

Editor Tools

Cursor Tool

When you open any project in Codelessly, this tool will be selected by default.

The cursor tool allows you to select, move, resize, and interact with nodes on the canvas in general.

Click on the arrow to select cursor tool. Alternatively you can use the keyboard shortcut V to select it.

Rectangle and Oval Tools

This tool allows you to draw a rectangle or oval as the name indicates.

• Rectangle R

• Oval O

Click on the tiny arrow button on the right of the tool to switch between rectangle tool and oval tool. You can also use keyboard shortcuts shown above to do the same.

Once you select the tool, you can hold down your pointer and drag on the root canvas to create the box. The box is created once you release your pointer.

Text Tool

Select the text tool from the tools panel or use the shortcut T to switch to Text tool.

While text tool is selected,

1. You can click anywhere on the canvas to create Text that wraps its content horizontally and vertically.

Creating a wrapping text

2. Click and drag to create Text with your desired fixed size.

Creating Text with desired size.

Canvas Tool

This tool allows you to create screens for your app or website. It behaves like a canvas/frame inside which you can build your UI and then publish it.

You can think of canvas as screens on user facing devices like mobiles, tablets, and laptops. A canvas ideally fills the screen on the device it is running when you publish your app or website.

While Codelessly is completely freeform in nature allowing you to put anything almost anywhere on the root canvas, it is important that you put your final designs in a canvas so that you can publish them later. UI needs to be inside a canvas to be eligible for publishing.

Please read Creating Your First Layout to learn how layouts work in Codelessly and to understand why we have two types of canvases and why they're different.

Select the freeform canvas tool by clicking on this button in tools panel or using the keyboard shortcut C. You can click anywhere on the root canvas to create a canvas for you to get started with or you can click and drag to create a canvas of your desired size just like how other tools work here.

This tool will create a freeform canvas, which allows you to put things inside relative coordinates to the canvas's top-left corner.

To move nodes into to a canvas, just select the node you want to move, then drag & drop it on to the canvas.

Creating a canvas

Note that you can't put a canvas inside another canvas.

Auto Canvas Tool

This tool also creates a canvas but unlike the canvas tool, this will create an auto canvas with rows and columns. This type of canvas allows you to put nodes inside with a relative positioning that is relative to each other rather than the canvas itself.

For example, you can put a node on the right, left, top or bottom of another node just like how rows and columns behave in any design system. While normal canvases can do this too, an auto canvas is best when you want to create responsive UIs right off the bet.

Select auto canvas tool by clicking on this button in the tools panel or using keyboard shortcut A.

Creating Auto Canvas