Docs

Component Palette

What this screen is for

The palette is the library you build from: pre-configured components for frontends, backends, databases, infrastructure, brokers, DevOps tooling, secrets, monitoring and streaming — plus any custom components your team has defined.

Before you start

To do this You need
Open App Builder the App Builder access permission

Opening it

It is permanently visible on the left of the App Designer tab.

The Component Palette is the library of building blocks for creating applications. It provides pre-configured templates for common services and infrastructure components.

📸 Screenshot Placeholder: The Component Palette. Mark: (1) the search box, (2) the + Custom Component button, (3) the category tabs, (4) the component grid.

Palette Structure

The palette is permanently visible on the left side of the interface and consists of:

  1. Search Box — Filter components by name
  2. Custom Component Button — Create new component templates
  3. Category Tabs — Filter by component category
  4. Component Grid — Draggable component cards

Available Categories

Category Description Components
Frontend Client-side applications Next.js, React, Vue.js, Angular
Backend Server-side services and APIs Laravel, PHP, Node.js, Django, NestJS, FastAPI, Flask
Database Data storage solutions MySQL, PostgreSQL, Percona, Mongo, MariaDB
Infra Infrastructure and networking Redis, Elasticsearch
Message Broker Message queuing systems RabbitMQ, Kafka
DevOps CI/CD and development tools ArgoCD, Argo Workflows
Secrets Secret and credential management Infisical, Vault
Monitoring Observability and alerting Grafana, Prometheus
Streaming Data streaming platforms Apache Pulsar

Use the search box for quick lookup (case-insensitive, matches name or type) or click a category tab to filter the grid. Click “All” to reset the filter.

Creating Custom Components

Define your own component templates when the default palette doesn’t include what you need — for example, internal services or standardized configurations.

Click the ”+ Custom Component” button and fill in:

Field Required Description Example
Name Yes Human-readable name “My Custom API”, “Auth Service”
Type Auto Auto-generated slug from the name (read-only) my-custom-api
Ports No Default port mappings 8080:8080
Category Yes Category for palette organization Select existing or create new

Environment Rules (Optional)

Environment rules auto-populate environment variables when the custom component is connected to another component.

  1. Click ”+ Add Connection Rule”
  2. Select the Target Category (e.g., “database”)
  3. Add key-value pairs for the variables to generate on connection
  4. Click “Create Component”

After creation, the component appears immediately in the palette. Other team members can see and use it.

Deleting Custom Components

Hover over a custom component card to reveal the delete icon. Only the creator can delete a custom component. Applications already using it are not affected.

Scenario

Your team keeps configuring the same internal service by hand.

  1. Build it once on the canvas and get its ports and defaults right.
  2. Click + Custom Component and define it — name, ports, category.
  3. Add environment rules so that connecting it to a database auto-populates the variables it needs. This is the part that saves the repetition; a custom component without rules only saves the drag.
  4. Create it. It appears in the palette immediately, for everyone.
  5. Tell the team it exists. A custom component nobody knows about is used once, by its author.

Only the creator can delete a custom component, and deleting it does not affect applications already using it — so retiring one is safe but leaves existing applications on the old definition.

When it doesn’t work

Symptom Cause How to check Fix
A component you expect is missing A category filter or search term is active The category tabs Click All to reset
A custom component vanished Its creator deleted it — Existing applications are unaffected; recreate it if still needed
You cannot delete a custom component Only its creator can — Ask the creator
Connecting a component generates no variables It has no environment rules The component definition Add connection rules

Next