Skip to content

YbyraSchema-driven UI for management systems

Define your domain once — get forms, tables, validation, i18n, and actions for React, Vue, and Svelte from a single source of truth.

Define Once, Render Everywhere

Ybyra uses a builder-pattern API — not plain objects or JSON Schema. Each field type exposes only the methods that apply to it, giving you full TypeScript inference and compile-time safety.

Create a domain schema

typescript
import { text, Text, number, currency, toggle, group } from '@ybyra/core'

const ProductSchema = schema.create('product', {
  fields: {
    name: text().width(60).required().minLength(3).column(),
    sku: text().width(40).required().column(),
    quantity: number().min(0).max(10000).width(30).column(),
    price: currency().min(0).precision(2).prefix('$').width(30).column(),
    active: toggle().default(true).column(),
  },
})

Use it in any framework

tsx
import { useDataForm } from '@ybyra/react'

const form = useDataForm({ schema: ProductSchema.provide(), scope: 'add' })
vue
<script setup>
import { useDataForm } from '@ybyra/vue'

const form = useDataForm({ schema: ProductSchema.provide(), scope: 'add' })
</script>
svelte
<script>
import { useDataForm } from '@ybyra/svelte'

const form = useDataForm({ schema: ProductSchema.provide(), scope: 'add' })
</script>

No labels in code — i18n resolves product.name, product.price automatically. No boilerplate — validation, visibility, and layout derived from the schema. Full TypeScript inferenceInferRecord<typeof ProductSchema> gives you a typed record.

Released under the MIT License.