Specs

@semantic-ui/specs provides tools for defining and interpreting component APIs. It enables semantic HTML parsing, documentation generation, and bidirectional transformation between HTML and component metadata.

Installation

Specs can be used as a standalone package or alongside Semantic UI components.

npm install @semantic-ui/specs

Basic Usage

import { SpecReader } from '@semantic-ui/specs';
import buttonSpec from './button.spec.js';

const reader = new SpecReader(buttonSpec);

// Generate runtime metadata
const componentSpec = reader.getWebComponentSpec();

// Parse semantic HTML
const parts = reader.getComponentPartsFromHTML(
  '<ui-button primary large>Save</ui-button>'
);

// Generate HTML from modifiers
const html = reader.getCodeFromModifiers('primary large', {
  html: 'Save',
});

API Sections

Core

• SpecReader - Create spec readers and generate runtime metadata

  • Constructor
  • getWebComponentSpec()

• Spec Helpers - Reusable constants and helpers for common patterns

  • getVariations() - Get multiple variations
  • getStates() - Get multiple states
  • modifyVariation() - Customize variations
  • Variation constants (SIZE_VARIATION, COLORED_VARIATION, etc.)
  • State constants (HOVER_STATE, ACTIVE_STATE, etc.)
  • Options arrays (SIZE_OPTIONS, COLOR_OPTIONS, etc.)

Documentation Generation

• Documentation - Generate structured documentation from specs
  • getDefinition()

Semantic Interpretation

• Parsing HTML - Extract semantic meaning from HTML

  • getComponentPartsFromHTML()
  • getAttributesFromModifiers()

• Generating HTML - Create HTML from semantic attributes

  • getCodeFromModifiers()

Utilities

• Utilities - Helper methods for component metadata
  • getTagName()
  • getComponentName()
  • formatDescription()