https://github.com/x0k/svelte-jsonschema-form
Svelte 5 library for creating forms based on JSON schema.
https://github.com/x0k/svelte-jsonschema-form
forms json-schema svelte svelte5
Last synced: 2 months ago
JSON representation
Svelte 5 library for creating forms based on JSON schema.
- Host: GitHub
- URL: https://github.com/x0k/svelte-jsonschema-form
- Owner: x0k
- License: mit
- Created: 2024-09-14T22:38:00.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-30T20:11:22.000Z (about 1 year ago)
- Last Synced: 2025-03-31T07:04:29.715Z (about 1 year ago)
- Topics: forms, json-schema, svelte, svelte5
- Language: TypeScript
- Homepage: http://x0k.online/svelte-jsonschema-form/
- Size: 3.74 MB
- Stars: 46
- Watchers: 1
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - x0k/svelte-jsonschema-form - Svelte 5 library for creating forms based on JSON schema. (TypeScript)
README
# svelte-jsonschema-form
Svelte 5 library for creating forms based on JSON schema.
Unofficial port of [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form).
- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
- [Form Builder](https://x0k.github.io/svelte-jsonschema-form/builder3)
- [Playground](https://x0k.github.io/svelte-jsonschema-form/playground3/)
## Installation
Install the library, basic theme and `ajv` for validation.
```shell
npm i @sjsf/form @sjsf/basic-theme @sjsf/ajv8-validator ajv@8
```
## Usage
```svelte
import { createForm, BasicForm, type Schema } from '@sjsf/form';
import { resolver } from '@sjsf/form/resolvers/basic';
import { translation } from '@sjsf/form/translations/en';
import { createFormMerger } from '@sjsf/form/mergers/modern';
import { createFormIdBuilder } from '@sjsf/form/id-builders/modern';
import { createFormValidator } from '@sjsf/ajv8-validator';
import { theme } from '@sjsf/basic-theme';
import '@sjsf/basic-theme/css/basic.css';
const schema: Schema = {
title: 'Tasks',
type: 'array',
items: {
type: 'object',
properties: {
name: {
type: 'string',
title: 'Name',
},
description: {
type: 'string',
title: 'Description',
},
},
required: ["name"]
},
}
const form = createForm({
theme,
schema,
resolver,
translation,
merger: createFormMerger,
validator: createFormValidator,
idBuilder: createFormIdBuilder,
onSubmit: console.log
})
```
## Supported Themes
- [Basic](https://x0k.dev/svelte-jsonschema-form/themes/basic/)
- [Pico CSS](https://x0k.dev/svelte-jsonschema-form/themes/basic/#pico-css)
- [daisyUI v5](https://x0k.dev/svelte-jsonschema-form/themes/daisyui5/)
- [Flowbite Svelte](https://x0k.dev/svelte-jsonschema-form/themes/flowbite3/)
- [Skeleton v4](https://x0k.dev/svelte-jsonschema-form/themes/skeleton4/)
- [shadcn-svelte](https://x0k.dev/svelte-jsonschema-form/themes/shadcn4/)
- [shadcn-svelte-extras](https://x0k.dev/svelte-jsonschema-form/themes/lab/shadcn-extras/) (experimental)
- [SVAR](https://x0k.dev/svelte-jsonschema-form/themes/lab/svar/) (experimental)
- [Beer CSS](https://x0k.dev/svelte-jsonschema-form/themes/lab/beercss/) (experimental)
## Supported Validators
- [Ajv v8](https://x0k.dev/svelte-jsonschema-form/validators/ajv/)
- [Precompiled](https://x0k.dev/svelte-jsonschema-form/validators/ajv/#precompiled-validation)
- [Zod v4](https://x0k.dev/svelte-jsonschema-form/validators/zod4/)
- [Valibot](https://x0k.dev/svelte-jsonschema-form/validators/valibot/)
- [@cfworker/json-schema](https://x0k.dev/svelte-jsonschema-form/validators/cfworker/)
- [@exodus/schemasafe](https://x0k.dev/svelte-jsonschema-form/validators/schemasafe/)
- [Precompiled](https://x0k.dev/svelte-jsonschema-form/validators/schemasafe/#precompiled-validation)
- [Standard Schema](https://x0k.dev/svelte-jsonschema-form/validators/standard-schema/)
## Integrations
- [Generic backend](https://x0k.dev/svelte-jsonschema-form/integrations/generic-backend/)
- SvelteKit
- [Form actions](https://x0k.dev/svelte-jsonschema-form/integrations/sveltekit/form-actions/)
- [Remote functions](https://x0k.dev/svelte-jsonschema-form/integrations/sveltekit/remote-functions/) (experimental)
## License
This project includes modifications of code from [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form), which is licensed under the Apache License, Version 2.0.
The rest of the project is under the MIT license.
See [LICENSE-MIT](LICENSE) and [LICENSE-APACHE](packages/form/LICENSE-APACHE) for details.
## See also
- [Other JSON Schema to Web UI tools](https://json-schema.org/tools?query=&sortBy=name&sortOrder=ascending&groupBy=toolingTypes&licenses=&languages=&drafts=&toolingTypes=schema-to-web-UI)
- [Converting JSON to table](https://github.com/x0k/json-to-table)
- [Simple build automation tool - mk](https://github.com/x0k/mk)