Svelte JSONSchema Form

https://github.com/x0k/svelte-jsonschema-form
Admin
A Svelte 5 library for generating forms from JSON schemas, serving as an unofficial port of...
Tokens:6,820
Snippets:126
Trust Score:8.3
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install SvelteKit Integration

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/sveltekit/README.md

Install the @sjsf/sveltekit package using npm.

```shell
npm install @sjsf/sveltekit
```

--------------------------------

### Install Dependencies

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/shadcn-extras-theme/README.md

Install the necessary packages for the form, shadcn4-theme, and shadcn-extras-theme.

```shell
npm install @sjsf/form @sjsf/shadcn4-theme @sjsf-lab/shadcn-extras-theme
```

--------------------------------

### Install @sjsf/lucide-icons

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/lucide-icons/README.md

Install the necessary packages for @sjsf/form and @sjsf/lucide-icons using npm.

```shell
npm install @sjsf/form @sjsf/lucide-icons
```

--------------------------------

### Install @sjsf/moving-icons

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/moving-icons/README.md

Install the necessary packages for @sjsf/form and @sjsf/moving-icons using npm.

```shell
npm install @sjsf/form @sjsf/moving-icons
```

--------------------------------

### Install Packages

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/daisyui5-theme/README.md

Install the core form library and the daisyUI5 theme using npm.

```shell
npm install @sjsf/form @sjsf/daisyui5-theme
```

--------------------------------

### Install @sjsf/form and @sjsf-lab/svar-theme

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/svar-theme/README.md

Install the necessary packages for svelte-jsonschema-form and the SVAR theme.

```shell
npm install @sjsf/form @sjsf-lab/svar-theme
```

--------------------------------

### Install @sjsf/basic-theme

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/basic-theme/README.md

Install the basic theme along with the core form package using npm.

```shell
npm install @sjsf/form @sjsf/basic-theme
```

--------------------------------

### Install @sjsf/flowbite3-theme

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/flowbite3-theme/README.md

Install the necessary packages for the Flowbite Svelte theme with svelte-jsonschema-form.

```shell
npm install @sjsf/form @sjsf/flowbite3-theme
```

--------------------------------

### Install shadcn-svelte Theme

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/shadcn4-theme/README.md

Install the necessary packages for the shadcn-svelte theme and svelte-jsonschema-form.

```shell
npm install @sjsf/form @sjsf/shadcn4-theme
```

--------------------------------

### Install @sjsf using Svelte CLI

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/form/README.md

Install the library as a community add-on using the Svelte CLI.

```shell
npx sv add @sjsf
```

--------------------------------

### Install schemasafe-validator

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/schemasafe-validator/README.md

Install the schemasafe-validator package and its peer dependency @exodus/schemasafe using npm.

```shell
npm install @sjsf/schemasafe-validator @exodus/schemasafe
```

--------------------------------

### Install @sjsf Add-on

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/sv/README.md

Use this command to install the @sjsf add-on for svelte-jsonschema-form.

```shell
npx sv add @sjsf
```

--------------------------------

### Install ata-validator

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/ata-validator/README.md

Install the ata-validator package and its peer dependency ata-validator using npm.

```shell
npm install @sjsf-lab/ata-validator ata-validator
```

--------------------------------

### Install svelte-jsonschema-form and Flowbite Icons

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/flowbite-icons/README.md

Install the necessary packages for svelte-jsonschema-form and Flowbite Icons using npm.

```shell
npm install @sjsf/form @sjsf/flowbite-icons
```

--------------------------------

### Install Radix Icons and Form Package

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/radix-icons/README.md

Install the necessary packages for svelte-jsonschema-form and Radix icons.

```shell
npm install @sjsf/form @sjsf/radix-icons
```

--------------------------------

### Install Valibot Validator

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/valibot-validator/README.md

Install the necessary packages for the Valibot validator, including the validator itself, the JSON schema adapter, and Valibot.

```shell
npm install @sjsf/valibot-validator @valibot/to-json-schema valibot
```

--------------------------------

### Install @sjsf/form and @sjsf/skeleton4-theme

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/skeleton4-theme/README.md

Install the necessary packages for the svelte-jsonschema-form and the Skeleton v4 theme using npm.

```shell
npm install @sjsf/form @sjsf/skeleton4-theme
```

--------------------------------

### Install Ajv8 Validator

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/ajv8-validator/README.md

Install the Ajv8 validator package and Ajv version 8.

```shell
npm install @sjsf/ajv8-validator ajv@8
```

--------------------------------

### Install Hyperjump Validator

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/hyperjump-validator/README.md

Install the hyperjump validator and its peer dependency @hyperjump/json-schema using npm.

```shell
npm install @sjsf-lab/hyperjump-validator @hyperjump/json-schema
```

--------------------------------

### Install BeerCSS Theme Package

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/beercss-theme/README.md

Install the necessary packages for the BeerCSS theme and the core svelte-jsonschema-form library using npm.

```shell
npm install @sjsf/form @sjsf-lab/beercss-theme
```

--------------------------------

### Install zod4-validator and zod

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/zod4-validator/README.md

Install the zod4-validator package along with zod version 4 using npm.

```shell
npm install @sjsf/zod4-validator zod
```

--------------------------------

### Install CFWorker Validator and JSON Schema

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/cfworker-validator/README.md

Install the necessary packages for the CFWorker validator and its JSON schema dependency using npm.

```shell
npm install @sjsf/cfworker-validator @cfworker/json-schema
```

--------------------------------

### Integrate Icons in Svelte Form

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/moving-icons/README.md

Import and use the icons from '@sjsf/moving-icons' when creating a form with '@sjsf/form'. Ensure both packages are installed.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/moving-icons';

  const form = createForm({
    icons,
    ...
  })
</script>
```

--------------------------------

### Publish Add-on to npm

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/sv/CONTRIBUTING.md

Steps to publish your add-on to npm, including logging in and publishing. The 'prepublishOnly' script automatically runs the build before publishing.

```sh
npm login

npm publish
```

--------------------------------

### Development Scripts for Add-ons

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/sv/CONTRIBUTING.md

Convenient npm scripts for creating a new demo project, adding your current add-on to the demo, and running tests.

```sh
npm run demo-create

npm run demo-add

npm run test
```

--------------------------------

### Configure Theme Sources in app.css

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/shadcn-extras-theme/README.md

Register the theme source paths in your application's main CSS file to enable the theme.

```css
@source "../node_modules/@sjsf/shadcn4-theme/dist";
@source "../node_modules/@sjsf-lab/shadcn-extras-theme/dist";
```

--------------------------------

### Configure Form with Radix Icons

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/radix-icons/README.md

Import and configure the createForm function with the icons object from @sjsf/radix-icons.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/radix-icons';

  const form = createForm({
    icons,
    ...
  })
</script>
```

--------------------------------

### Build Add-on with tsdown

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/sv/CONTRIBUTING.md

Build your add-on into a single file using tsdown. This process bundles all dependencies except 'sv', which is a peer dependency.

```sh
npm run build
```

--------------------------------

### Configure Theme Source Path

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/shadcn4-theme/README.md

Register the theme source path in your project's main CSS file to enable the shadcn-svelte theme.

```css
@source "../node_modules/@sjsf/shadcn4-theme/dist";
```

--------------------------------

### Basic Form Usage with JSON Schema in Svelte

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/form/README.md

Demonstrates how to create and use a Svelte form component based on a JSON schema. Ensure all necessary imports are included for theme, resolver, translation, merger, validator, and ID builder.

```svelte
<script lang="ts">
  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,
  });
</script>

<BasicForm {form} />
```

--------------------------------

### Adapt Valibot Schema for Svelte Form

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/valibot-validator/README.md

Import the createForm function and the adapt utility. Define your schema using Valibot and then use adapt to integrate it with createForm.

```typescript
import { createForm, type Schema } from "@sjsf/form";
import { adapt } from "@sjsf/valibot-validator";
import * as v from "valibot";

const schema = v.object({
  /* your schema */
});

const form = createForm({
  ...adapt(schema),
  /* other options */
});
```

--------------------------------

### Configure Flowbite Svelte Theme in CSS

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/flowbite3-theme/README.md

Register the theme source path in your application's main CSS file to enable the Flowbite Svelte theme.

```css
@source "../node_modules/@sjsf/flowbite3-theme/dist";
```

--------------------------------

### Configure Flowbite Icons CSS Path

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/flowbite-icons/README.md

Add the Flowbite Svelte Icons distribution path to your main CSS file to enable icon styling.

```css
@source "../node_modules/@sjsf/flowbite-icons/dist";
```

--------------------------------

### Integrate Lucide Icons in Svelte Form

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/lucide-icons/README.md

Import and use the 'icons' object from '@sjsf/lucide-icons' when creating your form configuration.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/lucide-icons';

  const form = createForm({
    icons,
    ...
  })
</script>
```

--------------------------------

### Create Form Validator Factory

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/hyperjump-validator/README.md

Import necessary functions and create a form validator factory using the precompiled validator retriever from AST. Ensure the AST is correctly imported.

```typescript
import {
  createFormValidatorFactory,
  fromAst,
} from "@sjsf-lab/hyperjump-validator/precompile";

import { ast } from "./ast";

const factory = createFormValidatorFactory({
  validatorRetriever: fromAst(ast),
});
```

--------------------------------

### Basic Theme Usage in Svelte

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/basic-theme/README.md

Import and use the basic theme with createForm in your Svelte application. Remember to import the theme's CSS.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf/basic-theme';
  import '@sjsf/basic-theme/css/basic.css';

  const form = createForm({
    theme,
    ...
  })
</script>
```

--------------------------------

### Apply Theme in Svelte Component

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/daisyui5-theme/README.md

Import and apply the daisyUI5 theme when creating a form instance in a Svelte component.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf/daisyui5-theme';

  const form = createForm({
    theme,
    ...
  })
</script>
```

--------------------------------

### Create Form Validator Instance

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/ajv8-validator/README.md

Import and create an instance of the form validator using the Ajv8 implementation.

```typescript
import {
  createFormValidator
} from "@sjsf/ajv8-validator";

const validator = createFormValidator();
```

--------------------------------

### Adapt Zod Schema for svelte-jsonschema-form

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/zod4-validator/README.md

Import necessary functions and zod. Use the 'adapt' function from '@sjsf/zod4-validator/classic' to integrate your zod schema with the createForm function.

```typescript
import { createForm, type Schema } from "@sjsf/form";
import { adapt } from "@sjsf/zod4-validator/classic";
import { z } from "zod/v4";

const schema = z.object({
  /* your schema */
});

const form = createForm({
  ...adapt(schema),
  /* other options */
});
```

--------------------------------

### Create Form Validator Instance

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/ata-validator/README.md

Import and create an instance of the form validator using the createFormValidator function.

```typescript
import { createFormValidator } from "@sjsf-lab/ata-validator";

const validator = createFormValidator();
```

--------------------------------

### Apply Icons in Svelte Component

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/flowbite-icons/README.md

Import and register the icons object from @sjsf/flowbite-icons when creating your form instance in a Svelte component.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/flowbite-icons';

  const form = createForm({
    icons,
    ...
  })
</script>
```

--------------------------------

### Apply Flowbite3 Theme in Svelte Component

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/flowbite3-theme/README.md

Import and apply the Flowbite3 theme when creating a form instance in your Svelte application.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf/flowbite3-theme';

  const form = createForm({
    theme,
    ...
  })
</script>
```

--------------------------------

### Apply shadcn-svelte Theme in Svelte

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/shadcn4-theme/README.md

Apply the shadcn-svelte theme to your svelte-jsonschema-form by importing and configuring the theme and components.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme, setThemeContext } from '@sjsf/shadcn4-theme';
  import * as components from '@sjsf/shadcn4-theme/new-york'

  const form = createForm({
    theme,
    ...
  })

  setThemeContext({ components })
</script>
```

--------------------------------

### Apply BeerCSS Theme in Svelte

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/beercss-theme/README.md

Import and apply the BeerCSS theme within your Svelte application by passing it to the createForm function.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf-lab/beercss-theme';

  const form = createForm({
    theme,
    ...
  })
</script>
```

--------------------------------

### Apply SVAR v2 theme in Svelte

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/svar-theme/README.md

Import and apply the SVAR theme when creating a form instance with svelte-jsonschema-form.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf-lab/svar-theme';

  const form = createForm({
    theme,
    ...
  })
</script>
```

--------------------------------

### Apply Theme in Svelte Component

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/lab/shadcn-extras-theme/README.md

Import and apply the theme and components within your Svelte component to use the shadcn-extras theme with svelte-jsonschema-form.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { setThemeContext } from '@sjsf/shadcn4-theme';
  import { theme } from '@sjsf-lab/shadcn-extras-theme';
  import * as components from '@sjsf/shadcn4-theme/new-york';
  import * as extraComponents from '@sjsf-lab/shadcn-extras-theme/ui';

  const form = createForm({
    theme,
    ...
  })

  setThemeContext({ components: { ...components, ...extraComponents } })
</script>
```

--------------------------------

### Apply Skeleton v4 Theme in Svelte Component

Source: https://github.com/x0k/svelte-jsonschema-form/blob/main/packages/skeleton4-theme/README.md

Import and apply the Skeleton v4 theme within your Svelte component when creating the form instance.

```svelte
<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf/skeleton4-theme';

  const form = createForm({
    theme,
    ...
  })
</script>
```
Tokens:
Raw