> ## Documentation Index
> Fetch the complete documentation index at: https://dapplets.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Key Components

> The Mutable Web is built on a set of foundational components that work together to redefine how we interact with digital content. Each component plays a critical role in enabling customization, integration, and collaboration, making the web more dynamic, user-centric, and adaptable. Let’s explore these key components:

<img alt="Keycomps Hero Light" class="block dark:hidden" src="https://mintcdn.com/dapplets/wRdVJXf87WLT473Y/images/keycomps-light.png?fit=max&auto=format&n=wRdVJXf87WLT473Y&q=85&s=8fc1e0250f02f16c393bb377b819e293" width="1646" height="760" data-path="images/keycomps-light.png" />

<img alt="Keycomps Hero Dark" class="hidden dark:block" src="https://mintcdn.com/dapplets/wRdVJXf87WLT473Y/images/keycomps-dark.png?fit=max&auto=format&n=wRdVJXf87WLT473Y&q=85&s=d7c17d1d027dce842be64adce90fa03b" width="1646" height="760" data-path="images/keycomps-dark.png" />

## Insertion Points

**Insertion Points** are predefined locations within a web page where modifications can be applied. They serve as anchors for integrating new functionalities, tools, or visual enhancements without disrupting the underlying website’s structure.

* **Precision:** Target specific areas of a webpage for modification.

* **Flexibility:** Enable seamless integration of widgets or applications.

* **Non-Intrusive:** Maintain the integrity of the original web content while enhancing usability.

By leveraging **Insertion Points**, developers and users can introduce impactful changes that feel native to the browsing experience.

***

## Widgets

**Widgets** are modular, self-contained units of functionality added to web pages. From displaying **real-time data** to introducing **interactive tools**, widgets extend the capabilities of any website.

**Examples of Widgets:**

* **Content Enhancers:** Add translations, summaries, or annotations.

* **Interactive Tools:** Embed calculators, polls, or form-fillers.

* **Visual Overlays:** Customize themes or layouts with new design elements.

Widgets empower users to personalize their online experience while offering developers an open platform for innovation.

### WidgetProps Interface

The `WidgetProps` interface serves as a contract for the properties and methods a widget must implement to interact effectively with the BOS component and platform.

```javascript theme={null}
interface WidgetProps {
  context: TransferableContext;
  link?: {
    id: UserLinkId; 
    authorId: string;
  };
  notify: (modalProps: ModalProps) => void;
  query: (target: Target) => TransferableContext | null;
  linkDb: {
    get: (
      ctx: TransferableContext,
      accountIds?: string[] | string,
      indexRules?: LinkIndexRules
    ) => Promise<LinkedDataByAccountDto>;
    set: (
      ctx: TransferableContext,
      dataByAccount: LinkedDataByAccountDto,
      indexRules: LinkIndexRules
    ) => Promise<void>;
  };
  commitDocument: (
    appDocId: DocumentId,
    appDocMeta: DocumentMetadata,
    ctx: TransferableContext,
    dataByAccount: LinkedDataByAccountDto
  ) => Promise<void>;
  getDocument: () => Promise<DocumentDto | null>;
}
```

<Accordion title="WidgetProps Explained" defaultOpen={false}>
  \- `context:` Represents the operational scope of the widget.

  \- `ink:` Contains optional metadata for linking operations, including `id` and `authorId`.&#x20;

  \- `notify:` Triggers modals or notifications with specified properties.&#x20;

  \- `query:` Performs targeted queries, returning context data.&#x20;

  \- `linkDb:` Provides \`get\` and \`set\` methods for managing data connections.&#x20;

  \- `commitDocument:` Commits a document with specified metadata and context.&#x20;

  \- `getDocument:` Retrieves the current document associated with the widget.
</Accordion>

These capabilities ensure efficient context management, document interactions, and seamless data operations.

## Controllers

**Controllers** serve as the bridge between **Widgets** and the web page content. They manage widget behavior, ensuring alignment with user preferences and consistent interactions across platforms.

**Key Functions:**

* **Orchestration:** Coordinate multiple widgets for cohesive functionality.

* **Customization:** Fine-tune widget settings and interactions.

* **Consistency:** Guarantee a smooth user experience across different websites.

Controllers simplify complex interactions, making advanced customization user-friendly and reliable.

## Applications

**Applications** in the Mutable Web are collections of **Widgets** and **Controllers** designed to operate cohesively. They address specific use cases or workflows, offering end-to-end solutions.

**Examples of Applications:**

* **Productivity Suites:** Integrate tools for task management, note-taking, and calendars.

* **E-Commerce Enhancements:** Add price comparisons, coupon finders, and product reviews.

* **Accessibility Solutions:** Provide screen readers, high-contrast modes, and text resizing tools.

Applications unlock highly tailored and feature-rich browsing experiences, catering to both general users and niche markets.

## Why These Components Matter

The synergy of **Insertion Points**, **Widgets**, **Controllers**, and **Applications** forms the foundation of the Mutable Web, enabling:

* **User Empowerment:** Individuals can control and personalize their browsing experience.

* **Developer Innovation:** Build and share dynamic tools that seamlessly integrate into any website.

* **Collaborative Growth:** Foster a community-driven approach to web customization and improvement.

<Tip>
  These components are more than technical tools—they represent a fundamental shift in how we perceive and interact with digital spaces.
</Tip>

The Mutable Web is not just a collection of components—it's a new way of thinking about the internet. By understanding and leveraging these building blocks, you can unlock limitless opportunities for customization, innovation, and collaboration.

**Let’s shape the future of the internet together.**