🛠 Building in the Editor

A blank canvas. Scared? Don't be. :)

The Dynaboard Editor features a drag-and-drop visual builder for your apps, called the canvas.

Here, you can compose your interface by inserting Canvas Nodes onto the canvas. These nodes are things like buttons, containers, text inputs and more, each with a rich set of functionality.

The general workflow when beginning a Dynaboard project is to first design your app using Canvas Nodes, rearrange the app to look roughly like how you want it to, then go through each node and connect it to other nodes to add dynamism.

Inserting Nodes

Insert

At the top of Dynaboard Editor, you'll see a handful of icons for quickly inserting nodes, and a + icon to see all available nodes. You can drag nodes directly out of the header and onto the canvas.

Your nodes will snap to a 16x16 grid by default. You can nudge the nodes around for finer adjustments using the arrow keys.

Drag & Resize

Drag

Use the Select Tool, Canvas nodes can be dragged by first clicking on them to select, then dragging them with your mouse. They can be moved anywhere on the canvas.

If you drag from an edge or corner, you'll also be able to resize any canvas node to your liking, as long as the element has a fixed width mode/height mode (the default).

Deselecting

Deselect

Use the Select Tool, clicking anywhere on the page will deselect any nodes that you've selected.

Interact

Interact

By default, you will have the Select Tool active to drag and resize nodes.

You can interact with the nodes themselves (such as toggling a button) by switching to the Interact Tool in the toolbar, or by holding down ⌘. You can switch back to the Select Tool in the toolbar by releasing , or clicking V.