Custom Renderers

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

Overview

The presentation runtime libraries (@lssm/lib.presentation-runtime-react and@lssm/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 '@lssm/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 @lssm/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