# Streamlit JSON Tip
A Streamlit custom component for viewing JSON data with interactive tooltips and tags for individual fields.
## Features
- 🔍 **Interactive JSON Viewer**: Expand/collapse objects and arrays
- 📝 **Interactive Tooltips**: Add contextual help for any field with professional Tippy.js tooltips
- 🏷️ **Field Tags**: Categorize fields with colored tags (PII, CONFIG, etc.)
- 🎯 **Field Selection**: Click on fields to get detailed information
- 🎨 **Syntax Highlighting**: Color-coded JSON with proper formatting
- 📱 **Responsive Design**: Works well in different screen sizes
## Installation
### From PyPI (Recommended)
```bash
pip install streamlit-json-tip
```
### From TestPyPI (Latest Development Version)
```bash
pip install --index-url https://test.pypi.org/simple/ --extra-index-url https://pypi.org/simple/ streamlit-json-tip
```
### Development Setup
1. Clone this repository:
```bash
git clone https://github.com/isaac/streamlit-json-tip.git
cd streamlit-json-tip
```
2. Set up development environment with uv:
```bash
# Install uv if you haven't already
curl -LsSf https://astral.sh/uv/install.sh | sh
# Create virtual environment and install all dependencies (including dev dependencies)
uv sync
```
3. Run the example app:
```bash
uv run streamlit run example_app.py
```
## Usage
```python
import streamlit as st
from streamlit_json_tip import json_viewer
# Your JSON data
data = {
"user": {
"id": 123,
"name": "John Doe",
"email": "john@example.com"
}
}
# Help text for specific fields
help_text = {
"user.id": "Unique user identifier",
"user.name": "Full display name",
"user.email": "Primary contact email"
}
# Tags for categorizing fields
tags = {
"user.id": "ID",
"user.name": "PII",
"user.email": "PII"
}
# Display the JSON viewer
selected = json_viewer(
data=data,
help_text=help_text,
tags=tags,
height=400
)
# Handle field selection
if selected:
st.write(f"Selected field: {selected['path']}")
st.write(f"Value: {selected['value']}")
if selected.get('help_text'):
st.write(f"Help: {selected['help_text']}")
```
## Parameters
- **data** (dict): The JSON data to display
- **help_text** (dict, optional): Dictionary mapping field paths to help text
- **tags** (dict, optional): Dictionary mapping field paths to tags/labels
- **height** (int, optional): Height of the component in pixels (default: 400)
- **key** (str, optional): Unique key for the component
## Field Path Format
Field paths use dot notation for objects and bracket notation for arrays:
- `"user.name"` - Object field
- `"items[0].title"` - Array item field
- `"settings.preferences.theme"` - Nested object field
## Development
### Frontend Development
1. Set up the development environment (see Development Setup above)
2. Navigate to the frontend directory:
```bash
cd streamlit_json_tip/frontend
```
3. Install frontend dependencies:
```bash
npm install
```
4. Start development server:
```bash
npm start
```
5. In your Python code, set `_RELEASE = False` in `__init__.py`
6. Run the example app in another terminal:
```bash
uv run streamlit run example_app.py
```
### Building for Production
1. Build the frontend:
```bash
cd streamlit_json_tip/frontend
npm run build
```
2. Set `_RELEASE = True` in `__init__.py`
3. Build the Python package:
```bash
uv run python -m build
```
4. Upload to PyPI:
```bash
uv run python -m twine upload dist/*
```
### Build Scripts
The project includes convenient uv scripts for common development tasks:
#### Frontend Development
```bash
uv run build-frontend # Build React frontend for production
```
#### Package Building
```bash
uv run clean # Clean build artifacts
uv run build # Clean + build Python package
uv run build-check # Build + validate package with twine
```
#### Publishing
```bash
uv run publish-test # Build + upload to TestPyPI
uv run publish # Build + upload to PyPI
```
#### Complete Workflow
```bash
uv run release-test # Build frontend + publish to TestPyPI
uv run release # Build frontend + publish to PyPI (production)
```
For a complete release, simply run:
```bash
uv run release
```
This will build the frontend, package the Python distribution, validate it, and upload to PyPI.
## License
MIT License
Raw data
{
"_id": null,
"home_page": "https://github.com/yourusername/streamlit-json-tip",
"name": "streamlit-json-tip",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": "streamlit, json, viewer, tooltip, component, interactive",
"author": "Your Name",
"author_email": "Isaac <isaac@example.com>",
"download_url": "https://files.pythonhosted.org/packages/7f/9b/243dac648b058b4ead5a6c0bfd869bd6f3bdd1746d6128d407065cef07f8/streamlit_json_tip-0.2.4.tar.gz",
"platform": null,
"description": "# Streamlit JSON Tip\n\nA Streamlit custom component for viewing JSON data with interactive tooltips and tags for individual fields.\n\n\n\n## Features\n\n- \ud83d\udd0d **Interactive JSON Viewer**: Expand/collapse objects and arrays\n- \ud83d\udcdd **Interactive Tooltips**: Add contextual help for any field with professional Tippy.js tooltips\n- \ud83c\udff7\ufe0f **Field Tags**: Categorize fields with colored tags (PII, CONFIG, etc.)\n- \ud83c\udfaf **Field Selection**: Click on fields to get detailed information\n- \ud83c\udfa8 **Syntax Highlighting**: Color-coded JSON with proper formatting\n- \ud83d\udcf1 **Responsive Design**: Works well in different screen sizes\n\n## Installation\n\n### From PyPI (Recommended)\n\n```bash\npip install streamlit-json-tip\n```\n\n### From TestPyPI (Latest Development Version)\n\n```bash\npip install --index-url https://test.pypi.org/simple/ --extra-index-url https://pypi.org/simple/ streamlit-json-tip\n```\n\n### Development Setup\n\n1. Clone this repository:\n ```bash\n git clone https://github.com/isaac/streamlit-json-tip.git\n cd streamlit-json-tip\n ```\n\n2. Set up development environment with uv:\n ```bash\n # Install uv if you haven't already\n curl -LsSf https://astral.sh/uv/install.sh | sh\n \n # Create virtual environment and install all dependencies (including dev dependencies)\n uv sync\n ```\n\n3. Run the example app:\n ```bash\n uv run streamlit run example_app.py\n ```\n\n## Usage\n\n```python\nimport streamlit as st\nfrom streamlit_json_tip import json_viewer\n\n# Your JSON data\ndata = {\n \"user\": {\n \"id\": 123,\n \"name\": \"John Doe\",\n \"email\": \"john@example.com\"\n }\n}\n\n# Help text for specific fields\nhelp_text = {\n \"user.id\": \"Unique user identifier\",\n \"user.name\": \"Full display name\",\n \"user.email\": \"Primary contact email\"\n}\n\n# Tags for categorizing fields\ntags = {\n \"user.id\": \"ID\",\n \"user.name\": \"PII\",\n \"user.email\": \"PII\"\n}\n\n# Display the JSON viewer\nselected = json_viewer(\n data=data,\n help_text=help_text,\n tags=tags,\n height=400\n)\n\n# Handle field selection\nif selected:\n st.write(f\"Selected field: {selected['path']}\")\n st.write(f\"Value: {selected['value']}\")\n if selected.get('help_text'):\n st.write(f\"Help: {selected['help_text']}\")\n```\n\n## Parameters\n\n- **data** (dict): The JSON data to display\n- **help_text** (dict, optional): Dictionary mapping field paths to help text\n- **tags** (dict, optional): Dictionary mapping field paths to tags/labels \n- **height** (int, optional): Height of the component in pixels (default: 400)\n- **key** (str, optional): Unique key for the component\n\n## Field Path Format\n\nField paths use dot notation for objects and bracket notation for arrays:\n- `\"user.name\"` - Object field\n- `\"items[0].title\"` - Array item field\n- `\"settings.preferences.theme\"` - Nested object field\n\n## Development\n\n### Frontend Development\n\n1. Set up the development environment (see Development Setup above)\n\n2. Navigate to the frontend directory:\n ```bash\n cd streamlit_json_tip/frontend\n ```\n\n3. Install frontend dependencies:\n ```bash\n npm install\n ```\n\n4. Start development server:\n ```bash\n npm start\n ```\n\n5. In your Python code, set `_RELEASE = False` in `__init__.py`\n\n6. Run the example app in another terminal:\n ```bash\n uv run streamlit run example_app.py\n ```\n\n### Building for Production\n\n1. Build the frontend:\n ```bash\n cd streamlit_json_tip/frontend\n npm run build\n ```\n\n2. Set `_RELEASE = True` in `__init__.py`\n\n3. Build the Python package:\n ```bash\n uv run python -m build\n ```\n\n4. Upload to PyPI:\n ```bash\n uv run python -m twine upload dist/*\n ```\n\n### Build Scripts\n\nThe project includes convenient uv scripts for common development tasks:\n\n#### Frontend Development\n```bash\nuv run build-frontend # Build React frontend for production\n```\n\n#### Package Building\n```bash\nuv run clean # Clean build artifacts\nuv run build # Clean + build Python package\nuv run build-check # Build + validate package with twine\n```\n\n#### Publishing\n```bash\nuv run publish-test # Build + upload to TestPyPI\nuv run publish # Build + upload to PyPI\n```\n\n#### Complete Workflow\n```bash\nuv run release-test # Build frontend + publish to TestPyPI\nuv run release # Build frontend + publish to PyPI (production)\n```\n\nFor a complete release, simply run:\n```bash\nuv run release\n```\n\nThis will build the frontend, package the Python distribution, validate it, and upload to PyPI.\n\n## License\n\nMIT License\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A Streamlit custom component for viewing JSON with interactive tooltips and tags",
"version": "0.2.4",
"project_urls": {
"Bug Tracker": "https://github.com/isaac/streamlit-json-tip/issues",
"Documentation": "https://github.com/isaac/streamlit-json-tip#readme",
"Homepage": "https://github.com/isaac/streamlit-json-tip",
"Repository": "https://github.com/isaac/streamlit-json-tip"
},
"split_keywords": [
"streamlit",
" json",
" viewer",
" tooltip",
" component",
" interactive"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "4be545a63ac7390b2ef923e66d121b9b9fc6141d9c209e2073b60252f91b8dde",
"md5": "348230b7f6f34d56314790891d5afbc3",
"sha256": "43776cf297956cbf3b9484fc43aa0ab237b5f7b21c27d6d0d8d46f9b43ef12a8"
},
"downloads": -1,
"filename": "streamlit_json_tip-0.2.4-py3-none-any.whl",
"has_sig": false,
"md5_digest": "348230b7f6f34d56314790891d5afbc3",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 654136,
"upload_time": "2025-07-26T15:24:18",
"upload_time_iso_8601": "2025-07-26T15:24:18.653849Z",
"url": "https://files.pythonhosted.org/packages/4b/e5/45a63ac7390b2ef923e66d121b9b9fc6141d9c209e2073b60252f91b8dde/streamlit_json_tip-0.2.4-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "7f9b243dac648b058b4ead5a6c0bfd869bd6f3bdd1746d6128d407065cef07f8",
"md5": "90963277dafdad479559492c819918e5",
"sha256": "5011306b3d32117e7431423b6818efa9ffb190904671b2ff6edde80920623c7f"
},
"downloads": -1,
"filename": "streamlit_json_tip-0.2.4.tar.gz",
"has_sig": false,
"md5_digest": "90963277dafdad479559492c819918e5",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 770741,
"upload_time": "2025-07-26T15:24:20",
"upload_time_iso_8601": "2025-07-26T15:24:20.426282Z",
"url": "https://files.pythonhosted.org/packages/7f/9b/243dac648b058b4ead5a6c0bfd869bd6f3bdd1746d6128d407065cef07f8/streamlit_json_tip-0.2.4.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-26 15:24:20",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "yourusername",
"github_project": "streamlit-json-tip",
"github_not_found": true,
"lcname": "streamlit-json-tip"
}
JSON
