uisem-react

The React SDK for UISem - UI Semantic Layer. This package provides the LayoutMark component for adding semantic markup to your UI components.

Installation

npm install uisem-react

Usage

import { LayoutMark } from 'uisem-react'

<LayoutMark
  id="home.hero.main"
  type="hero"
  meta={{
    intent: 'Primary value proposition',
    role: 'primary',
    importance: 'high',
    editable: ['spacing', 'copy', 'cta']
  }}
>
  <Hero />
</LayoutMark>

Purpose

uisem-react provides a standardized way to add semantic layout information to your React components. This enables AI tools and browser extensions to better understand your UI structure and make intelligent modifications.

API Documentation

LayoutMark Component Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | id | string | Yes | Stable unique identifier (core for AI / Inspector) | | type | string | Yes | Layout type (hero, section, card, sidebar, etc.) | | meta | LayoutMeta | No | Metadata for intent, role, importance, editable properties | | as | keyof JSX.IntrinsicElements | No | HTML tag to render as (defaults to 'section') | | children | React.ReactNode | Yes | Child elements to wrap |

LayoutMeta Interface

| Property | Type | Description | |----------|------|-------------| | intent | string | The intended purpose of the layout element | | role | 'primary' | 'secondary' | 'supporting' | The role of the element in the layout | | importance | 'high' | 'medium' | 'low' | The importance level of the element | | editable | LayoutEditableProperty[] | List of properties that can be edited | | constraints | Record<string, any> | Additional constraints for the layout element |

LayoutEditableProperty Types

Possible values:

• 'spacing'
• 'padding'
• 'margin'
• 'copy'
• 'cta'
• 'color'
• 'typography'
• 'layout'
• 'visibility'

Compiled Output (HTML)

<section
  data-layout="hero"
  data-layout-id="home.hero.main"
  data-layout-meta="{...}"
></section>

Browser Support

This package supports all modern browsers that support React 16.8+.

License

MIT