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.

AI index

Custom Renderers

ContractSpec ships with React and React Native renderers. You can build custom renderers for any framework.

Overview

The presentation runtime libraries (@contractspec/lib.presentation-runtime-react and@contractspec/lib.presentation-runtime-react-native) provide hooks and components to render ContractSpec-defined UI like workflows and data views. You can extend these or create custom implementations for other frameworks.

Using the React Renderer

import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
import { MyWorkflowSpec } from './specs';

export function WorkflowPage() {
  const workflow = useWorkflow(MyWorkflowSpec);

  return (
    <div>
      <h1>{workflow.currentStep.title}</h1>
      <WorkflowStepRenderer workflow={workflow} />
      <button onClick={workflow.next} disabled={!workflow.canProceed}>
        Next
      </button>
    </div>
  );
}

Custom Platform Support

To support a new platform (e.g., Vue, Svelte), you would:

  1. Implement the core workflow state machine (from @contractspec/lib.presentation-runtime-core)
  2. Create framework-specific hooks/components for step rendering
  3. Handle validation and submission via the ContractSpec I/O schemas
Back to docs