View (view)

Category: frontend | Form: | Symbol: Vi

Define a visual interface for user interaction

View is the no-code, no-build frontend element. It renders declarative UI from a component tree defined in spec (layout, components, bindings, styles, theme). The render operation loads cached HTML from S3 (namespace view-{element_id}); on cache miss it serves a built-in default dashboard. If a template field is set in the spec, it is noted in tracing but the cache path is tried first. View supports real-time updates via WebSocket subscriptions, data bindings to backend elements, and triggers that invoke actor operations on user actions. Use view for forms, dashboards, wizards, and internal tools where you don’t need custom frontend code. Use spa or ssr if you need a full JS framework. The hydrate operation returns the same HTML as render with a _hydrated:true marker for client-side event listener attachment. Build is never required (build_required: false). Common mistake: sending render with no cached HTML and expecting a custom page — you get the default placeholder. Upload your HTML to the element’s S3 namespace first, or set up components.

Guide

Declarative, no-code UI element for forms, dashboards, and wizards.

Overview

View renders HTML from a declarative component tree without requiring a build step. It’s the simplest frontend element — define your layout and components in the spec, and the runtime produces HTML.

How Rendering Works

The render operation (physics/src/physics/impls/view.rs):

1. Checks S3 for cached HTML at view-{element_id}/renders/latest/index.html
2. If cached content is found (non-empty), serves it with an ETag
3. On cache miss, serves a built-in default dashboard page
4. If spec.template is set, it’s logged but the cache path is checked first

The hydrate operation returns identical HTML to render, adding _hydrated: true to the response for client-side event listener attachment.

ETag is computed as the first 16 hex characters of a blake3 hash of the HTML content. Cache-Control is always no-cache.

Configuration

Required Fields

None — view works with zero configuration.

Key Properties

Property	Type	Description
template	string	Reference to template for rendering
layout.type	enum	flex, grid, stack, split, tabs, wizard
layout.direction	enum	row, column
components[]	array	UI component tree (id + type required per component)
bindings	object	Data bindings (inputs, state, computed, actions)
styles.mode	enum	light, dark, auto
theme.preset	enum	default, minimal, vibrant, professional, playful

Component Structure

spec:
  layout:
    type: grid
    gap: md
  components:
    - id: email
      type: text_input
      props:
        label: "Email Address"
      binding: "user.email"
      condition: "isLoggedIn"
    - id: submit
      type: button
      props:
        label: "Save"

Operations

Operation	Description
render	Load cached HTML or serve default. Input: {data: {}}
hydrate	Same as render with _hydrated: true marker

Plus all category operations (build is a no-op for view since build_required: false).

When to Use

• Internal tools — admin panels, dashboards, settings pages
• Forms — data entry, surveys, configuration wizards
• Rapid prototyping — get a UI up without writing frontend code
• Agent-generated UIs — agents can compose components declaratively

When NOT to Use

• Custom JavaScript frameworks → use spa
• SEO-critical pages with dynamic data → use ssr
• 3D/WebGL experiences → use three-d

S3 Storage

• Namespace: view-{element_id}
• Cached render path: renders/latest/index.html

Related

• SPA — For custom JS framework apps
• SSR — For server-rendered pages
• Frontend Category — Shared operations and routing

Relationships

• Attaches to: auth-policy
• Uses: variable, function, sql, document, vector

Capabilities

• declarative: Declarative view definitions
• components: Component library
• data-binding: Reactive data binding
• theming: Theme customization

Properties

Property	Type	Default	Description
template	string	—	Reference to the template to render
entry_point	string	—	Main entry component or file for the view
data_sources	array	—	References to data source elements
layout	object	—	Layout configuration
components	array	—	UI components in the view
bindings	object	—	Data bindings and state management
styles	object	—	Styling configuration
theme	object	—	Theme configuration
responsive	object	—	Responsive design settings
seo	object	—	SEO metadata

Operations

activity

Get /ops/activity | Auth: Read

Get activity events for this element

Scope depends on element capabilities: individual elements query by element_id, project-form elements with activity-scope-members include member activities, circle-level elements with activity-scope-all query the entire circle. Gracefully returns empty list if activities table is missing (old circles).

analytics

Get /ops/analytics | Auth: Read

Get experience usage analytics

Returns usage metrics for the frontend element. Use ?period query param (1d, 7d, 30d, 90d) to specify the time window. Returns views, unique_visitors, avg_session_duration_ms, bounce_rate, and top_paths. Useful for understanding user engagement with the frontend.

asset

Get /ops/assets/{asset_path} | Auth: Read

Serve a static asset from the build output (JS, CSS, WASM, images)

Serves a single asset by path from the build output. Returns binary content with appropriate Content-Type header. Used by the browser to load JS/CSS/WASM referenced in the served HTML. Typically called via /live URLs, not directly by agents.

assets

Get /ops/assets | Auth: Read

List bundled static assets

Lists all static assets from the last build output (JS, CSS, images, fonts). Each asset includes path, type, size_bytes, and content hash for cache busting. Returns total_size_bytes for the whole bundle. Only meaningful after a successful build.

attach

Post /ops/attach | Auth: Read

Attach this experience to a target element

Attaches this frontend to a target element (e.g., browser or user-browser). The target’s contract.yaml must declare this frontend type in attaches. Priority controls ordering when multiple frontends are attached. Returns attachment_id for later detach.

attachments

Get /ops/attachments | Auth: Read

List all modifiers and resources attached to this element

Returns both modifiers (policy enforcement) and resources (data injection) with is_modifier flag to distinguish. Items in the generated MODIFIER_TYPES list are modifiers; everything else is a resource. Includes cascade_policy and version pin info.

batch_stats

Get /ops/batch_stats | Auth: Read

Get per-element statistics for all children of this element

Returns per-child stats plus an aggregate. Most meaningful on compound or manifest form elements (repositories, circles, projects); atoms have no children so the result is an empty children array with a zeroed aggregate. Uses efficient GROUP BY SQL. Weighted averages for eval scores.

build

Post /ops/build | Auth: Admin

Build the experience (compile, bundle, optimize)

Compiles and bundles the frontend via BuildForce. Required for spa, ssr, and three-d before serve works (view doesn’t need this). Pass environment (production default) and clean:true to force fresh build. Artifacts are stored to S3. Returns build_id for async status polling. Vanilla SPAs skip npm entirely — files are collected from workspace/CAS.

build_status

Get /ops/build/{build_id} | Auth: Read

Get build status and logs

Poll this after triggering an async build. Returns status (pending/building/completed/failed), duration_ms, artifact list with sizes, build logs, and error message if failed.

compose

Post /ops/compose | Auth: Execute

Batch add and remove modifiers on this element in a single call

Declarative composition: add modifiers by ref path (slug or path@version) and remove by attachment ID, all in one atomic call on the target element. Each ‘add’ entry resolves the source element, validates topology, attaches with optional priority and cascade policy. Each ‘remove’ entry deletes the attachment row. Returns a summary of what was added and removed. Example: compose({ add: [{ref: “my-prompt”}, {ref: “rate-limit/api@v2”, priority: 50}], remove: [{attachment_id: “uuid”}] })

configure_domain

Post /ops/domain | Auth: Admin

Configure a custom domain for this experience

Maps a custom domain (e.g., app.example.com) to this frontend element. ssl_mode “auto” provisions a Let’s Encrypt certificate automatically. Returns status (pending_verification, active, error) and ssl_status. DNS must point to Triform before verification succeeds.

context

Get /ops/context | Auth: Read

Get connected elements (graph traversal)

Graph traversal showing all connected elements with their relationship type (contains, contained_by, references, referenced_by, attaches, etc.). Use ?depth=N to control traversal depth (default 1) and ?types=actor,data to filter by element types.

create

Post /ops/create | Auth: Write

Create child element

POST to the parent path — element_type goes in the request body, NOT the URL. Both element_type and slug are required and must be non-empty. Name is derived from slug if omitted. Writes to both Git and PostgreSQL. All elements are stored flat under the circle — no intermediate library wrapper rows.

create_preview

Post /ops/preview/create | Auth: Write

Create a time-limited public preview link (no auth required to view)

Generates a shareable preview URL that expires after expires_in_hours (default 24). Anyone with the URL can view the frontend without authentication. Returns the token, full preview URL, and expiration timestamp. Use for stakeholder reviews or demos.

delete

Delete /ops/delete | Auth: Admin

Delete element (soft delete)

Soft delete — sets state to ‘deleted’ but retains the record. Cannot delete elements that have children (has_no_bond precondition) or active runs. Requires admin auth and confirmation.

detach

Post /ops/detach | Auth: Read

Detach this experience from a target element

Removes the attachment between this frontend and a target element. Requires target_id. This is a destructive action — the frontend will no longer be served through that target.

disable

Post /ops/disable | Auth: Admin

Disable element (hides and prevents use)

Idempotent — safe to call on already-disabled elements. Optionally pass a reason string. Disabled elements cannot be invoked or executed. Inverse of enable.

enable

Post /ops/enable | Auth: Admin

Enable element (makes usable and visible)

Idempotent — safe to call on already-enabled elements. Transitions element to ready/enabled state. Cannot enable deleted elements. Inverse of disable.

export_bundle

Get /ops/export/bundle | Auth: Read

Export element as downloadable git bundle

On non-root-namespace elements, returns a binary git bundle. On root-namespace (circle) elements, dispatch hands off to the circle’s own export_bundle op, which returns a multi-element JSON envelope with one base64 bundle per child element — this is intentional, not an error.

get

Get /ops/get | Auth: Read

Get element details

Element is already resolved by the routing layer — this returns the cached element, not a fresh DB query. Use the path /api/{circle}/{slug} to address elements.

get_attached_modifiers

Get /ops/attached | Auth: Read

Get elements that are attached to this experience

Returns modifiers and resources attached TO this frontend (inverse of list_attachments). Includes rate-limit, auth-policy, and other modifier elements that affect this frontend.

hydrate

Post /ops/hydrate | Auth: Read

Hydrate the view for interactivity

Returns identical HTML to render but adds _hydrated:true to the response. This signals the client runtime to attach event listeners for interactivity. Internally calls handle_render then inserts the hydration marker. Use after initial render when you need interactive components (forms, buttons, real-time subscriptions).

import_bundle

Post /ops/import/bundle | Auth: Write

Import git bundle into element

Accepts a base64-encoded git bundle in the JSON bundle_base64 field. Use overwrite=true to replace existing elements with same slug (default skips duplicates). Imported elements get new UUIDs. Returns counts of imported/skipped elements and any errors.

intention

Get /ops/intention | Auth: Read

Get element intention with full inheritance chain

Returns three levels: direct (this element’s intention), inherited (from category and root), and resolved (final merged intention). Useful for understanding an element’s purpose in context of its hierarchy.

list_attachments

Get /ops/targets | Auth: Read

List all elements this experience is attached to

Returns all target elements where this frontend is currently attached. Shows target_id, target_type, priority, and cascade_policy.

navigate

Post /ops/navigate | Auth: Read

Navigate to a route within the SPA (returns index.html for client-side routing)

For SPAs, this is identical to serve — always returns the same index.html regardless of the path parameter. Client-side JavaScript handles route resolution (history API fallback). Do not expect different HTML for different paths. For per-route server rendering, use ssr.

preview

Get /ops/preview | Auth: Read

Generate a preview/screenshot of the experience

Generates an image preview of the rendered frontend. Use query params ?width, ?height, ?path to customize. Returns image_url with an expiration timestamp. Useful for social cards and portal thumbnail previews.

promote

Post /ops/promote | Auth: Admin

Promote element configuration to a target environment

Only for manifest-form elements (projects). Environments advance: dev → demo → live. dev→demo requires member+ role, demo→live requires admin. Freezes member versions at promotion time (creates snapshot). Persists environment config to spec.environments.

readme

Get /ops/readme | Auth: Read

Get element README.md content

Reads README.md from the element’s git repository. Returns empty content (not an error) if no README exists. Always returns markdown format.

readme_update

Post /ops/readme_update | Auth: Write

Update element README.md content

Creates or overwrites README.md in the element’s git repo. Commits to the draft branch. Content must be provided as a markdown string.

remove-modifier

Post /ops/remove-modifier | Auth: Execute

Remove an attached modifier from this element by attachment ID

Removes a modifier/resource attachment by its row ID. The ID comes from the attachments or context API. This is the reverse of attach — called on the target element, not the source.

render

Post /ops/render | Auth: Read

Render the view

Loads cached HTML from S3 (view-{element_id}/renders/latest/index.html). On cache miss, serves a built-in default dashboard page. If spec.template is set, it is logged but cache is still checked first. Returns _html_content with _etag (blake3 hash, first 16 hex chars) and _cache_control: no-cache. The data input is available but not currently used by the default renderer — it’s passed through for custom templates.

restore

Post /ops/restore | Auth: Admin

Restore element to a specific version

Automatically snapshots the current state before restoring (creates a ‘Before restore to vN’ version entry). Writes restored spec to git as .triform/spec.yaml. Git failures warn but don’t fail the operation — DB state is authoritative. Cannot restore deleted elements.

schema

Get /ops/schema | Auth: Read

Get element input/output schema (MCP tools/list compatible)

Returns type-level port schemas from the TypeRegistry — not instance-specific overrides. Includes direction (input/output), required flag, and JSON schema per port. Useful for understanding what data an element accepts and produces.

serve

Get /ops/serve | Auth: Read

Serve the built experience (returns HTML)

Returns the index.html from the latest cached build in S3. Without a prior build, returns a placeholder page. Response includes _html_content, _etag, and _cache_control. For SPAs, this is the only HTML page — all routing is client-side. Prefer /live URLs for public access without API auth.

source

Get /ops/source | Auth: Read

Get any file’s content from the element’s git repository

Reads an arbitrary file from the element’s CAS-backed git tree by its relative path. Same store as readme, just generalized. Path safety: rejects .. traversal, leading /, and null bytes. Use this to view main.py for action elements, asset files for SPAs, etc. Returns empty content (not an error) if the file doesn’t exist.

source_branches

Get /ops/source/branches | Auth: Read

List Source branches for this element

Returns the standard draft/demo/live Source branches, their current commits, and promotion relationships. Use GET /api/{element_path}/ops/source/branches.

source_promote

Post /ops/source/promote | Auth: Write

Promote Source branch forward

Promotes draft to demo or demo to live through the generated element op path. Direct Git pushes to demo/live are blocked by Source policy.

source_repair

Post /ops/source/repair | Auth: Write

Inspect or repair the element Source index

Runs Source repair through the element operation path. Defaults to dry_run=true; set dry_run=false only after reviewing a dry-run report.

source_status

Get /ops/source/status | Auth: Read

Get Source control status for this element

Returns the branch-aware clone URL, checkout commands, current draft commit, child source-link count, portable export summary, Source health, warnings, and auth hints for the addressed element. Use the element-first path: GET /api/{element_path}/ops/source/status.

source_validate

Post /ops/source/validate | Auth: Read

Validate Source branch contents

Validates a Source branch before accepting local Git workflow changes or promotion. Defaults to branch=draft and rejects runtime data, generated output, secret material, and unreadable CAS refs.

stats

Get /ops/stats | Auth: Read

Get aggregate statistics for this element

Health status is computed: error if errors_per_day > 5 or success_rate < 0.8, warning if errors_per_day > 0 or success_rate < 0.95. Firing alerts escalate health to error/warning. Default period is ‘day’. Returns runs_per_day, success_rate, avg_duration_ms, and more.

tree

Get /ops/tree | Auth: Read

Get the element’s position in the graph — ancestors, children, references, and subtree statistics

Uses per-circle ElementGraph cache for O(1) lookups. Returns ancestors (containment chain), children (direct), members (references), referenced_by (reverse refs), attachments, and subtree stats. Default depth is 3, max is 10. Pass ?include_metadata=true for name/state on each node.

update

Patch /ops/update | Auth: Write

Update element

Partial update — send only the fields you want to change. spec, name, and intention are all independently optional. spec MUST be a JSON object when present; deep-merged into the existing spec by default. Empty {"spec":{}} preserves existing spec content but still records a new version (no-op for content, not for version state). To clear/replace the entire spec wholesale send {"spec":{...},"deep":false}. List-typed spec fields use replace semantics (the patch list replaces the existing list, no array merging). Coordinates Git + DB writes. Slug cannot be changed after creation.

update_meta

Patch /ops/update_meta | Auth: Write

Update element metadata (lightweight merge — does NOT bump version or snapshot spec)

Shallow JSONB merge into element.meta. Top-level keys in the provided value replace existing meta values; other keys are preserved. Used for UI metadata like canvas positions, panel state, viewer preferences. Wire-shape op_name is update_meta (distinct from update) so SSE subscribers + the cache auto-invalidator can distinguish lightweight metadata changes from spec edits without inspecting the payload. The MutatingElementStore wrapper stamps this op_name on the lifecycle event emitted by update_element_meta storage calls.

version

Get /ops/version | Auth: Read

Get current version or full history

Returns current version by default. Pass ?history=true for full version history (up to ?limit=N, default 50). Versions are backed by the element_versions table. Every spec update creates a new version entry.

Error Codes

Code	Class	Retryable	Description
VIEW_INVALID_DEFINITION	validation	no	Invalid view definition
VIEW_COMPONENT_NOT_FOUND	not_found	no	Component not found
VIEW_DATA_BINDING_FAILED	internal	no	Data binding resolution failed