# Table of Contents

- [Building with Visual Development | Xano Documentation](#building-with-visual-development-xano-documentation)
- [Email Protection | Cloudflare](#email-protection-cloudflare)
- [Connected | Xano Documentation](#connected-xano-documentation)

---

# Building with Visual Development | Xano Documentation

[](https://docs.xano.com/the-function-stack/building-with-visual-development#the-anatomy-of-the-visual-builder)

The Anatomy of the Visual Builder


------------------------------------------------------------------------------------------------------------------------------------------------------

The builder will be comprised of **up to** three different sections — **inputs**, the **function stack**, and the **response**. Different function stack types may not contain all of the available sections listed below.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FuZXYT4VBZTbmqU66I7ah%252Ffunction%2520stack%2520sample.png%3Falt%3Dmedia%26token%3D7c17ecfd-668f-4865-822d-375ae06216b3&width=768&dpr=4&quality=100&sign=a9f75863&sv=2)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#inputs)

⬇️ Inputs

The inputs are anything that a function stack needs to run. For example, a function stack that logs in a user probably needs a username or email and a password; these would be the inputs.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#function-stack)

🔄 Function stack

This is where all of the magic happens. All of the business logic that is performed lives here.

As you add functions to your function stack, it will suggest next steps based on most popular user activity.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#response)

⬆️ Response

Once the function stack has done its job, it needs to know what to return. This lives in the Response section.

* * *

[](https://docs.xano.com/the-function-stack/building-with-visual-development#what-can-i-build)

What can I build?


---------------------------------------------------------------------------------------------------------------------

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#apis)

APIs

An API is a piece of logic or a workflow that can be called to run from external sources. Think about when you tap a button or link anywhere in an application; there are API calls happening behind the scenes to make sure those taps perform the expected action.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#apis)
📖 [**Learn more about APIs**](https://docs.xano.com/the-function-stack/building-with-visual-development/apis)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#custom-functions)

Custom Functions

A custom function is similar to an API, but it is reusable logic that you can insert into any other function stack. These are useful if you are implementing similar logic in multiple places, and allows you to build and maintain that logic in a single location.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#custom-functions)
📖 [**Learn more about custom functions**](https://docs.xano.com/the-function-stack/functions/custom-functions)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#background-tasks)

Background Tasks

A background task is a workflow that runs automatically based on a schedule that you define.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#background-tasks)
📖 [**Learn more about background tasks**](https://docs.xano.com/the-function-stack/building-with-visual-development/background-tasks)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#triggers)

Triggers

A trigger is a workflow that runs every time something else happens. Xano supports two different kinds of triggers: **database triggers** and **realtime triggers**. Database triggers run every time a certain change is made in a database table, and realtime triggers run based on events in a realtime channel.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#triggers)
📖 [**Learn more about triggers**](https://docs.xano.com/the-function-stack/building-with-visual-development/triggers)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#middleware)

Middleware

Think of middleware as an extra security guard at the entrance and exit of your other function stacks. You can build and deploy middleware to run either before a function stack, or right before it delivers a response. This is useful for things like input or output sanitization, custom error logging, security, and more.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#middleware)
📖 [**Learn more about middleware**](https://docs.xano.com/the-function-stack/building-with-visual-development/middleware)

* * *

[](https://docs.xano.com/the-function-stack/building-with-visual-development#using-the-visual-builder)

Using the Visual Builder


------------------------------------------------------------------------------------------------------------------------------------

You can use both mouse and keyboard navigation when working in the builder.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#adding-functions)

Adding Functions

Click ![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252F2GRA4UN7J9DFG6CubVCJ%252FCleanShot%25202025-03-20%2520at%252012.06.40%25402x.png%3Falt%3Dmedia%26token%3D10b9c8f0-b192-4159-9a51-ed18cfc34196&width=177&dpr=4&quality=100&sign=9c05d50e&sv=2)to add functions to your function stack. You can search for, choose, and favorite functions in the panel that appears on the right.

You can also hover over an existing function and click the **+** sign to add a new function directly under it.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#not-sure-where-to-start)

Not sure where to start?


-----------------------------------------------------------------------------------------------------------------------------------

Xano can [auto-generate basic endpoints](https://docs.xano.com/the-function-stack/building-with-visual-development/apis#auto-generated-apis)
 for you based on your tables.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#creating-a-draft)

Creating a Draft

Once you start editing your API, a draft will automatically be created. Drafts keep track of each micro-change you (or your [team members](https://docs.xano.com/team-collaboration/realtime-collaboration)
) make to a Function Stack called Revertible Changes, which you can easily roll back.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#revertible-changes)

Revertible Changes

Revertible changes show each micro-change, when they were made, what the change was, and who made it.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FWFXz5ufFMwXloMVZElzW%252FCleanShot%25202023-01-05%2520at%252011.13.40.png%3Falt%3Dmedia%26token%3D5a1742e9-80ab-43dd-9393-2e6d0b517866&width=768&dpr=4&quality=100&sign=ea33fa36&sv=2)

To revert a change, select the change you wish to revert back to. You can also revert all changes to revert all changes in the draft and return to the original version of the Function Stack.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FKmW3phYLESdFRFIPQ7TR%252FCleanShot%25202023-01-03%2520at%252010.49.59.gif%3Falt%3Dmedia%26token%3D242f2fc1-ddd7-4f95-b56c-b8411e02790d&width=768&dpr=4&quality=100&sign=7473f632&sv=2)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#compare-differences)

Compare Differences

Before reverting a change, you are able to see a difference comparison snapshot of the previous draft version. This provides context in the differences of the previous version compared to the current draft you are on.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FI2muBBUBb7WdO552loBS%252FCleanShot%25202024-01-16%2520at%252015.43.31.png%3Falt%3Dmedia%26token%3Dfc44fd42-496c-4da0-b643-ee4543c13293&width=768&dpr=4&quality=100&sign=4805fd26&sv=2)

Comparing differences of a previous version to the current draft.

Comparing versions in function stacks using [Lambda Functions](https://docs.xano.com/the-function-stack/functions/apis-and-lambdas/lambda-functions)
 or [Template Engine](https://docs.xano.com/xano-ai/template-engine)
 will show your specific code changes in a specialized format for easy readability.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252F9GQ18kXUDs9jHmhP3BJx%252Fimage.png%3Falt%3Dmedia%26token%3D1c542d25-966d-4556-9ffb-1f7f29c6e90f&width=768&dpr=4&quality=100&sign=ff08adde&sv=2)

Once you're ready to revert, select **Restore this version**.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#testing-a-draft)

Testing a Draft

Testing the API with Run & Debug will use the draft you are editing while calling the API from the front-end will use the live (published version) of the API.

If you have other drafts across your workspace that may interact with the current API or Function Stack you are editing, you can include the relevant drafts while testing in Run & Debug.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FXlPTqc2ZaSzisZ0BWGlI%252FCleanShot%25202023-01-03%2520at%252013.21.46%25402x.png%3Falt%3Dmedia%26token%3D6c178843-4609-4b71-ac39-502a26120b81&width=768&dpr=4&quality=100&sign=ee2ed775&sv=2)

Optionally include relevant drafts during Run & Debug.

[](https://docs.xano.com/the-function-stack/building-with-visual-development#publishing)

Publishing


--------------------------------------------------------------------------------------------------------

Once you're ready to publish the changes, you can simply select publish.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FYDhStYi3KQgEBOmE8YAf%252FCleanShot%25202023-01-05%2520at%252011.15.33.png%3Falt%3Dmedia%26token%3Ddd335e70-df5f-4340-bd0c-d9047043a937&width=768&dpr=4&quality=100&sign=9be9a8a8&sv=2)

You can include a description of the changes you are publishing. Additionally, you have the option to publish other active drafts in your workspace. This might be useful if you are working with multiple workspace objects that interact or depend on one another and need to be certain everything works harmoniously before publishing.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FwzLEf9hgxuviouA7mRm1%252FCleanShot%25202023-01-03%2520at%252013.06.38%25402x.png%3Falt%3Dmedia%26token%3Df8e35d6d-6cdc-48bd-9fe1-63cb017e8a40&width=768&dpr=4&quality=100&sign=6ff42330&sv=2)

Optionally include a description of the published changes. Also, you may publish other drafts in the workspace at the same time.

Once a draft is published, the changes will become live. Meaning if the API endpoint is called from a front-end, the changes will be reflected. Publishing a draft will create a new version of the API Endpoint, which allows you to roll back to previously published versions.

**How do I know if I have drafts to publish?**

You can see drafts available for testing and publish via the Publish dialog on any of your function stacks, or in a notification on the dashboard. If you find that you have made changes but are not seeing the expected results via your front-end, ensure that you have published these changes.

* * *

[](https://docs.xano.com/the-function-stack/building-with-visual-development#working-with-data)

Working with Data


----------------------------------------------------------------------------------------------------------------------

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#filters)

Filters

Filters are additional functions that can be applied directly to other pieces of data in Xano. For example, a filter could be used for a mathematical operation, adjust text formatting, create new datasets from existing data, and more.

To apply a filter, just hover over a value box and click **Add Filter.**

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FhYb0AQE3pR7HZ05Ct4U1%252FCleanShot%25202025-01-13%2520at%252008.07.44.png%3Falt%3Dmedia%26token%3Db6c48739-0916-4047-9694-8a56df6bebc6&width=768&dpr=4&quality=100&sign=c8334db4&sv=2)

To learn more about the available filters in Xano, head to the Filters section [here](https://docs.xano.com/the-function-stack/filters)
.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#dot-notation)

Dot Notation

Dot Notation is used to navigate inside of variables and target specific pieces of data.

Let's use the following object as an example. This object is contained in a variable called **author**.

Copy

    {
        id: 2,
        created_at: 1736364473744,
        name: "john Smith",
        genre: "Western"
    }

Notice how the name field is not capitalized properly. When we edit this variable, we can use **dot notation** to target that name field specifically, like this:

Copy

    author.name

This will tell Xano to keep the rest of the object the same, and only update the `name` field with whatever our adjustments are.

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#auto-complete-subpath)

Auto-Complete / Subpath

[](https://docs.xano.com/the-function-stack/building-with-visual-development#note)

Note


--------------------------------------------------------------------------------------------

We're currently rolling out this feature to all users as part of our next release. If you don't have it yet, you will soon! Hang tight.

Xano keeps an understanding of the contents inside of your variables, which makes targeting data inside them easy.

In this example, we have a customer variable that contains data from our database. If you want to target a specific piece of information inside of that variable, such as the customer's email or name, you can click "x properties" next to the variable name.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FBngXVvL0s4VnwFXAwiAY%252FCleanShot%25202025-04-08%2520at%252011.15.26.png%3Falt%3Dmedia%26token%3Db5f0d2b1-c527-457f-9e49-d4a9f18b248e&width=768&dpr=4&quality=100&sign=369374f&sv=2)

Once you do that, you'll be able to select the data you're looking for.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FkocqAtfDW95zUZC108to%252FCleanShot%25202025-04-08%2520at%252011.16.50.png%3Falt%3Dmedia%26token%3Dedbd0091-6f08-492b-925f-565078e0f541&width=768&dpr=4&quality=100&sign=5742940d&sv=2)

* * *

[](https://docs.xano.com/the-function-stack/building-with-visual-development#copy-and-paste)

Copy and Paste


----------------------------------------------------------------------------------------------------------------

You can copy and paste function stacks in Xano, enabling speedy development across environments.

Copy and paste works inside of your own function stacks, as well as copying and pasting between workspaces and instances.

**Hint**

If you need to reuse logic in more than one place, it is recommended to utilize [Custom Functions.](https://docs.xano.com/the-function-stack/functions/custom-functions)

### 

[](https://docs.xano.com/the-function-stack/building-with-visual-development#selecting-functions)

Selecting Functions

You can hold **Shift** and click on individual functions to select them.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FqBoAVsbMkEw2X20hXhto%252FCleanShot%25202025-03-04%2520at%252020.11.25.gif%3Falt%3Dmedia%26token%3D04ee99e9-7301-45a3-880f-a59ae30d2509&width=768&dpr=4&quality=100&sign=1b34bc73&sv=2)

Alternatively, you can also hold **Shift** and click + drag to select multiple functions.

![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FeN9KMzjuBLmX6yXqV64X%252FCleanShot%25202025-03-04%2520at%252020.12.31.gif%3Falt%3Dmedia%26token%3D9fb994f1-c975-4d8a-a164-f6c32e6616ac&width=768&dpr=4&quality=100&sign=5b8a597d&sv=2)

Click your desired option ![](https://docs.xano.com/~gitbook/image?url=https%3A%2F%2F3699875497-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F2tWsL4o1vHmDGb2UAUDD%252Fuploads%252FuXBedMYeAHTdsZ539nVe%252FCleanShot%25202025-03-04%2520at%252020.13.26.png%3Falt%3Dmedia%26token%3D2e5a1ad4-93c6-4243-9982-a43d1fb5e426&width=300&dpr=4&quality=100&sign=1eb19a33&sv=2) or use keyboard shortcuts for your operating system of choice. **Crtl+C / Crtl+X** on Windows, or **Cmd+C / Cmd+X** on Mac.

When you're ready to paste, you can do so with the same standard keyboard shortcut: **Crtl+V / Cmd+V**.

* * *

[](https://docs.xano.com/the-function-stack/building-with-visual-development#keyboard-navigation)

Keyboard Navigation


--------------------------------------------------------------------------------------------------------------------------

Section

Key

Action

Function Stack

↑ ↓

Navigate Function Stack rows inputs and response values

Function Stack

Shift ↑ ↓

Select multiple rows

Function Stack

A

Add row below highlighted row or inside highlighted empty row

Function Stack

Delete

Delete highlighted row or selection of rows

Function Stack

Enter

Edit the highlighted row

Function Stack

D

Edit the description of highlighted row

Function Stack

Cmd/Ctrl C

Copy the highlighted row or selection

Function Stack

Cmd/Ctrl X

Cut the highlighted row or selection

Function Stack

Cmd/Ctrl V

Paste function stack clipboard contents below currently highlighted row

Function Stack

Cmd/Ctrl Z

Undo last change

Function Stack

Cmd/Ctrl /

Disable/enable highlighted row

Function Stack

F

Convert a selection of rows into a function

Function Stack

G

Group a selection of rows

Function Stack

C

Clone highlighted row

Function Stack

Option/Alt ↑ ↓

Move highlighted row

Inputs and Response

Enter

Edit highlighted input/response

Inputs and Response

Delete

Delete highlighted input/response

Inputs and Response

C

Clone highlighted response

Page Actions

Cmd/Ctrl Z

Undo last action

Page Actions

Cmd/Ctrl Enter

Open the Run & Debug panel

Page Actions

Cmd/Ctrl P

Open the Publish panel\`;

Last updated 2 months ago

Was this helpful?

---

# Email Protection | Cloudflare

Please enable cookies.

Email Protection
================

You are unable to access this email address docs.xano.com
---------------------------------------------------------

The website from which you got to this page is protected by Cloudflare. Email addresses on that page have been hidden in order to keep them from being accessed by malicious bots. **You must enable Javascript in your browser in order to decode the e-mail address**.

If you have a website and are interested in protecting it in a similar way, you can [sign up for Cloudflare](https://www.cloudflare.com/sign-up?utm_source=email_protection)
.

*   [How does Cloudflare protect email addresses on website from spammers?](https://developers.cloudflare.com/waf/tools/scrape-shield/email-address-obfuscation/)
    
*   [Can I sign up for Cloudflare?](https://developers.cloudflare.com/fundamentals/setup/account/create-account/)
    

Cloudflare Ray ID: **95eb1cb7c968058a** • Your IP: Click to reveal 54.237.218.47 • Performance & security by [Cloudflare](https://www.cloudflare.com/5xx-error-landing)

---

# Connected | Xano Documentation

Last updated 1 year ago

Was this helpful?

---