washi-ui
Everything you need to annotate any page
A complete toolkit — from the annotation engine to React bindings and storage adapters.
Drop Pins Anywhere
Click any point on rendered HTML to place an annotation.
Scroll Sync
Comment pins stay aligned with content.
Adapter Pattern
Bring your own backend.
Zero Dependencies
`@washi-ui/core` has zero framework dependencies.
Headless Hooks
Use useWashi for full UI control. Render your own UI.
Fully Typed
Typed end-to-end with TypeScript.
Get started in minutes
Three packages, one unified API. Drop Washi into any project.
import { useMemo } from 'react'
import { WashiProvider, WashiFrame, WashiUI } from '@washi-ui/react'
import { LocalStorageAdapter } from '@washi-ui/adapters'
export default function App() {
const adapter = useMemo(
() => new LocalStorageAdapter('my-page'),
[],
);
return (
<WashiProvider adapter={adapter}>
<WashiFrame
src="/content.html"
style={{ width: '100%', height: '100vh', border: 'none' }}
/>
<WashiUI position="bottom-right" />
</WashiProvider>
);
}Three focused packages
Install only what you need. Each package is independently versioned and published.
@washi-ui/core
Framework-agnostic annotation engine. Zero dependencies.
npm i @washi-ui/core
@washi-ui/react
React hooks and components. WashiProvider, WashiFrame, WashiUI.
npm i @washi-ui/react
@washi-ui/adapters
Built-in localStorage and in-memory adapters.
npm i @washi-ui/adapters
Get started with Washi UI today
Open source, MIT licensed, ready to use in production.