# Vellum Vellum is a custom web component (``) designed to manage modular web applications. It provides a lightweight foundation for loading, initializing, and rendering mods (modules), using an action-driven system for decoupled communication. Whether you're building a small tool or a large-scale app, Vellum offers flexibility and extensibility without enforcing a rigid structure. ## Key Features - **Dynamic Mod Loading**: Add mods at runtime with automatic detection. - **Action System**: Enables loose coupling via event-driven message passing. - **Flexible Rendering**: Supports custom renderers for any content type (strings, DOM nodes, frameworks). - **Minimal Core**: Focuses on mod orchestration, leaving layout and logic to consumers. ## Quick Start Here’s a minimal example to get Vellum running: ```html Vellum Demo ``` ```javascript // my-mod.mjs export async function init(toolkit) { toolkit.dispatchAction({ type: 'action:register', detail: { actionType: 'layout:get-active', modName: 'my-mod', handler: (detail) => detail.callback({ content: '
Hello, Vellum!
' }) } }); } ``` - **Result**: Loads a mod that displays "Hello, Vellum!" in the shadow DOM. ## Installation 1. **Via npm** (assuming Vellum is published): ```bash npm install vellum ``` Then import: ```javascript import Vellum from 'vellum'; customElements.define('vellum-app', Vellum); ``` 2. **Direct Script**: ```html ``` Define the element manually if needed. ## Table of Contents - [Understanding Mods ](docs/mods.md ): Learn about Vellum’s building blocks. - [Layout Management ](docs/layouts.md ): Explore rendering and content retrieval. - [Action System ](docs/actions.md ): Dive into decoupled communication. - [Toolkit API ](docs/toolkit.md ): Understand mod interaction tools. - [Advanced Topics ](docs/advanced.md ): Tackle dynamic loading, performance, and more. - [Examples and Tutorials](docs/examples/ ): See Vellum in action. - [API Reference ](docs/api-reference.md ): Detailed technical specs. - [Documentation Outline ](docs/docs-outline.md ): Overview of this guide. ## Next Steps - **Create a Mod**: Start with [Understanding Mods](docs/mods.md) to build your first mod. - **Customize Rendering**: Check [Layout Management](docs/layouts.md) to set up a custom renderer. - **Leverage Actions**: Explore [Action System](docs/actions.md) to connect mods without coupling. - **Go Advanced**: Dive into [Advanced Topics](docs/advanced.md) for runtime mod loading and optimization.