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: 18 days 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 (over 1 year ago)
- Last Synced: 2025-03-31T07:04:29.715Z (over 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/)
- [Discord](https://discord.gg/hVxFWk7dRn)
## Installation
Install as a community add-on using the Svelte CLI.
```shell
npx sv add @sjsf
```
## 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/shadcn-extras/) (experimental)
- [SVAR](https://x0k.dev/svelte-jsonschema-form/themes/svar/) (experimental)
- [Beer CSS](https://x0k.dev/svelte-jsonschema-form/themes/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/)
- [ata-validator](https://x0k.dev/svelte-jsonschema-form/validators/ata/) (experimental)
- [Precompiled](https://x0k.dev/svelte-jsonschema-form/validators/ata/#precompiled-validation) (experimental)
- [@hyperjump/json-schema](https://x0k.dev/svelte-jsonschema-form/validators/hyperjump/) (experimental)
## Integrations
- [Generic backend](https://x0k.dev/svelte-jsonschema-form/integrations/generic-backend/)
- [Form actions](https://x0k.dev/svelte-jsonschema-form/integrations/form-actions/)
- [Remote functions](https://x0k.dev/svelte-jsonschema-form/integrations/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.