streamlit-jsonforms-vuetify-renderer 0.1.2

Streamlit component with JSONForms and Vuetify renderer

Streamlit JSONForms Vuetify Renderer

A Streamlit custom component that renders JSONForms with Vuetify material design components.

Installation

uv pip install streamlit-jsonforms-vuetify-renderer

Or with pip:

pip install streamlit-jsonforms-vuetify-renderer

Usage

import streamlit as st
from streamlit_jsonforms import render_jsonforms

# Define your JSON Schema
form_schema = {
    "schema": {
        "type": "object",
        "properties": {
            "name": {
                "type": "string",
                "minLength": 1
            },
            "age": {
                "type": "integer",
                "minimum": 0
            }
        },
        "required": ["name"]
    },
    "uischema": {
        "type": "VerticalLayout",
        "elements": [
            {
                "type": "Control",
                "scope": "#/properties/name"
            },
            {
                "type": "Control",
                "scope": "#/properties/age"
            }
        ]
    }
}

# Render the form
result = render_jsonforms(form_schema, key="my_form")

if result:
    st.write("Form submitted:", result)

Development Setup

Prerequisites

• Python 3.9+
• Node.js and npm

Backend (Python)

# Create virtual environment
uv venv
source .venv/bin/activate

# Install dependencies
uv pip install -e .

Frontend (Vue + Vuetify)

cd streamlit_jsonforms/frontend
npm install
npm run dev

The frontend dev server runs on http://localhost:5173.

Running in Development Mode

1. Start the frontend dev server (as above)
2. In another terminal, run your Streamlit app:

   streamlit run your_app.py
   

Building for Production

cd streamlit_jsonforms/frontend
npm run build

This creates the dist/ directory that Streamlit serves in production mode.

License

MIT License - see LICENSE file for details.