@uncharted.software/jsonforms-primevue

jsonforms-primevue

Motivation

The JSONForms.io packages include integrations for vanilla HTML and Vuetify, but we needed PrimeVue. In addition, we needed to support other new options such as:

• Display-only mode: Rather than just 'disabling' the control, we want to display the control as a read-only text display
  • Allows JSONForms to be used not only to describe Input forms, but also to describe Output displays
• Label controls as captioned images
• Description display (always, tooltip)
• Layout options (default, space-between)
• Number control options (step, prefix, suffix)
• Date/Time control options (hourFormat)

Installation

yarn add @uncharted.software/jsonforms-primevue @jsonforms/core @jsonforms/vue primevue

Usage

A runnable example playground application for live editing is available:

yarn dev

In your own app, import and add the ranked renderer configurations and supply them to the JSON Forms component. i.e.:

<script lang="ts">
import { JsonForms } from "@jsonforms/vue";
import primeVueRenderers from "@uncharted.software/jsonforms-primevue";
import "@uncharted.software/jsonforms-primevue/style.css";
import PrimeVue from 'primevue/config';
import Tooltip from 'primevue/tooltip';

// Important: Register the PrimeVue tooltip directive for description tooltips to work
app.use(PrimeVue);
app.directive('tooltip', Tooltip);

// defineComponent(...
</script>    
    
<template>
    <JsonForms
        :data="exampleData"
        :renderers="primeVueRenderers"
        :schema="dataSchema"
        :uischema="uiSchema"
        @change="onFormChanged" 
    /> 
</template>

For detailed documentation on all available components, options, and customization features, please refer to the Documentation.

Built-in UI icons use inline SVG defaults (no PrimeIcons dependency). To use another icon set (for example Phosphor), call provideJsonFormsPrimeVueIcons in app setup — see Icons in the documentation.

Roadmap / TODO

• Basic controls for all types
  • String input
  • Number & Integer Input
    • Min/Max range support
    • Step support
    • Prefix/Suffix support
    • As-slider support
  • Enum
    • as strings
    • as dropdown
    • as oneOf (to support value vs label for each item)
    • as 'radio' option
  • Boolean (checkbox)
  • Date
  • Date-Time
  • Label placement options (float | left | right)
  • Description display & options (always | tooltip)
• Categories/Category layout renderer
• Group Layout renderer (with toggleable option to render as an accordion)
• HorizontalLayout / VerticalLayout styling
  • Wrap/no-wrap or grid type support
• Tables
• Error / invalid state feedback
• Rules
  • Disable
  • Visibility
• Image display (option on Label)

2026-07-08