Schema-driven forms for React, Vue, and Svelte. Define your fields once, get type-safe forms, tables, validation, events, and actions — all from a single source of truth.
import{text,Text,date,toggle,group,action,Position,Scope}from'@ybyra/core'constPersonSchema=schema.create('person',{groups: {basic: group(),address: group(),},fields: {name: text().width(100).required().column().group('basic'),email: text().kind(Text.Email).width(60).required().column().group('basic'),phone: text().kind(Text.Phone).width(40).group('basic'),birthDate: date().width(30).group('basic'),active: toggle().width(20).default(true).column().group('basic'),street: text().kind(Text.Street).width(60).group('address'),city: text().kind(Text.City).width(40).group('address'),},actions: {custom: action().icon(Icon.Send).warning().positions(Position.footer).scopes(Scope.add),},})No labels in code. No boilerplate. Full TypeScript inference.
Visit the full documentation for guides, API reference, and examples.
| Package | Description |
|---|---|
@ybyra/core | Schema definition, field types, actions, groups, type system |
@ybyra/react | useDataForm / useDataTable hooks, renderer registry, validation |
@ybyra/vue | useDataForm / useDataTable composables for Vue |
@ybyra/svelte | useDataForm / useDataTable stores for Svelte |
@ybyra/react-web | Ready-made field renderers for React web |
@ybyra/react-native | Ready-made field renderers for React Native |
@ybyra/vue-quasar | Ready-made field renderers for Vue + Quasar |
@ybyra/sveltekit | Ready-made field renderers for SvelteKit |
@ybyra/persistence | Local and web persistence drivers |
pnpm add @ybyra/core @ybyra/reactpnpm install
pnpm build # build all packages
pnpm test# run all tests
pnpm docs:dev # documentation dev serverThis project uses changesets for versioning and publishing.
After making changes, run:
pnpm changesetFollow the prompts to select which packages changed and the semver bump type (patch/minor/major).
# Apply version bumps and generate changelogs
pnpm version-packages
# Build and publish to npm
pnpm releaseNote: You must be logged in to npm (
npm login) and be a member of the@ybyraorganization.
MIT