RingCentral Embeddable - JSONSchemaPage

A powerful React component library that renders dynamic forms based on JSON Schema definitions. Built on top of react-jsonschema-form and beautifully styled with RingCentral Juno components.

🚀 Quick Navigation

Find exactly what you need:

📖 New to JSONSchemaPage?

➡️ Complete Documentation & Tutorial

• Installation guide, basic usage, and comprehensive examples
• Learn JSON Schema fundamentals and UI Schema customization

🔤 Need Form Inputs?

➡️ Form Input Widgets

• Text fields, numbers, dropdowns, checkboxes, file uploads
• All the input controls users type/select in

📄 Need Content Display?

➡️ Display Components

• Typography, alerts, links, static content
• Components that show information to users

🎯 Need User Actions?

➡️ Interactive Components

• Buttons, selection lists, search fields
• Components users click and interact with

📋 Need Complete Examples?

➡️ Complete Form Examples

• Real-world forms, validation patterns, complex workflows
• Full implementation examples

📊 Quick Reference

| I want to... | Go to | Example | |-------------------|-----------|-------------| | Learn the basics | Documentation | Installation, basic usage | | Add a text input | Text Input Widget | { type: 'string', title: 'Name' } | | Add a dropdown | Select Widget | { enum: ['option1', 'option2'] } | | Add a button | Button Fields | { 'ui:field': 'button' } | | Show an alert | Alert Fields | { 'ui:field': 'alert' } | | Build a contact form | Contact Form | Complete working example | | Handle file uploads | File Upload | { type: 'string', format: 'data-url' } |

⚡ Quick Start

import { JSONSchemaPage } from '@ringcentral-integration/jsonschema-page';
import { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({});

  const schema = {
    title: 'Contact Form',
    type: 'object',
    properties: {
      name: { type: 'string', title: 'Full Name' },
      email: { type: 'string', format: 'email', title: 'Email' }
    },
    required: ['name', 'email']
  };

  return (
    <JSONSchemaPage
      schema={schema}
      formData={formData}
      onFormDataChange={setFormData}
      onSubmit={(data) => console.log('Submitted:', data.formData)}
    />
  );
}

💡 How to Use These Stories

1. 📋 Copy JSON Configuration - Each story shows the exact schema, uiSchema, and formData
2. 👁️ Side-by-Side View - See your JSON config alongside the rendered component
3. 🎮 Interactive Examples - Click, type, and interact to see real behavior
4. 📊 Live Updates - Watch form data change in real-time as you interact

🛠️ Installation

npm install @ringcentral-integration/jsonschema-page

Peer Dependencies:

npm install @ringcentral/juno @ringcentral/juno-icon react styled-components

✨ Key Features

• 🎨 Beautiful UI - Styled with RingCentral Juno design system
• 📱 Responsive - Works on desktop and mobile
• 🔧 Highly Customizable - Extensive UI Schema options
• ✅ Built-in Validation - JSON Schema validation + custom rules
• 🎯 Interactive Elements - Buttons, search, custom fields
• 📊 Dynamic Forms - Conditional fields and arrays
• ♿ Accessible - WCAG compliant components
• ⚡ Performance Optimized - Handles large forms efficiently

🎯 Common Use Cases

• Configuration Forms - App settings and preferences
• Data Entry - Complex data collection
• Survey Forms - Dynamic questionnaires
• Admin Panels - Management interfaces
• User Profiles - Registration and profiles
• Multi-step Wizards - Complex workflows

🔗 Useful Links

• Complete Documentation - Learn everything
• GitHub Repository - Source code
• JSON Schema Spec - Official specification
• React JSON Schema Form - Base library

Ready to build amazing forms? Start with the Documentation or explore the examples above! 🚀