agentation-vanilla

agentation-vanilla is a powerful visual annotation tool designed specifically for local development of vanilla JavaScript applications. This project serves as a lightweight alternative to Agentation, which is primarily tailored for React, offering similar functionality without requiring any installations or user accounts.

Key Features

• Inspect Mode: Easily hover over elements to view selectors, styles, and dimensions. Click to pin and copy relevant information.
• Annotate Mode: Drop numbered markers with notes by clicking on elements or selecting text, facilitating clear communication about modifications or issues.
• Intent Tags: Classify annotations as bugs, styles, features, or content to maintain organized records.
• Copy as Markdown: Generate structured markdown from annotations for seamless integration into AI tools like Claude Code or Cursor.
• Per-Page Persistence: All annotations remain intact during page refreshes and navigation, ensuring continuity in the annotation process.
• Shadow DOM Isolation: The tool operates without interfering with the existing styles in the application, preserving the original design.
• Compatible with Any Stack: This tool is versatile and works effectively with various tech stacks, or even without a backend.

Getting Started

Integrating agentation-vanilla into an application is straightforward. Simply add the following script tag to the HTML file:

<script src="https://cdn.jsdelivr.net/gh/mearnest-dev/agentation-vanilla@main/agentation-vanilla.js"></script>

Upon integration, a toolbar will effortlessly appear in the bottom-right corner of the application.

For development purposes, it can be conditionally loaded to avoid cluttering production environments:

<script>
  if (location.hostname === 'localhost') {
    const s = document.createElement('script');
    s.src = 'https://cdn.jsdelivr.net/gh/mearnest-dev/agentation-vanilla@main/agentation-vanilla.js';
    document.body.appendChild(s);
  }
</script>

Example Usage

Annotations from the agentation-vanilla can be exported in a clear, structured markdown format, ideal for documentation or task management:

## [style] Annotation 1
**Element:** `div.card`
**Selector:** `section.features > div.card:nth-child(3)`
**Text:** "Precise CSS selectors, computed styles, and element paths"
**Styles:** `padding: 24px; color: rgb(26, 26, 26); font-size: 16px`
**Note:** round the corners, 12px

## [bug] Annotation 2
**Element:** `p`
**Selector:** `section.hero > p`
**Selected text:** "This is a demo page with various UI elements"
**Styles:** `color: rgb(102, 102, 102); font-size: 16px`
**Note:** change this copy

Keyboard Shortcuts

Efficient navigation through the tool is facilitated via keyboard shortcuts:

For a live demonstration, clone the repository and run the demo server:

git clone https://github.com/mearnest-dev/agentation-vanilla.git
cd agentation-vanilla
npm run demo

Access the demo at: http://localhost:3333/demo.

agentation-vanilla aims to simplify the process of annotation and feedback collection during the development of vanilla JS applications, enhancing developer productivity and collaboration.