Primitives
The fundamental building blocks of the vibecoding framework. These primitives provide the foundation for creating structured, reusable, and composable AI prompts.
Architecture Overview
Vibecoding is built on a set of core primitives that work together to provide a complete framework for structured prompt engineering. Each primitive serves a specific purpose and can be composed with others to create complex functionality.
Design Philosophy
Composability
Every component can be combined with others to create complex functionality
Type Safety
Full TypeScript support with strict typing for all block types and content
Immutability
State updates are immutable, making debugging and time-travel possible
Extensibility
Easy to add new block types, content formats, and serialization targets
Performance
Optimized for large documents with efficient rendering and state updates
Accessibility
Built with accessibility in mind, supporting screen readers and keyboard navigation
Core Primitives
Key Features:
- Type-safe block definitions
- Serializable content structures
- Metadata support
- Unique ID system
Key Features:
- String content for simple blocks
- Object structures for complex data
- Validation schemas
- Type inference
Key Features:
- Editor store for blocks
- UI store for interface state
- Template store for dialogs
- Persistence layer
Key Features:
- Block CRUD operations
- Drag and drop events
- Focus management
- Keyboard shortcuts
Key Features:
- XML prompt generation
- JSON export/import
- Template serialization
- Custom formatters
Data Flow
Understanding how data flows through the vibecoding system is crucial for building effective integrations and extensions.
1. Block Creation
Blocks are created with typed content and metadata
2. State Management
Zustand stores manage block state and UI interactions
3. Serialization
Blocks are serialized to XML, JSON, or custom formats