Form Players Overview
A Form Player is a React component that renders a form schema into a working UI. Atlas Forms ships three players: the full-featured FormRenderer, the lightweight ViewModeRenderer for read-only display, and the page-level FormPlayerPage wrapper that handles API loading, draft lifecycle, and error boundaries.
The Three Default Players
FormRenderer
Full-featured interactive player. Handles all 88+ control types, all five operating modes, validation, draft auto-save, and action execution. Use for any form where users enter or review data.
ViewModeRenderer
Lightweight read-only player. Skips validation, events, draft, and submission. 60% smaller bundle footprint. Use for high-volume record display screens where editing is never required.
FormPlayerPage
Full-page wrapper from pages-player-react. Handles API loading, skeleton state, error boundary, breadcrumbs, and draft restore prompt. Use for standalone form pages.
When to Use Each Player
| Scenario | Player | Reason |
|---|---|---|
| Data entry form (edit mode) | FormRenderer | Full validation, submission, draft save |
| Approval review form (view mode) | FormRenderer in view mode | Needs mode switching and action execution |
| High-volume record list display | ViewModeRenderer | Lighter — no event system overhead per row |
| Standalone form page with API loading | FormPlayerPage | Includes loading skeleton, error boundary, breadcrumbs |
| Embedded form in a custom layout | FormRenderer | Pass custom wrappers via children prop |
| Non-standard layout (cards, mobile, chat) | Custom player | See Guide12_CustomPlayers |
Package Structure
// Package: @atlas-forms/player-components-react
import { FormRenderer } from '@atlas-forms/player-components-react';
import { ViewModeRenderer } from '@atlas-forms/player-components-react';
// Package: @atlas-forms/pages-player-react
import { FormPlayerPage } from '@atlas-forms/pages-player-react';
// Package: @atlas-forms/state-react (for custom players)
import { FormStateProvider } from '@atlas-forms/state-react';Quick Start
import { FormRenderer } from '@atlas-forms/player-components-react';
import type { FormSchema } from '@atlas-forms/types-js';
const MyForm: React.FC = () => {
const schema: FormSchema = { /* ... */ };
const handleSubmit = async (values: Record<string, any>) => {
await fetch('/api/my-form', {
method: 'POST',
body: JSON.stringify(values),
headers: { 'Content-Type': 'application/json' }
});
};
return (
<FormRenderer
schema={schema}
mode="edit"
autoValidate={true}
onSubmit={handleSubmit}
/>
);
};