@duotech/content-blocks

TypeScript types and Zod validation for block-based content systems.

17 block types for flexible, JSONB-stored content in PostgreSQL.

Install

npm install @duotech/content-blocks zod

Usage

import { validateBlockContent, isBlockContent } from '@duotech/content-blocks';
import type { BlockContent, Block } from '@duotech/content-blocks/types';

// Validate content from database
const result = validateBlockContent(row.blocks);
if (result.success) {
  renderBlocks(result.data.blocks);
}

// Type guard
if (isBlockContent(jsonData)) {
  // jsonData is typed as BlockContent
}

Block Types (17)

| Category | Blocks | |----------|--------| | Text | text, heading | | Media | image, text-image, gallery, video | | List | benefits, features, process, checklist | | Interactive | faq, cta | | Data | comparison, stats, testimonial | | Utility | alert, divider |

JSON Structure

{
  "version": "1.0",
  "blocks": [
    { "type": "heading", "level": 2, "title": "Section Title" },
    { "type": "text", "content": "Markdown content..." },
    { "type": "features", "items": [{ "title": "...", "description": "..." }] }
  ]
}

Exports

// Full package
import { validateBlockContent, BLOCK_TYPES } from '@duotech/content-blocks';

// Types only (tree-shakeable)
import type { Block, CTABlock } from '@duotech/content-blocks/types';

// Validation only (tree-shakeable)
import { blockContentSchema } from '@duotech/content-blocks/validation';

Content System

This package is the type layer of DuoTech's content system. For the complete system (guidelines, workflows, templates), see:

• docs/content-system/ in duopacks
• AGENT-GUIDE.md for AI agent setup instructions

Note on React Components

This package does NOT include React rendering components. Block renderers are project-specific (different UI libraries, animations, styling). See extraction/content-system/ in duopacks for reference implementations.