https://github.com/esnet/jsonforms-esm
The JSONForms library (https://jsonforms.io) wrapped in a Vue Webcomponent and bundled as an ECMAScript Module (ESM)
https://github.com/esnet/jsonforms-esm
Last synced: 11 months ago
JSON representation
The JSONForms library (https://jsonforms.io) wrapped in a Vue Webcomponent and bundled as an ECMAScript Module (ESM)
- Host: GitHub
- URL: https://github.com/esnet/jsonforms-esm
- Owner: esnet
- Created: 2025-03-03T23:24:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T20:42:42.000Z (about 1 year ago)
- Last Synced: 2025-07-02T21:34:58.436Z (about 1 year ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 0
- Watchers: 13
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JSONForms Vue WebComponent ESM
## Background and Wrapper Notes
This Repo contains a Vue wrapper for the JSONForms library.
The Vue3 wrapper builds a WebComponent. The standard Vue3 build tools cannot yield a webcomponent.
But! Using Vite as a build tool allows us to build the WebComponent and bundle it into into an ECMAScript module.
ECMAScript modules can be `import`ed directly into a browser, or included as a `` tag.
WebComponents are a web standard (a built-in part of JavaScript) that allows users to create user-defined HTML Tags that can be used in HTML `<like></like>` `<this></this>`.
## OK... Why bother?
This allows you to use JSONForms in a totally vanilla web browser environment in HTML with no modification, using only a `<script>` tag.
Well, and a `<link>` tag if you want CSS.
But, for your target application, this means: use JSONForms with no NodeJS, no NPM, and no build step.
This stems from a development philosophy:
- use a simple tool, not a complicated tool
- avoid JavaScript
- avoid node, npm and friends
- avoid transpiling
## Why would I want JSONForms?
You probably already know if you're here, but JSONForms allows you to render a form based on a JSON Schema.
## OK, I'm sold, how do I use it?
You include a `<script>` tag, and then use the `<json-form>` tag.
Here's a complete code listing:
```
<!DOCTYPE html>
<html>
<head>
<title>JSONForms Demo</title>
<!-- load CSS Styling for JSONForms from unpkg -->
<link rel='stylesheet' type='text/css' href='https://unpkg.com/jsonforms-esm@v3.5.1/dist/jsonforms.css'>
<!-- load JSONForms from unpkg -->
<script src='https://unpkg.com/jsonforms-esm@v3.5.1/dist/jsonforms.esm.js'>