# Archify Component Types: The Complete Guide to Frontend, Backend, Database, Cloud, and Security Variants

> Explore Archify component types including frontend, backend, database, cloud, and security variants. Understand your architecture options with this comprehensive guide.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-08-10

---

**The Archify component type variants are: `frontend`, `backend`, `database`, `cloud`, `security`, `messagebus`, and `external`.**

These seven values form a strict enum defined in the shared schema and power how Archify categorizes every building block in a system architecture. This article breaks down each **Archify component type variant**, shows where they're declared in the source code, and provides runnable JSON examples you can adapt for your own diagrams.

---

## Where Component Types Are Defined in Archify

Archify centralizes type definitions in [[`archify/schemas/common.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/common.schema.json)](https://github.com/tt-a1i/archify/blob/main/archify/schemas/common.schema.json). The `componentType` property uses a JSON Schema `enum` to enforce valid values across all architecture files.

```json
{
  "componentType": {
    "enum": [
      "frontend",
      "backend",
      "database",
      "cloud",
      "security",
      "messagebus",
      "external"
    ]
  }
}

```

*Source: Lines 20–22 of [`archify/schemas/common.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/common.schema.json)*

The main architecture schema then references this definition when validating component objects. In [[`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json)](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), you'll find components declared with their `type` field constrained by this shared enum.

*Reference usage: Lines 90–92 of [`architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/architecture.schema.json)*

---

## The Seven Archify Component Type Variants Explained

Each **component type variant** carries semantic meaning that determines how Archify renders the element and what relationships it can form with other components.

### `frontend`

Represents user-facing interfaces—web applications, mobile apps, desktop clients, or any surface that end users interact with directly.

```json
{
  "id": "web",
  "type": "frontend",
  "label": "Web App",
  "sublabel": "React UI"
}

```

*Source: Example from [`examples/maka-architecture.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/maka-architecture.architecture.json), line 20*

### `backend`

Encapsulates server-side logic, API services, background workers, and business rule processors that frontend components call upon.

```json
{
  "id": "api",
  "type": "backend",
  "label": "API Service",
  "sublabel": "Node.js"
}

```

### `database`

Covers all persistent storage systems—relational databases, document stores, key-value caches, and search indexes.

```json
{
  "id": "postgres",
  "type": "database",
  "label": "Postgres",
  "sublabel": "SQL store"
}

```

### `cloud`

Represents managed cloud-native services that your architecture consumes rather than hosts directly: object storage, managed queues, CDN endpoints, serverless functions, and IaaS resources.

```json
{
  "id": "s3",
  "type": "cloud",
  "label": "S3 Bucket",
  "sublabel": "Object storage"
}

```

### `security`

Dedicated to authentication, authorization, encryption, secrets management, and other protective infrastructure components.

```json
{
  "id": "jwt-guard",
  "type": "security",
  "label": "JWT Guard",
  "sublabel": "OAuth2"
}

```

### `messagebus`

Event-driven and message-oriented middleware: streaming platforms, pub/sub systems, and queue-based communication layers that decouple producers from consumers.

```json
{
  "id": "trace-bus",
  "type": "messagebus",
  "label": "Trace Bus",
  "sublabel": "Event stream"
}

```

### `external`

The catch-all for anything outside your system boundary: third-party APIs, SaaS providers, manual user actions, or external data sources.

```json
{
  "id": "github",
  "type": "external",
  "label": "GitHub",
  "sublabel": "repo webhook"
}

```

---

## Complete Working Example

Below is a full architecture snippet combining all seven **Archify component type variants** in a realistic web application setup:

```json
{
  "name": "E-commerce Platform",
  "components": [
    {
      "id": "web",
      "type": "frontend",
      "label": "Web Store",
      "sublabel": "Next.js"
    },
    {
      "id": "api",
      "type": "backend",
      "label": "Order API",
      "sublabel": "Go microservice"
    },
    {
      "id": "redis",
      "type": "database",
      "label": "Redis Cache",
      "sublabel": "Session store"
    },
    {
      "id": "cloudfront",
      "type": "cloud",
      "label": "CloudFront",
      "sublabel": "AWS CDN"
    },
    {
      "id": "auth0",
      "type": "security",
      "label": "Auth0",
      "sublabel": "SSO provider"
    },
    {
      "id": "eventbridge",
      "type": "messagebus",
      "label": "EventBridge",
      "sublabel": "AWS events"
    },
    {
      "id": "stripe",
      "type": "external",
      "label": "Stripe",
      "sublabel": "Payment processor"
    }
  ]
}

```

---

## Key Source Files to Reference

| File | Purpose | Direct Link |
|------|---------|-------------|
| [`archify/schemas/common.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/common.schema.json) | Root schema defining all shared enums including `componentType` | [View on GitHub](https://github.com/tt-a1i/archify/blob/main/archify/schemas/common.schema.json) |
| [`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) | Main architecture validation schema referencing component types | [View on GitHub](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) |
| [`examples/maka-architecture.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/maka-architecture.architecture.json) | Real-world example demonstrating multiple component types in practice | [View on GitHub](https://github.com/tt-a1i/archify/blob/main/examples/maka-architecture.architecture.json) |
| [`archify/examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.architecture.json) | Canonical web application reference architecture | [View on GitHub](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.architecture.json) |

---

## Summary

- **Seven strict variants** define all Archify components: `frontend`, `backend`, `database`, `cloud`, `security`, `messagebus`, `external`
- **Centralized definition** lives in [`common.schema.json`](https://github.com/tt-a1i/archify/blob/main/common.schema.json) lines 20–22
- **Schema enforcement** occurs through [`architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/architecture.schema.json) cross-reference
- **Practical examples** appear in [`examples/maka-architecture.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/maka-architecture.architecture.json) and related files
- Every component requires a valid `type` field—invalid values fail schema validation

---

## Frequently Asked Questions

### What happens if I use an invalid component type in Archify?

Archify rejects the architecture file during validation. The JSON Schema `enum` constraint in [`common.schema.json`](https://github.com/tt-a1i/archify/blob/main/common.schema.json) strictly limits `type` to the seven documented values—any deviation triggers a parse error before diagram generation begins.

### Can I extend Archify with custom component types?

Not without modifying the core schema. The `componentType` enum is hardcoded in [`common.schema.json`](https://github.com/tt-a1i/archify/blob/main/common.schema.json). To add variants, you would need to fork the repository and update both the schema definition and any rendering logic that consumes the new type.

### How does Archify visually distinguish different component types?

The schema associates each type with default icons, colors, and connection rules. For example, `security` components typically render with shield styling, while `external` types use dashed borders to indicate boundary crossing. Check the rendering engine in `archify/src/render/` for type-specific styling implementations.

### Where can I see all seven types used together?

The [`examples/maka-architecture.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/maka-architecture.architecture.json) file demonstrates realistic usage of each variant. Additionally, [`archify/examples/web-app.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.architecture.json) provides a cohesive full-system example showing how types interact in a production-grade architecture.