WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text EditorSchema Builder
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselCSV ViewerDOCX ViewerExcel ViewerFile SystemImage CropperImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryTheme

Forms

Schema Builder

FormsSchema BuilderNew
Rich Text EditorBack To Top
Live props
Content
defaultTab
fileName
Behavior
uniqueKeys
keyPattern
autoKey
maxDepth5
defaultExpanded
State
readOnly
Layout
showToolbar
showImport
showDownload
height640px
Appearance
variant
radius
Code
import { SchemaBuilder } from "@/components/ui/schema-builder"

<SchemaBuilder />
ProNew

v1.0.0·Added in 1.4.0

An editor for extraction schemas: named fields with unique keys, field types, JSON types, required flags, nesting and a JSON view.

Each row of the table is a field: Name (the label people read), Unique key, Type (the JSON type it stores, as a badge), a Required switch (a red asterisk marks required names) and Description. The Field type (the control a form shows: text, date, currency, select, address...) is set in Edit details and shown on phone cards. Typing a Name fills the key with its slug (Invoice number gives invoice_number, accents dropped) while the key is empty or still follows the name, marked with a link icon; edit the key and it stays yours. Keys are checked as you type, paste, import and move fields: empty, wrong format, or already used by a sibling (or anywhere, with uniqueKeys="global"), ignoring case and outer spaces. Every field involved is marked, the toolbar counts the problems, and clicking the count, or Enter / Shift+Enter in a marked input, steps through them. Picking a field type adjusts the type (Date stores a string with format date, Multi-select an array of options) and the type list offers what fits first; options typed for a select survive a switch to text and back. Groups, lists of objects and options open under their row from a Configure schema bar, each level a table of its own; the checkbox in the Required header marks a whole level required. Drag the grip on a row's left edge (it shows on hover and focus, always on touch) to reorder or to move a field into or out of a group: a line shows where it lands, in amber when the key already exists there. On touch, long press the grip. From the keyboard, Alt+↑/↓ moves a field, Alt+←/→ (on the grip, selects and the checkbox) moves it out of or into a group, and the ⋯ menu does the same plus Duplicate, Edit details and Delete (a field with children asks first). ⌘Z / ⇧⌘Z (Ctrl+Z / Ctrl+Y) undo and redo inside the builder, Escape in an input puts back what it held. Edit details opens a side panel with the format, placeholder, default value and options. The JSON tab shows the draft 2020-12 schema, highlighted, with Show changes for a diff against the schema it opened with. Import JSON reads a pasted or chosen file and points at the line of an error. Below 560px rows become cards that open the editor in a bottom sheet; menus and selects become bottom sheets on phones.

Add to a project

npx wingo-ui@latest add schema-builder

Pro item: the CLI needs a Pro account. See plans

Dependencies

@dnd-kit/core@dnd-kit/sortable@dnd-kit/utilitieslucide-reactmotionalert-dialogbuttoncheckboxcode-blockdialogdiff-viewerdropdown-menuempty-stateinputjson-viewerselectsheetswitchtabstextareatooltipuse-controllable-stateuse-media-querymotiontonesui-config

Files

  • components/ui/schema-builder.tsx

See also

JSON ViewerDiff ViewerRule BuilderFilter BuilderForm Wizard
PreviousRich Text EditorNext Back To Top
NameUnique keyTypeRequiredDescription
*
*
*
NameUnique keyTypeRequiredDescription
*
NameUnique keyTypeRequiredDescription
*
*
NameUnique keyTypeRequiredDescription
*
*
NameUnique keyTypeRequiredDescription
*
*
*
*
*
ValueDescription
ValueDescription