elemenote

v0.23.0

Published

17 hours ago

Embeddable annotation widget for live sites — global script or React/Next.js (elemenote/react). Pins, exports, MCP-friendly context. https://elemenote.io

0High
0Medium
0Low

ploau

elemenote annotations widget react nextjs next shadow-dom pins markdown mcp

elemenote

Elemenote is a human-first annotation layer for live web pages: pin elements, capture context, export notes, and hand structured briefs to coding assistants instead of re-describing the UI.

Use in development, not as a default production feature. Elemenote fits local dev, staging, and internal review (Design ↔ Engineering, QA, AI workflows). Shipping it to all production users adds UX, script weight, and annotation surface area—only do that when you intentionally want end users to see the widget.

Summary

Install

npm install elemenote

React: add peers (React 18 or 19):

npm install elemenote react react-dom

React

Styles live inside the widget (Shadow DOM). No separate CSS import.

import { Elemenote } from 'elemenote/react'

export function App() {
  return (
    <Elemenote
      position="bottom-right"
      appearance="system"
      locale="en-US"
    />
  )
}

Use an options object instead of flat props if you prefer; flat props override the same keys inside options. TypeScript: ElemenoteInitOptions, ElemenotePosition, ElemenoteAppearance, etc. from 'elemenote/react'.

Next.js (App Router)

Identity only (extension as editor): wrap next.config so the build writes data-elemenote-id and data-elemenote-name on each component host. You do not need <Elemenote /> on the page.

import { withElemenote } from 'elemenote/next'

export default withElemenote(nextConfig)

Development (next dev) also writes data-elemenote-src. Production writes id and name. { identity: 'off' } skips the attributes. { identity: 'path' } keeps the file path in production.

<!-- next dev -->
<section data-elemenote-id="a3f2c1b0d9e8" data-elemenote-name="Hero" data-elemenote-src="src/landing/Hero.tsx">
<!-- next build (default) -->
<section data-elemenote-id="a3f2c1b0d9e8" data-elemenote-name="Hero">

Export a .elemenote file and import it on the same origin + pathname. Collaborators need the Elemenote browser extension (or the widget below). Localhost and production keep the same host hash when the component path is the same; the file still will not apply across those different URLs.

elemenote/react is built as a Client Component ('use client'). You can still import Elemenote from app/layout.tsx if you want the widget in the page:

import type { Metadata } from 'next'
import { Elemenote } from 'elemenote/react'

export const metadata: Metadata = { title: 'My app' }

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NODE_ENV === 'development' && (
          <Elemenote position="bottom-right" appearance="system" />
        )}
      </body>
    </html>
  )
}

AI Settings

AI-related UI is off by default. Turn it on when you want the widget toolbar to show the AI settings control (MCP mode, bridge URL, CLI send provider, connection checks) and the AI Settings panel.

showAiSettings — set to true on <Elemenote> (or options.showAiSettings: true) to show the AI settings toolbar button and panel.
showAiSendButton — optional; set to true to show the floating “send to AI” control. You can enable either or both; enabling at least one turns on the AI feature surface in the widget.

import { Elemenote } from 'elemenote/react'

export function App() {
  return (
    <Elemenote
      position="bottom-right"
      appearance="system"
      showAiSettings
      showAiSendButton
    />
  )
}

License

Released under the MIT License. The full text is included in the tarball.

elemenote.io · MCP: elemenote-mcp

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

elemenote

Summary

Install

React

Next.js (App Router)

AI Settings

License