Advanced
We have also prepared advanced examples revealing the possibilities of customization and adaptation for different scenarios.
Showing 34 examples
Starters
Arktype Starter Arktype with standard-schema validator starter.
Basic Starter Basic JSON Schema form setup with Svelte.
TypeBox Starter TypeBox with standard-schema validator starter.
Valibot Starter Valibot validator integration starter.
Zod Starter Zod validator integration starter.
Logic Extensions
AJV i18n AJV validation with localized error messages using ajv-i18n.
Async Combobox Custom async combobox widget with search functionality.
Deprecated Keyword Adding support for new JSON Schema keywords like 'deprecated'.
Draft 2020-12 JSON Schema draft 2020-12 features including $ref.
Formulas Custom field component with its own logic (formula-based values).
Nullable Fields Custom nullable field component for null value states.
Optional Data Controls Controlling optional field behavior and appearance.
Pattern Properties Validator Custom field component with validation logic for patternProperties.
Pre-upload File Custom file upload widget with client-side preview before submission.
Remote Enum Async enum options loaded from a remote source.
Schema Transformation JSON Schema transformation before form rendering.
Valibot Unserializable Valibot schema with unrepresentable types (Date, BigInt) handled via custom fields.
Zod Unserializable Zod schema with unrepresentable types (Date, BigInt) handled via custom fields.
UI Extensions
Decomposed Field Complex field decomposed into reusable sub-components.
Enum Widgets Different widget types for enum properties.
Label on Left Field labels rendered on the left side.
Layout Slots Form layout customization using slot-based components.
Markdown Description Rich markdown descriptions using svelte-exmarkdown.
Multi-step Multi-step wizard form with navigation.
Tabbed Layout Custom tabbed layout for form sections.
SvelteKit Integrations
Form Actions JSON Schema forms integrated with SvelteKit form actions.
Form Actions Dynamic Schema Dynamic schemas combined with SvelteKit form actions.
Form Actions Flex Flexible form actions for different submission patterns.
Form Actions Without JS Form actions with JavaScript disabled.
Multi-step Native Form Multi-step form using native HTML form submission.
Remote Functions SvelteKit remote functions for server-side logic.
Remote Functions Dynamic Schema Dynamic schemas combined with SvelteKit remote functions.
Remote Functions Enhance Progressively enhanced remote functions.
Remote Functions Without JS Remote functions with JavaScript disabled.