Docs · SDK · React (Vite)

Install Brevwick in React (Vite).

Copy-paste the snippets below. Replace pk_test_demo with the public key from your project — find it under Project settings → Keys.

1. Install

Install the adapter alongside the core SDK.

npm install @tatlacas/brevwick-react @tatlacas/brevwick-sdk modern-screenshot

2. Configure env vars

Wire the project key through your framework’s env convention so it gets inlined into the client bundle at build time.

# Public project key. Vite reads VITE_* vars from `.env*` and exposes them as `import.meta.env.*` at build time.
VITE_BREVWICK_PROJECT_KEY=pk_test_demo

3. Wire the SDK

src/main.tsxTSX

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrevwickProvider, FeedbackButton } from '@tatlacas/brevwick-react';
import App from './App';

const config = {
  projectKey: import.meta.env.VITE_BREVWICK_PROJECT_KEY ?? 'pk_test_demo',
};

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrevwickProvider config={config}>
      <App />
      <FeedbackButton position="bottom-right" />
    </BrevwickProvider>
  </StrictMode>,
);

Verify

  • Run `vite` and open http://localhost:5173.
  • Click the floating feedback button.
  • Submit a test issue.
  • Confirm the issue lands in /app/issues.

Full guide: /docs/sdk/react-vite

Published packages

Browse the registry for version history, source, and download counts.