JSON Schema Form Render

A powerful, customizable, and themeable form builder built as a Web Component. This component leverages modern Web Components technologies to provide a reusable, encapsulated form building solution that can be used in any web application.

Live Demo

Check out the live demo to see the component in action!

Web Components Implementation

This component is built using the following Web Components technologies:

Custom Elements

Extends HTMLElement to create a custom <form-builder> element
Implements lifecycle methods (constructor, attributeChangedCallback)
Uses observed attributes for reactivity
Provides a clean public API

Shadow DOM

Uses Shadow DOM for style encapsulation
Prevents style leakage and conflicts
Maintains component isolation
Enables scoped styling

Component Structure

class FormBuilder extends HTMLElement {
  private shadow: ShadowRoot;
  private form: HTMLFormElement;
  
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    // ... initialization
  }
  
  static get observedAttributes() {
    return ['schema', 'theme', 'schema-url', 'theme-style', 'theme-color', 'font-family'];
  }
  
  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    // ... handle attribute changes
  }
}

customElements.define('form-builder', FormBuilder);

Usage as Web Component

<!-- Basic usage -->
<form-builder></form-builder>

<!-- With attributes -->
<form-builder
  schema='[...]'
  theme-style="modern"
  theme-color="ocean"
></form-builder>

<!-- With event handling -->
<script>
  const formBuilder = document.querySelector('form-builder');
  formBuilder.addEventListener('formSubmit', (event) => {
    console.log(event.detail.values);
  });
</script>

Features

🎨 Multiple theme styles and color schemes
📱 Responsive design
🔍 Searchable select fields
🎯 Form validation
📝 Multiple field types support
🎭 Custom styling options
🌙 Dark mode support
🔒 Password field with toggle
📞 Telephone field with country selection
🎨 Color picker
📁 File upload with preview
🖼️ Image upload with preview
⏰ Time input
📅 Date input
📋 Textarea support
✅ Checkbox and radio groups
🔍 Search functionality
🎯 Custom validation
🎨 Custom CSS classes
🌐 Internationalization support

Installation

npm install form-builder

Basic Usage

<form-builder
  schema='[
    {
      "type": "text",
      "name": "username",
      "label": "Username",
      "required": true
    },
    {
      "type": "email",
      "name": "email",
      "label": "Email",
      "required": true
    },
    {
      "type": "select",
      "name": "country",
      "label": "Country",
      "options": [
        {"value": "us", "label": "United States"},
        {"value": "ca", "label": "Canada"},
        {"value": "uk", "label": "United Kingdom"}
      ]
    }
  ]'
  theme-style="modern"
  theme-color="ocean"
></form-builder>

Field Types

The component supports the following field types:

text - Text input
email - Email input
password - Password input with toggle
number - Number input
textarea - Text area
select - Select dropdown
checkbox - Checkbox input
radio - Radio input group
hidden - Hidden input
telephone - Telephone input with country selection
date - Date input
color - Color picker
file - File upload
time - Time input
image - Image upload

Field Configuration

Each field can be configured with the following options:

interface FormField {
  type: FieldType;
  name: string;
  label: string;
  required?: boolean;
  placeholder?: string;
  options?: FieldOption[];
  defaultValue?: string | boolean | number;
  helpText?: string;
  // New styling options
  style?: {
    width?: string;
    height?: string;
    backgroundColor?: string;
    color?: string;
    borderColor?: string;
    borderRadius?: string;
    padding?: string;
    margin?: string;
    fontSize?: string;
    fontWeight?: string;
    customClass?: string;
  };
  // Field-specific options
  searchable?: boolean; // For select fields
  multiple?: boolean; // For select fields
  min?: number; // For number fields
  max?: number; // For number fields
  step?: number; // For number fields
  pattern?: string; // For text fields
  rows?: number; // For textarea
  cols?: number; // For textarea
  autocomplete?: string; // For input fields
  countryCode?: string; // For telephone fields
}

Themes

The component supports multiple theme styles and color schemes:

Theme Styles

modern - Modern design with subtle shadows
minimal - Clean and minimal design
rounded - Rounded corners and soft edges
flat - Flat design without shadows
outlined - Outlined design with borders

Color Schemes

ocean - Blue-based color scheme
sunset - Orange-based color scheme
forest - Green-based color scheme
cosmic - Purple-based color scheme
solarized - Solarized color scheme

Customization

Theme Customization

<form-builder
  theme-style="modern"
  theme-color="ocean"
  font-family="'Roboto', sans-serif"
></form-builder>

Field Styling

{
  type: "text",
  name: "custom",
  label: "Custom Styled Field",
  style: {
    width: "100%",
    height: "40px",
    backgroundColor: "#f5f5f5",
    color: "#333",
    borderColor: "#ddd",
    borderRadius: "4px",
    padding: "8px",
    margin: "10px 0",
    fontSize: "16px",
    fontWeight: "400",
    customClass: "my-custom-class"
  }
}

Special Features

Telephone Field

The telephone field includes:

Country selection with emoji flags
Country code prefix
Searchable country list
Keyboard navigation
Mobile-responsive design

File Upload

Features:

Drag and drop support
File size display
Multiple file upload
File preview
Remove file option

Image Upload

Features:

Image preview
Multiple image upload
Remove image option
Grid layout for previews
Drag and drop support

Select Field

Features:

Searchable options
Multiple selection
Custom styling
Keyboard navigation
Mobile-responsive design

Events

The component dispatches the following events:

formSubmit - Dispatched when the form is submitted

{
  detail: {
    values: {
      [fieldName]: fieldValue
    }
  }
}

Methods

getValues()

Returns the current form values.

const formBuilder = document.querySelector('form-builder');
const values = formBuilder.getValues();

resetForm()

Resets the form to its initial state.

const formBuilder = document.querySelector('form-builder');
formBuilder.resetForm();

CSS Customization

The component uses CSS custom properties for theming:

:host {
  --primary-color: #00BCD4;
  --secondary-color: #008BA3;
  --accent-color: #E0F7FA;
  --text-color: #263238;
  --background-color: #FFFFFF;
  --border-color: #B2EBF2;
  --error-color: #E57373;
  --success-color: #81C784;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --border-radius: 8px;
  --input-padding: 0.75rem 1rem;
  --border-width: 2px;
  --box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  --transition: all 0.2s ease;
}

Dark Mode

The component automatically supports dark mode using the prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  :host {
    --label-color: #ecf0f1;
    --border-color: #34495e;
    --input-bg: #2c3e50;
    --input-hover-bg: #34495e;
    --background-color: #2c3e50;
    --select-option-hover: #34495e;
    --select-option-selected: #2c3e50;
    --text-color: #ecf0f1;
  }
}

Browser Support

The component uses modern web standards and is compatible with:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Dependencies

No external dependencies required
Uses native Web Components
Uses native CSS custom properties
Uses native JavaScript features

Performance

Lazy loading of components
Efficient event handling
Minimal DOM operations
Optimized rendering
No external dependencies
Small bundle size

Accessibility

ARIA labels
Keyboard navigation
Focus management
Screen reader support
High contrast support
Color contrast compliance

Contributing

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a Pull Request

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.