Sentica Site Engine

Sentica Site Engine is a monorepo for building static sites from reusable React components and validated JSON configuration.

Future flow:

Page JSON
-> validation
-> block registry
-> React renderer
-> static output

Current status: Step 4.4. The repository has workspace structure, shared tooling, minimal apps, semantic design tokens, general site schemas, a block registry with block-specific schemas, a React renderer, reusable structural block variants and a technical playground for inspecting and temporarily editing configurations with site identity.

Structure

apps/playground        Internal development app
apps/demo              Public static demo app
packages/ui            shadcn-style primitives
packages/blocks        First reusable page sections
packages/schemas       General Zod schemas for site/page/section structure
packages/site-engine   Registry, block-specific validation and React renderer
packages/design-tokens Shared semantic CSS variables
packages/*-config      Shared TypeScript and ESLint configuration
docs/                  Architecture, specs, roadmap and decisions

Prerequisites

• Node.js 20 or newer
• pnpm 9 or newer

Quick Start

Install dependencies:

pnpm install

Start the internal playground:

pnpm dev:playground

Open:

http://127.0.0.1:5173

Start the public demo app:

pnpm dev:demo

Open:

http://127.0.0.1:5174

Run the full local verification suite:

pnpm typecheck
pnpm lint
pnpm test
pnpm build

apps/playground lets you switch between temporary demo and validation-case configurations, edit JSON in a non-persistent textarea, inspect readable Zod errors, inspect selected sections, browse the registered block catalog, inspect site identity and preview the last valid configuration in mobile, tablet or desktop widths. It also lets you select a page from the current configuration without implementing routing.

apps/demo renders the same demo configurations through the same SiteRenderer path and exposes a technical page selector.

Commands

pnpm install
pnpm dev
pnpm dev:playground
pnpm dev:demo
pnpm typecheck
pnpm lint
pnpm test
pnpm build

Documentation

• Architecture overview
• Repository structure
• Boundaries
• Page schema concept
• Block registry concept
• Design system
• Implementation plan
• ADR 0001

Available Blocks

• navbar.simple
• navbar.floating
• hero.centered
• hero.split
• hero.immersive
• features.grid
• features.timeline
• features.alternating
• faq.accordion
• cta.banner
• footer.simple
• footer.columns

Each block exports component, Zod schema, metadata and registry definition together from packages/blocks.

type identifies the semantic concept, such as hero, features or footer. variant identifies the structural representation, such as hero.immersive or features.timeline. theme.preset applies the global visual tone across variants without adding CSS or Tailwind classes to JSON.

footer.columns supports a brand area plus grouped navigation:

{
  "brand": "Brand",
  "description": "Optional footer copy",
  "groups": [
    {
      "title": "Group",
      "links": [{ "label": "Home", "href": "/" }]
    }
  ],
  "copyright": "Optional copyright"
}

Temporary demo configurations live in packages/site-engine/src/examples/. They are used by apps/playground and apps/demo and will be replaced or moved when Step 5 introduces static multi-site generation.

Site Identity

Step 4.2 adds optional theme, layout and brand objects to SiteSchema.

theme.preset currently accepts playful, corporate, minimal or editorial. layout currently supports navbar: compact | large and footer: simple | extended. brand supports name, optional tagline and optional logoText.

These fields do not allow custom colors, CSS, Tailwind classes or runtime styling. They are identifiers consumed by the renderer context so existing blocks can vary spacing, radius, typography scale and emphasis with static Tailwind classes.

Color tokens such as primary, background, muted, border and foreground colors currently come from the global design tokens in packages/design-tokens and packages/ui/styles.css. They are not configured per site in JSON yet.

Not Implemented Yet

• persistent playground editor
• drag-and-drop composition
• slug routing/static multi-site output
• custom theme editor
• LLM integration
• CMS
• database
• authentication
• deployment

Current Renderer Contract

The general schema validates site, page and section structure. The registry maps type.variant to a React component, a Zod schema for that section's specific data and metadata. The renderer validates the section with the registered schema before rendering the component.

Step 5 and LLM integration have not started.