schepta

Framework-agnostic rendering engine for server-driven UI

schepta is a powerful, framework-agnostic rendering engine that transforms JSON schemas into fully functional UI components. It works seamlessly with React, Vue, and vanilla JavaScript, providing a unified approach to server-driven UI.

🚀 Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm --filter docs dev

📚 Documentation

Core Concepts

Learn the fundamental concepts that power schepta:

• 01. Factories - How schemas become components
• 02. Schema Language - The syntax for defining UI
• 03. Provider - Global configuration and context
• 04. Schema Resolution - From JSON to React/Vue
• 05. Renderer - The rendering engine
• 06. Middleware - Transforming props and behavior
• 07. Debug System - Development tools

Examples

See schepta in action with interactive examples:

• React Examples - React with react-hook-form
• React Material UI Examples - React with Material UI
• React Chakra UI Examples - React with Chakra UI
• Vue Examples - Vue with custom form adapter
• Vue Vuetify Examples - Vue with Vuetify Material Design

🎯 Key Features

• Framework Agnostic: Works with React, Vue, and vanilla JavaScript
• Schema-Driven: Define UI using JSON schemas
• Type-Safe: Full TypeScript support
• Extensible: Custom components, renderers, and middleware
• Developer Experience: Built-in debug tools and validation

💡 Example

{
  "type": "object",
  "x-component": "form-container",
  "properties": {
    "email": {
      "type": "string",
      "x-component": "InputText",
      "x-ui": {
        "label": "Email",
        "placeholder": "Enter your email"
      }
    }
  }
}

This simple schema becomes a fully functional form with validation, state management, and submission handling.

🔗 Resources

• GitHub Repository