📦 @adityabheke/renderer-package

A production-ready React page renderer that converts JSON schema into fully responsive UI using Tailwind CSS v3 and runtime CSS variables.

Built for dynamic website/page builder systems.

🚀 Features

• ⚡ Schema-driven rendering
• 🎨 Tailwind CSS v3 (Integration required in consumer app)
• 📱 Fully responsive (container query variants supported)
• 🎞 Built-in animation support (tailwindcss-animate)
• 🧩 Plug-and-play integration
• 📦 ESM + CJS support
• 🧠 TypeScript definitions included
• ⚠️ Requires Tailwind v3 configuration in the user project

📥 Installation

npm install @adityabheke/renderer-package

🎨 Tailwind CSS Setup (Required)

[!CAUTION] STRICT REQUIREMENT: This package is built for Tailwind CSS v3. DO NOT use Tailwind CSS v4, as it is currently not compatible with the generated class system used here.

1️⃣ Install Tailwind v3

If you haven't already, install Tailwind CSS v3 and its peer dependencies:

npm install -D tailwindcss@3 postcss autoprefixer

2️⃣ Initialize Configuration

npx tailwindcss init -p

3️⃣ Update tailwind.config.js

You must add the package's distribution files to your content array so Tailwind can scan them for used classes:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@adityabheke/renderer-package/dist/**/*.{js,ts,jsx,tsx}", // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("tailwindcss-animate"), // Recommended for animation support
  ],
}

4️⃣ Add Tailwind Directives

Ensure your main CSS file (e.g., src/index.css) includes the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

⚠️ Peer Dependencies

Make sure your project has the following installed:

npm install react react-dom react-router-dom lucide-react

Required versions:

• react >= 18
• react-dom >= 18
• react-router-dom >= 6
• lucide-react >= 0.300.0

🛠 Usage

Import Styles and Use the Renderer (Required Once)

import "@adityabheke/renderer-package/styles.css";
import { PageRenderer } from "@adityabheke/renderer-package";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='*' element={<PageRenderer url={CLIENT_URL} />} />
      </Routes>
    </BrowserRouter>
  )
}

CLIENT_URL = will be provided by admin

🧠 How It Works

• Parses JSON schema

• Resolves components using internal ComponentRegistry

• Applies dynamic CSS variables

• Leverages your project's Tailwind CSS v3 configuration for styling

• Supports responsive container-based variants

• Supports animation classes like:

  • animate-in
  • slide-in-from-*

📁 Package Output Structure

dist/
  index.js
  index.cjs
  index.d.ts
  styles.css

🧪 Tested With

• Vite
• React 18+

📌 Versioning

This package follows semantic versioning:

• 1.x → Stable renderer core
• 2.x → Breaking schema or architecture changes