OSS-first docs
These docs teach the open system first: contracts, generated surfaces, runtimes, governance, and incremental adoption. Studio shows up as the operating layer on top, not as the source of truth.
Runtime Libraries
The presentation runtime libraries provide the engine for rendering ContractSpec-defined UIs. They handle state management, validation, step navigation, and component rendering for Workflows and DataViews.
Installation
bun add @contractspec/lib.presentation-runtime-reactLibraries
@contractspec/lib.presentation-runtime-core
Framework-Agnostic Core. Contains the state machines, validation logic, and navigation rules for workflows. Can be used to build renderers for any platform (Vue, Svelte, CLI).
@contractspec/lib.presentation-runtime-react
React Bindings. Hooks (`useWorkflow`) and components (`WorkflowStepper`, `WorkflowStepRenderer`) for React Web applications. Integrates with `ui-kit-web`.
@contractspec/lib.presentation-runtime-react-native
React Native Bindings. Optimized for mobile experiences. Handles native navigation integration and uses universal components from `ui-kit`.
Example: React Workflow
import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
import { OnboardingFlow } from './specs/onboarding';
export function OnboardingPage() {
const workflow = useWorkflow(OnboardingFlow);
if (workflow.isComplete) {
return <SuccessScreen data={workflow.result} />;
}
return (
<div className="max-w-md mx-auto py-8">
<h1 className="text-2xl font-bold mb-4">
{workflow.currentStep.title}
</h1>
<WorkflowStepRenderer
step={workflow.currentStep}
onChange={workflow.updateData}
errors={workflow.errors}
/>
<div className="flex justify-end mt-6 gap-4">
<button
onClick={workflow.prev}
disabled={!workflow.canGoBack}
className="btn-ghost"
>
Back
</button>
<button
onClick={workflow.next}
disabled={!workflow.canProceed}
className="btn-primary"
>
Next
</button>
</div>
</div>
);
}Architecture
The runtime follows a "render-loop" pattern:
- Spec: Defines the flow, fields, and validation rules.
- Core: Tracks current step, data state, and validation errors.
- Renderer: Maps spec fields to UI components (Input, Select, etc.).
- User: Interacts with components, updating core state.
- Policy: (Optional) Re-evaluates visibility on every change.