Skip to main content

Renderer Overview

The @mieweb/forms-renderer package provides a lightweight, flexible solution for displaying questionnaires and collecting user responses.

What is the Renderer?​

The renderer is a display-only component that takes a form schema (JSON or YAML) and renders it as an interactive form. It handles:

  • Field Rendering - Displays all field types (text, radio, check, rating, etc.)
  • State Management - Tracks user responses and form state
  • Conditional Logic - Shows/hides fields based on enableWhen rules
  • Validation - Enforces required fields
  • Get Response - Get current answers as a QuestionnaireResponse

Live Demo​

Try out the renderer with a full interactive demo:

Interactive Renderer Demo

Experience the full-featured renderer with a sample patient health survey.

Launch Renderer Demo →

Integration Options​

The renderer supports three integration methods:

React Component​

Use in React applications as a standard component:

import { QuestionnaireRenderer } from '@mieweb/forms-renderer';

<QuestionnaireRenderer formData={formSchema} onChange={handleChange} />

Requirements: React 18+ and React DOM 18+ in your project.

Standalone Web Component​

Use in plain HTML without installing React (React is bundled):

<questionnaire-renderer></questionnaire-renderer>

<script type="module">
  import '@mieweb/forms-renderer/standalone';
  
  const renderer = document.querySelector('questionnaire-renderer');
  renderer.formData = { schemaType: "mieforms-v1.0", fields: [...] };
</script>

Requirements: Modern browser with ES modules support.

Meteor Blaze​

Use in Meteor applications with Blaze templates (React is bundled):

{{> questionnaireRenderer formData=myFormData onChange=handleChange}}
import '@mieweb/forms-renderer/blaze';

Requirements: Meteor 2.0+

Key Features​

Schema Auto-Detection​

Automatically detects and converts between schema formats:

  • MIE Forms - Native format with schemaType: "mieforms-v1.0"
  • SurveyJS - Automatically converts SurveyJS schemas to MIE Forms format

Conditional Logic​

Built-in support for enableWhen rules to show/hide fields dynamically.

Get Response​

Get responses as a QuestionnaireResponse (FHIR format) as the user answers questions, and submit it later:

import { QuestionnaireRenderer } from '@mieweb/forms-renderer';

<QuestionnaireRenderer 
  formData={formSchema}
  questionnaireId="my-questionnaire"
  subjectId="patient-123"
  onQuestionnaireResponse={(response) => console.log(response)}
/>

Flexible Styling​

Includes Tailwind-based default styles with full customization support.

Use Cases​

  • Patient Portals - Collect health information from patients
  • Surveys & Assessments - Customer feedback, research surveys, evaluations
  • Data Collection Forms - Registration, intake, screening forms
  • Embedded Forms - Integrate questionnaires into existing applications
  • Mobile Apps - Responsive design works on all screen sizes

Next Steps​