react-archer

June 5, 2026 · View on GitHub

🏹 Draw arrows between DOM elements in React 🖋

📖 Documentation & live examples →

Installation

npm install react-archer --save or yarn add react-archer

Example

Example

import { ArcherContainer, ArcherElement } from 'react-archer';

const boxStyle = { padding: '10px', border: '1px solid black' };

const App = () => (
  <ArcherContainer strokeColor="#6366f1">
    <ArcherElement
      id="root"
      relations={[
        {
          targetId: 'element2',
          sourceAnchor: 'bottom',
          targetAnchor: 'top',
          style: { strokeDasharray: '5,5' },
          // ...other relation options
        },
      ]}
    >
      <div style={boxStyle}>Root</div>
    </ArcherElement>

    {/* ...layout omitted... */}

    <ArcherElement id="element2" relations={[{ targetId: 'element3', label: 'Arrow 2' }]}>
      <div style={boxStyle}>Element 2</div>
    </ArcherElement>

    <ArcherElement id="element3">
      <div style={boxStyle}>Element 3</div>
    </ArcherElement>

    <ArcherElement id="element4" relations={[{ targetId: 'root', label: 'Arrow 3' }]}>
      <div style={boxStyle}>Element 4</div>
    </ArcherElement>
  </ArcherContainer>
);

export default App;

Documentation

Full documentation lives on the website:

Contributing

The library lives in src/. The example/ app is a Vite playground used for local development and end-to-end tests:

yarn install
yarn start        # run the example app at http://localhost:8080
yarn test         # format, lint, typecheck and unit tests
yarn test:e2e     # Cypress end-to-end tests

Commit & PR conventions

PR titles must follow Conventional Commits (e.g. feat: ..., fix: ..., chore: ..., docs: ...). PRs are squash-merged using their title, so this title becomes the commit on master and feeds the changelog. A CI check validates the PR title.