@fivora/editable-components

Official visual editing components, responsive layout primitives, and category theme presets for Fivora templates.

Features

• 🎯 Direct Fivora Data Binding: Automatically adds data-preview-field-path and data-design-section annotations for the Fivora Visual Editor.
• 📐 Auto-Balancing Layouts: Cards and containers (EditableGrid, EditableBox) flex and balance evenly across any screen width.
• 🎨 Category Theme Presets: Built-in palettes for Tech, Restaurant, Luxury, Retail, Medical, and Corporate.
• 🔤 Typed Typography Control: Direct size, weight, color, lineHeight, and align props without ad-hoc CSS.
• ⚡ Zero Runtime Overhead: Lightweight React components with native DOM attributes and clean inline CSS variables.

Installation

npm install @fivora/editable-components
# or
yarn add @fivora/editable-components
# or
pnpm add @fivora/editable-components

Quick Start

1. Typography & Text Editing

import {
  EditableText,
  EditableHeading,
  EditableParagraph,
  EditableBadge,
} from '@fivora/editable-components';

export function HeroSection({ hero }) {
  return (
    <section>
      <EditableBadge
        data-preview-field-path="home.heroBadge"
        defaultValue={hero.badge}
        variant="primary"
      />

      <EditableHeading
        level={1}
        size="5xl"
        weight="bold"
        color="heading"
        data-preview-field-path="home.heroTitle"
        defaultValue={hero.title}
      />

      <EditableParagraph
        lead
        color="muted"
        data-preview-field-path="home.heroSubtitle"
        defaultValue={hero.subtitle}
      />
    </section>
  );
}

2. Auto-Balancing Card Grid

import { EditableGrid, EditableCard } from '@fivora/editable-components';

export function FeaturesGrid({ features }) {
  return (
    <EditableGrid minCardWidth="280px" gap="lg" equalHeight>
      {features.map((feature, idx) => (
        <EditableCard
          key={idx}
          itemPath={`home.features[${idx}]`}
          item={feature}
          balance
          radius="12px"
        />
      ))}
    </EditableGrid>
  );
}

3. Industry Category Themes

import { THEME_PRESETS, getCategoryTheme } from '@fivora/editable-components';

// Available presets: restaurant, luxury, medical, tech, retail, corporate
const theme = THEME_PRESETS.tech;

// Or customize:
const customTheme = getCategoryTheme('luxury', {
  primaryColor: '#c5a059',
  borderRadius: '16px',
});

License

MIT © Fivora