element-context

Visual element selector that generates structured context for LLMs. Click elements on any webpage, capture their metadata (selector, attributes, styles, component hierarchy), add notes, and copy as Markdown or JSON.

Detects React, Vue (2/3, Nuxt), and Svelte components automatically, with full parent chain — framework internals filtered out.

Early stage — this project is under active development. APIs may change, expect rough edges. Feedback and contributions welcome.

Install

npm install element-context

Usage

Vanilla JS (ESM)

import { elementContext } from "element-context";

document.getElementById("inspect-btn").addEventListener("click", () => {
    elementContext.activate();
});

React

import { ElementContext } from "element-context/react";

function App() {
    return (
        <>
            <MyApp />
            {import.meta.env.DEV && <ElementContext />}
        </>
    );
}

Or as a hook:

import { useElementContext } from "element-context/react";

function DevTools() {
    useElementContext();
    return null;
}

Vue

<script setup>
import { ElementContext } from "element-context/vue";
</script>

<template>
    <ElementContext />
</template>

Or as a composable:

<script setup>
import { useElementContext } from "element-context/vue";
useElementContext();
</script>

Or register globally:

import { elementContextPlugin } from "element-context/vue";
app.use(elementContextPlugin);

API

window.__elementContext.activate(); // Show toolbar
window.__elementContext.deactivate(); // Remove UI
window.__elementContext.inspect(el); // Capture single element
window.__elementContext.getCaptures(); // Get all captures
window.__elementContext.toMarkdown(); // Export as Markdown
window.__elementContext.toJSON(); // Export as JSON
window.__elementContext.copyToClipboard(); // Copy Markdown
window.__elementContext.clear(); // Clear captures

Features

• Shadow DOM isolation — won't affect host page styles
• Frosted glass UI with draggable toolbar
• Side panel with capture list, hover-to-highlight
• Notes per element (via badge click or panel)
• Component hierarchy detection (React, Vue, Svelte)
• Markdown + JSON export
• Bookmarklet support

Development

npm install
npm run dev        # http://localhost:8082
npm run build      # IIFE + ESM + bookmarklet
npm run typecheck

License

MIT