Skip to main content
Keycomps Hero Light

​
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. 
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>;
}
- context: Represents the operational scope of the widget.- ink: Contains optional metadata for linking operations, including id and authorId. - notify: Triggers modals or notifications with specified properties. - query: Performs targeted queries, returning context data. - linkDb: Provides `get` and `set` methods for managing data connections. - commitDocument: Commits a document with specified metadata and context. - getDocument: Retrieves the current document associated with the widget.
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.
These components are more than technical tools—they represent a fundamental shift in how we perceive and interact with digital spaces.
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.