Data Element

Coming soon: This feature is not yet available. Please check back soon.

The <data> element declares a data model variable:

<data 
  id="counter"
  type="NUMBER"
  value={0}
  readonly={false}
/>

Props

Prop	Type	Default
`id`	`string`	-
`expr?`	`Expression`	-
`value?`	`any`	-
`type?`	`"STRING" \| "NUMBER" \| "BOOLEAN" \| "JSON" \| "MCP"`	-
`readonly?`	`boolean`	-
`fromRequest?`	`boolean`	-
`defaultValue?`	`any`	-
`schema?`	`object`	-

Examples

Basic Variable

<data id="name" type="STRING" value="John" />

JSON Data

<data 
  id="user"
  type="JSON"
  value={{
    name: "John",
    age: 30,
    roles: ["admin", "user"]
  }}
/>

Dynamic Value

<data 
  id="timestamp"
  type="STRING"
  expr={new Date().toISOString()}
/>

Usage Notes

Declares variables in data model
Can specify type and validation
Can be initialized with values
Can be read-only or mutable

Common Patterns

Form Data

<datamodel>
  <data 
    id="formData" 
    type="JSON"
    value={{
      username: "",
      email: "",
      preferences: {}
    }}
  />
  <data 
    id="validation"
    type="JSON"
    value={{
      errors: [],
      isValid: false
    }}
  />
</datamodel>

Configuration

<datamodel>
  <data 
    id="config"
    type="JSON"
    readonly={true}
    value={{
      apiEndpoint: "https://api.example.com",
      timeout: 5000,
      retries: 3
    }}
  />
</datamodel>

State Tracking

<datamodel>
  <data 
    id="processState"
    type="JSON"
    value={{
      status: "idle",
      progress: 0,
      lastUpdate: null,
      errors: []
    }}
  />
  <data 
    id="metrics"
    type="JSON"
    value={{
      startTime: null,
      duration: 0,
      steps: []
    }}
  />
</datamodel>

Advanced Usage

JSON Schema Validation

<data 
  id="user"
  type="JSON"
  schema={{
    type: "object",
    required: ["name", "email"],
    properties: {
      name: { type: "string", minLength: 2 },
      email: { type: "string", format: "email" },
      age: { type: "number", minimum: 0 },
      roles: {
        type: "array",
        items: { type: "string" }
      }
    }
  }}
  value={{
    name: "John Doe",
    email: "john@example.com",
    age: 30,
    roles: ["user"]
  }}
/>

Dynamic Loading

<data 
  id="userProfile"
  type="JSON"
  fromRequest={true}
  defaultValue={{
    isLoading: true,
    data: null,
    error: null
  }}
/>

Computed Values

<data 
  id="computed"
  type="JSON"
  expr={({state}) => ({
    total: calculateTotal(state.items),
    average: calculateAverage(state.items),
    summary: generateSummary(state.items)
  })}
/>

Data Element

On this page