> ## Documentation Index
> Fetch the complete documentation index at: https://docs.saasio.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pages & API Routes

> Learn how to create the fundamental structure of your Saasio application by adding pages for your user interface and API routes for your backend logic.

***

Every application you build in Saasio is composed of two fundamental building blocks. Understanding the distinct role of each is the key to creating a powerful, full-stack application.

<CardGroup cols={2}>
  <Card title="Pages: The User Interface" icon="file-lines">
    Pages are what your users see and interact with—like a homepage, a
    dashboard, or a profile section. They are the visual **front-end** of your
    application.
  </Card>

  <Card title="API Routes: The Backend Logic" icon="server">
    API Routes are the invisible **backend**. They are server-side endpoints
    that handle data, process requests, and communicate with your database or
    other services.
  </Card>
</CardGroup>

***

## Supported Features: Dynamic & Nested Routing

Saasio fully supports the same modern routing patterns found in frameworks like Next.js. This includes:

### **Dynamic Routes**

You can define dynamic URL segments using brackets. These work for both **pages** and **API routes**:

Examples:

* `/user/[id]`
* `/blog/[slug]/comments/[comment-id]`
* `/product/[product_id]/specs`

Dynamic segments let you build flexible, data-driven paths without needing to hardcode all possible variations.

### **Nested Routes**

Routes can be deeply nested to match complex application structures.

Examples:

* `/dashboard/settings/security`
* `/user/[id]/posts/[post-id]`
* `/shop/[category]/items/[item-id]`

Saasio automatically converts your folder-like structure into the correct routing hierarchy and resolves dynamic parameters at runtime.

### Accessing Dynamic Parameters

When working with dynamic routes, Saasio automatically extracts the values from the URL and makes them available inside your workflows.

You can access them using:

* **Page Param** — when you are inside a **Page**\
  Use this data source to read the dynamic segment values of the current page URL.

* **Route Param** — when you are inside an **API Route**\
  Use this data source to read dynamic values coming from the API request path.

Examples:

* A page at `/user/[id]` accessed via `/user/42`\
  → `id` = `"42"`

* An API route at `/posts/[post-id]/comments/[comment-id]`\
  accessed via `/posts/88/comments/12`\
  → `post-id` = `"88"`\
  → `comment-id` = `"12"`

These dynamic parameters can then be used in any workflow action—such as database queries, conditions, branching logic, or generating API responses.

<Note>
  Dynamic parameters work everywhere: regular pages, nested pages, API routes,
  and deeply nested structures.
</Note>

***

## Pages: Building Your User Interface

Your project's pages form the map of your application. When you create a new project, Saasio automatically includes two essential, non-deletable pages:

* **Home (`/`):** The default page users land on when they visit your main URL.
* **404 (`/404`):** The "Not Found" page shown when a user tries to access a URL that doesn't exist.

Here’s the step-by-step process for adding new pages to your application.

<Steps>
  <Step title="1. Navigate to the Pages Tab">
    In the left panel of the Visual Editor, ensure the **Pages** tab is selected. This area lists all the pages in your project.
  </Step>

  <Step title="2. Create a New Page">
    Click the **`+`** icon at the top of the pages list. This action opens a
    prompt to name your new page.
  </Step>

  <Step title="3. Enter the Page Name">
    Provide a clear, simple name for your page. This name will automatically become its URL path. For example:

    * A page named `pricing` will be accessible at `your-domain.com/pricing`.
    * A page named `about-us` will be accessible at `your-domain.com/about-us`.

    <Frame caption="Creating a new page in the Saasio editor by providing a name.">
      <img alt="Creating a new page in the Saasio editor by providing a name." src="https://mintcdn.com/saasio/wTKOmNePNtLfNdC4/images/create-page.png?fit=max&auto=format&n=wTKOmNePNtLfNdC4&q=85&s=e4fecd0708a6e04c177a375dbbaf94a8" style={{ borderRadius: "8px" }} width="492" height="200" data-path="images/create-page.png" />
    </Frame>

    <Note>
      Once created, you can click on any page in the list to load it onto the
      central canvas and begin designing its layout and content.
    </Note>
  </Step>
</Steps>

***

## API Routes: Powering Your Backend

API Routes are your application's connection to the server. They are essential for any task that requires secure or private logic, such as fetching user data, processing a payment, or connecting to another company's API.

Here's how to create one.

<Steps>
  <Step title="1. Navigate to the API Routes Tab">
    In the left panel, switch from "Pages" to the **API Routes** tab.
  </Step>

  <Step title="2. Create a New API Route">
    Click the **`+`** icon to open the API route configuration dialog.
  </Step>

  <Step title="3. Define the Route Path and Method">
    Every API route needs two critical pieces of information:

    * **Path Name:** The unique URL for your endpoint (e.g., `/users`, `/products`). This is the address that your application (or other services) will call.
    * **Method:** The HTTP method the route will respond to. This defines the type of action the route performs:
      * `GET`: **Retrieve Data.**
      * `POST`: **Create New Data.**
      * `PUT`: **Update Existing Data.**
      * `DELETE`: **Remove Data.**

    <Frame caption="Configuring a new API Route with a path and HTTP method.">
      <img alt="Configuring a new API Route with a path and HTTP method." src="https://mintcdn.com/saasio/wTKOmNePNtLfNdC4/images/create-route.png?fit=max&auto=format&n=wTKOmNePNtLfNdC4&q=85&s=00f92184994b4ed3d30b6e2d055baa7b" style={{ borderRadius: "8px" }} width="497" height="298" data-path="images/create-route.png" />
    </Frame>
  </Step>
</Steps>

### Building API Route Logic

After creating an API Route, you must define what it does. Select the new route, then click the **Logic** tab in the top navigation bar. This opens the workflow editor for that route.

<Warning>
  **Critical Rule: Always End Your Workflow with "Route Send Response"**

  An API route's only job is to receive a request and send a response. The **`Route send response`** action is how you send that response.

  * Every path in your workflow **must** end with this action.
  * Both branches of any **Conditioner** must end with a separate `Route send response`.

  Failing to do so will cause the client request to hang and eventually time out.
</Warning>