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.

Cursor Tool

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

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

While text tool is selected,

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

  1. Click and drag to create Text with your desired fixed 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.

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.

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.

Last updated