diff --git a/frontend/src/components/questions/QuestionRenderer.tsx b/frontend/src/components/questions/QuestionRenderer.tsx
new file mode 100644
index 0000000..28d85db
--- /dev/null
+++ b/frontend/src/components/questions/QuestionRenderer.tsx
@@ -0,0 +1,38 @@
+import type { Question } from '../../types'
+import MultipleChoice from './MultipleChoice'
+import MultipleSelect from './MultipleSelect'
+import ShortAnswer from './ShortAnswer'
+import MathInput from './MathInput'
+import Essay from './Essay'
+import Match from './Match'
+import OrderQuestion from './OrderQuestion'
+
+interface Props {
+  q: Question
+  value: unknown
+  onChange: (val: unknown) => void
+  locked?: boolean
+  graded?: boolean
+}
+
+export default function QuestionRenderer({ q, value, onChange, locked, graded }: Props) {
+  switch (q.type) {
+    case 'multiple-choice':
+      return <MultipleChoice q={q} value={value as string} onChange={onChange as (v: string) => void} locked={locked} graded={graded} />
+    case 'multiple-select':
+      return <MultipleSelect q={q} value={value as string[]} onChange={onChange as (v: string[]) => void} locked={locked} graded={graded} />
+    case 'short-answer':
+    case 'translation':
+      return <ShortAnswer q={q} value={value as string} onChange={onChange as (v: string) => void} locked={locked} />
+    case 'math-input':
+      return <MathInput q={q} value={value as string} onChange={onChange as (v: string) => void} locked={locked} />
+    case 'essay':
+      return <Essay q={q} value={value as Record<string, unknown>} onChange={onChange as (v: Record<string, unknown>) => void} locked={locked} />
+    case 'match':
+      return <Match q={q} value={value as Record<string, string>} onChange={onChange as (v: Record<string, string>) => void} locked={locked} graded={graded} />
+    case 'order':
+      return <OrderQuestion q={q} value={value as string[]} onChange={onChange as (v: string[]) => void} locked={locked} graded={graded} />
+    default:
+      return <div className="muted">Unsupported question type: <code>{q.type}</code></div>
+  }
+}