> For the complete documentation index, see [llms.txt](https://guides.noloco.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.noloco.io/nola/canvas/creating-canvases.md).

# Creating a Canvas

Creating a Canvas works just like any other request to Nola — you describe what you want, and she builds it. There's no separate mode to switch into and nothing to configure up front.

This guide covers building a full **Canvas page**. If you'd rather add a custom section to a page you already have, see [Canvas components](/nola/canvas/canvas-components.md) instead.

## Create a Canvas

1. Open [Nola](/nola/getting-started-with-nola.md) in your app builder.
2. Describe the page you want. Be specific about the data it should show and how it should be laid out.
3. Nola confirms what she's going to build, then starts generating the Canvas.
4. While she works, a placeholder page appears so you can see it taking shape.
5. When she's done, Nola takes you straight to the finished Canvas so you can review it.

{% hint style="success" %}
**The more specific your request, the better the first result.** Instead of "make a dashboard," try "add a Canvas with a sales dashboard: total revenue and deal count at the top, a bar chart of revenue by month, and a table of the ten most recent deals."
{% endhint %}

### Example requests

* "Add a Canvas with an executive summary: KPI cards for revenue, active customers, and churn, plus a line chart of monthly growth."
* "Create a customer portal home as a Canvas, with a welcome banner, the customer's open tickets, and a button to submit a new request."
* "Build a Canvas that shows a project overview — a health summary and upcoming milestones for each active project."

{% @arcade/embed url="<https://app.arcade.software/share/yrDwUAYoTdpxKtXy88hv>" flowId="yrDwUAYoTdpxKtXy88hv" %}

## What happens while Nola builds

Generating a Canvas takes a little longer than a standard no-code action, because Nola is composing the layout, wiring in your data, and pulling in the right components.

* A **placeholder appears immediately** so the page looks intentional while it builds, rather than empty or broken.
* Nola streams her progress into the chat as she works.
* When generation finishes, you're **redirected to the completed Canvas** automatically — no need to hunt for it in the navigation.

## What you can build

Because Nola reuses the platform underneath, a Canvas can combine the things you'd expect from a hand-built page:

* **Live data from your tables** — records, [rollups](/data/collections/rollups.md), and [related records](/data/collections/relationships.md), fetched through Noloco so they respect your data model
* **Charts and visualizations** — [charts](/views/display/charts.md) and custom visual summaries of your data
* **Custom sections** — KPI cards, summary blocks, banners, tabbed layouts, and call-to-action areas
* **Links and navigation** — buttons and links that route to other pages and records in your app

{% hint style="info" %}
Nola builds on Noloco's building blocks and your app's styling rather than reinventing them, so your Canvases look and behave consistently. Some advanced components — [Kanban boards](/views/display/kanban-boards.md), [timelines](/views/display/timeline.md), and the [data grid](/views/display/tables.md) — aren't available in a Canvas yet; use a standard [view](/pages/views.md) when you need one of those.
{% endhint %}

## Ideas to get you started

A Canvas suits almost any custom layout — and it's just as good for small interactive **mini-tools** as it is for rich dashboards. Here are some ideas, grouped by what teams commonly build — use them as a starting point and adapt them to your own data.

### Mini-tools and calculators

Some of the handiest Canvases are small utilities that take a few inputs, apply some logic, and produce an output — a link, a price, a document — which is exactly the kind of interactive behaviour standard pages can't express.

**Generators & builders**

* "Build a link generator: pick a client, plan, and discount code, and produce a prefilled sign-up URL I can send them."
* "Create a proposal generator — choose a client and the services included, and produce a formatted proposal with pricing."
* "Build a quote builder: add line items and quantities and generate a branded quote with totals."
* "Make an email template generator that fills in a client's details and the right message for their stage."

**Calculators**

* "Add a payment calculator where someone enters quantity and billing term and sees the total and monthly cost."
* "Build an ROI calculator that turns a few inputs into a savings estimate to show prospects."
* "Create a commission calculator that works out each rep's payout from their closed deals."
* "Add a margin calculator that shows profit and markup as you change cost and price."

**Checkers & lookups**

* "Build an eligibility checker: answer a few questions and see which plan or service fits."
* "Make a status lookup where a client enters a reference number and sees their order's progress."
* "Create an availability checker that shows open slots for a chosen consultant and week."

### Client portals & reporting

* "Build a client portal home that shows each client their active projects, latest updates, and shared documents."
* "Create a client reporting dashboard with project health, budget status, and upcoming milestones."

### Executive & leadership dashboards

* "Add a Canvas with an executive summary: revenue, active customers, and churn as KPI cards, plus a chart of monthly growth."
* "Build a project portfolio overview for leadership, with each project's status, owner, and risk level."

### Onboarding & delivery workspaces

* "Create a client onboarding workspace showing onboarding status, upcoming tasks, key stakeholders, and required documents."
* "Build a project delivery workspace grouped by team, with each project's milestones and deadlines."

### Operations

* "Create a resource planning page grouped by consultant and availability."
* "Add a ticket triage view that surfaces the highest-priority open tickets first."
* "Show projects at risk first, with a health score for each."

{% hint style="success" %}
Every one of these is built on the data, permissions, and processes you already have — so a client portal only ever shows each client their own records, and an internal dashboard respects your team's [roles](/users-and-permissions/user-roles-and-permissions.md).
{% endhint %}

## Building good Canvases, step by step

Just like the rest of your app, a Canvas comes together best when you build incrementally rather than trying to one-shot a complex screen.

1. **Start with the structure.** "Add a Canvas with three KPI cards and a chart below them."
2. **Layer in detail.** "Add a table of recent orders under the chart."
3. **Refine the specifics.** "Group the chart by month and make the KPI cards blue."

Each request builds on the last, and you can [target individual parts of the Canvas](/nola/canvas/editing-canvases.md) to fine-tune them without regenerating the whole thing.

## Next steps

Once your Canvas exists, learn how to refine it and control who sees it:

{% content-ref url="/pages/T3oRwEaHeuXCakVTGeqb" %}
[Editing a Canvas](/nola/canvas/editing-canvases.md)
{% endcontent-ref %}

{% content-ref url="/pages/tPyvzlaISWStg0LRdl0O" %}
[Configuring a Canvas](/nola/canvas/configuring-canvases.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://guides.noloco.io/nola/canvas/creating-canvases.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.