Editor Tools
Learn the basic design tools available in the Editor.
Last updated
Learn the basic design tools available in the Editor.
Last updated
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.
When you open any project in Codelessly, this tool will be selected by default.
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.
While text tool is selected,
You can click anywhere on the canvas to create Text that wraps its content horizontally and vertically.
Click and drag to create Text with your desired fixed size.
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.
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.
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.
Select the text tool from the tools panel or use the shortcut T to switch to Text tool.
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.
Select auto canvas tool by clicking on this button in the tools panel or using keyboard shortcut A.
