Skip to main content
The Component type represents a published UI component ready for execution in native apps.

​
Type Definition

type Component {
  id: ID!
  name: String!
  title: String!
  description: String!
  content: String!
  compiled: String!
  schema: String!
  createdAt: DateTime!
  updatedAt: DateTime!
}

​
Fields

FieldTypeDescription
idID!Unique identifier
nameString!Component name (used in code references)
titleString!Human-readable display title
descriptionString!Component description
contentString!TypeScript source code
compiledString!JavaScript compiled code (ready for execution)
schemaString!JSON Schema defining component props
createdAtDateTime!Creation timestamp
updatedAtDateTime!Last update timestamp

​
Field Details

​
name

The component name is used when referencing the component in code. It follows PascalCase naming convention. 
// In BindJS code, components are referenced by name
ProductCard({ title: "Widget", price: 9.99 })

​
compiled

The compiled field contains JavaScript code that can be executed by the BindJS runtime. This is generated from the TypeScript source during the publish process. 
// Example compiled output
const body = (props) => {
  return VStack([
    Text(props.title),
    Text(`$${props.price}`)
  ])
}

​
schema

The schema field contains a JSON Schema that defines the component’s props: 
{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "description": "Product title"
    },
    "price": {
      "type": "number",
      "description": "Product price"
    },
    "imageUrl": {
      "type": "string",
      "format": "uri",
      "description": "Product image URL"
    }
  },
  "required": ["title", "price"]
}

​
Example Query

query GetComponent($id: ID!) {
  component(id: $id) {
    id
    name
    title
    description
    compiled
    schema
  }
}
Response: 
{
  "data": {
    "component": {
      "id": "comp123",
      "name": "ProductCard",
      "title": "Product Card",
      "description": "Displays product information in a card layout",
      "compiled": "const body = (props) => { ... }",
      "schema": "{\"type\":\"object\",\"properties\":{...}}"
    }
  }
}