Form Studio Overview
Form Studio is the reference application for Atlas Forms — a complete environment for browsing, creating, designing, previewing, and publishing enterprise forms. This guide walks you through every feature from first login to production deployment.
What is Form Studio?
Form Studio is a reference implementation built on top of the Atlas Forms package ecosystem. It demonstrates how to integrate pages-studio-react and pages-player-react into a full-featured form authoring application. Everything you see in Form Studio is composable — the same components can be embedded in your own applications.
Form Dashboard
Browse all forms with search, filter, and pagination. See form status badges and navigate to any form instantly.
Visual Designer
Drag-and-drop control placement, section management, and live property editing — no code required for standard forms.
Live Preview
Switch between edit, view, and preview modes instantly. Test your form exactly as end users will experience it.
Publishing Workflow
Draft → Review → Published lifecycle with version history and rollback capability.
Architecture at a Glance
Form Studio is a React 18 application using React Router 6 for page routing and Zustand for state management. The rendering pipeline is shared between the designer and the player — design mode and edit mode use the same FormRenderer component with different operating modes.
Form Studio App
├── pages-studio-react ← Designer canvas, control palette, property panel
├── pages-player-react ← Player page with API loading and error boundary
├── player-components-react ← FormRenderer, ControlRenderer, hooks
├── api-client-js ← FormDefinitionApiClient (HTTP + caching)
├── storage-js ← StorageManager (draft auto-save)
└── client-js ← AtlasFormsClient (unified singleton)Quick-Start Checklist
Configure API Connection
Point AtlasFormsClient at your API endpoint with your tenant credentials. See API Connection Setup.
Open the Dashboard
Your forms appear in a searchable, filterable list. Forms are organised by category and type with status indicators.
Create or Open a Form
Click New Form to start from a template or blank canvas. Or click any existing form to open the designer.
Design with Drag and Drop
Drag controls from the palette onto the canvas. Configure properties in the right panel. Auto-save keeps your work safe.
Preview and Publish
Switch to Preview mode to test the user experience. Then publish to make the form available via the API.
Operating Modes
Atlas Forms has five distinct operating modes. Form Studio uses all five — understanding them is key to understanding what you see on screen.
| Mode | Editable | Purpose | Where Used |
|---|---|---|---|
edit | Yes | User enters data | Production form use |
view | No | Read-only display | Reviewing submissions |
design | Yes | Form builder | Form Studio canvas |
admin | Yes | Administrator operations | Admin-only fields |
preview | No | Preview with sample data | Testing before publish |
17-Package Ecosystem
Form Studio is powered by a 17-package pnpm monorepo. You don't need to know every package to use Form Studio, but understanding the layers helps when something needs customisation.
| Layer | Packages | Responsibility |
|---|---|---|
| Foundation | types-js, schema-js, validation-js | Zero-dependency core — types, parsing, validation |
| Services | form-engine-js, api-client-js, storage-js, control-registry-js, client-js | State, HTTP, persistence, plugin registry |
| React UI | player-components-react, designer-components-react, pages-player-react, pages-studio-react, ui-components-react, controls-builtin-js, controls-advanced-react, themes-js | All React components and themes |
examples/form-studio/ in the Atlas Forms monorepo. It is a production-quality reference — not a toy demo. The patterns shown here are recommended for your own integrations.