Skip to main content

​
Components

Components are the fundamental building blocks of Metabind, defining reusable elements that can be used to create and render content across multiple platforms. Components can be view components that define reusable UI elements or layout components that define the structure for entire content types.

​
Component Types

View Components

Standard UI components for displaying content. Examples: ProductCard, ArticleParagraph, HeroImage

Layout Components

Define structure for entire content types. Examples: ArticleLayout, ProductPageLayout

​
Key Concepts

ConceptDescription
CollectionsOrganizational groups for components in the CMS UI
Status ManagementComponents maintain draft and published status
Version ControlVersions are created when components are included in packages
Asset BindingComponents can have bound assets included in packages
Schema GenerationJSON Schema auto-generated from properties() function

​
Component Object

​
Fields

FieldTypeDescription
idstringUnique identifier (UUID)
namestringDisplay name (unique within project)
titlestringDisplay title extracted from metadata() function
descriptionstringMarkdown description from metadata() function
collectionIdstringParent collection ID (null for root collection)
versionnumberVersion number (set when published in a package)
lastPublishedVersionnumberLast published version (null if never published)
typestringComponent type (view or layout)
statusstringStatus (draft, modified, published, or deleted)
contentstringComponent source code (TypeScript)
compiledstringAuto-generated JavaScript (read-only)
schemaobjectJSON Schema from properties() function
metadataobjectAdditional metadata
metadata.authorstringCreator of the component
metadata.tagsstring[]Component tags
metadata.packageVersionsstring[]Package versions containing this component
createdAtstringCreation timestamp (ISO format)
updatedAtstringLast update timestamp (ISO format)

​
Example View Component

{
  "id": "c123",
  "name": "ProductCard",
  "title": "Product Card",
  "description": "Product display card with image, title, and pricing.",
  "collectionId": "coll123",
  "version": null,
  "lastPublishedVersion": null,
  "type": "view",
  "status": "draft",
  "content": "const metadata = () => ({ title: 'Product Card' });\nconst properties = () => ({ title: PropertyString({...}) });\nconst body = (props: ComponentProps) => { return VStack([...]) };",
  "compiled": "const metadata = () => ({ title: 'Product Card' });\nconst properties = () => ({ title: PropertyString({...}) });\nconst body = (props) => { return VStack([...]) };",
  "schema": {
    "type": "object",
    "properties": {
      "title": { "type": "string", "description": "Product name" },
      "price": { "type": "number", "minimum": 0 }
    },
    "required": ["title", "price"]
  },
  "metadata": {
    "author": "[email protected]",
    "tags": ["product", "card"]
  },
  "createdAt": "2024-03-20T10:00:00Z",
  "updatedAt": "2024-03-20T10:00:00Z"
}

​
Example Layout Component

{
  "id": "c124",
  "name": "ArticleLayout",
  "title": "Article Layout",
  "description": "Standard article layout with header, body, and metadata.",
  "collectionId": "coll123",
  "version": 2,
  "lastPublishedVersion": 2,
  "type": "layout",
  "status": "published",
  "content": "const body = (props: ComponentProps, children: Component[]) => { return VStack([Header(props), ...children]) };",
  "schema": {
    "type": "object",
    "properties": {
      "heroImage": { "type": "string", "format": "uri" },
      "author": { "type": "string" }
    }
  },
  "metadata": {
    "author": "[email protected]",
    "tags": ["layout", "article"],
    "packageVersions": ["1.0.0", "1.1.0", "2.0.0"]
  },
  "createdAt": "2024-03-20T10:00:00Z",
  "updatedAt": "2024-03-20T10:00:00Z"
}

​
TypeScript and Compilation

When a component is saved, the TypeScript code in the content field is automatically compiled to JavaScript and stored in the compiled field. 
// TypeScript source (content field)
const body = (props: ComponentProps, children: Component[]) => {
  return VStack({ spacing: 12 }, [
    Text(props.title).font('headline'),
    props.description ? Text(props.description) : null
  ]);
};

// Compiled JavaScript (compiled field - read-only)
const body = (props, children) => {
  return VStack({ spacing: 12 }, [
    Text(props.title).font('headline'),
    props.description ? Text(props.description) : null
  ]);
};

​
Schema Generation

Components with a properties() function automatically have their schema extracted: 
// Component properties definition
const properties = () => ({
  title: PropertyString({
    title: 'Title',
    description: 'Main heading text',
    validation: { required: true, maxLength: 100 }
  }),
  price: PropertyNumber({
    title: 'Price',
    validation: { min: 0, max: 10000 }
  })
});

// Generated schema (stored in component.schema)
{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "description": "Main heading text",
      "maxLength": 100
    },
    "price": {
      "type": "number",
      "minimum": 0,
      "maximum": 10000
    }
  },
  "required": ["title"]
}

​
Base URL

All component endpoints use this base path: 
/v1/organizations/:organizationId/projects/:projectId/components