@loyalid/layout-builder

Web renderer and editor for Loyalid Layout Builder.

Install

npm install @loyalid/layout-builder

Usage

LayoutRenderer (Live Preview)

import LayoutRenderer from '@loyalid/layout-builder';

function Preview({ jsonString }) {
  return <LayoutRenderer jsonString={jsonString} />;
}

Supported frameworks: Native CSS, Bootstrap 4, Bootstrap 5, Tailwind CSS.

LayoutEditor (Visual Builder)

import { LayoutEditor } from '@loyalid/layout-builder';

function Editor({ value, onChange }) {
  return <LayoutEditor value={value} onChange={onChange} />;
}

JsonEditor (Raw JSON)

import { JsonEditor } from '@loyalid/layout-builder';

function Editor({ value, onChange }) {
  return <JsonEditor value={value} onChange={onChange} />;
}

Development

npm install
npm run dev

Opens at http://localhost:5173.

Build

npm run build

Output goes to dist/.

File Structure

src/
├── components/
│   ├── LayoutRenderer.jsx   ← Renders layout JSON as live HTML preview
│   ├── LayoutEditor.jsx     ← Visual drag-and-drop block editor
│   └── JsonEditor.jsx       ← Raw JSON editor with syntax highlighting
├── core/
│   ├── styleMapper.js       ← CSS-to-platform style conversion
│   ├── blockMapper.js       ← Block type registry
│   └── index.js             ← Core exports
├── App.jsx                  ← Demo app with tabbed interface
├── main.jsx                 ← Entry point
└── sampleData.js            ← Sample layout data