Add point-and-click edit functionality to web apps, when used with [Vibe Kanban](https://vibekanban.com).
npm install vibe-kanban-web-companionThis package adds point-and-click edit functionality to web apps, when used with Vibe Kanban.
Works with frameworks like Next.js,
Create React App,
& Vite
that use @babel/plugin-transform-react-jsx-source
Even though vibe-kanban-web-companion is added to dependencies, tree-shaking will remove vibe-kanban-web-companion from production builds.
Add this dependency to your project:
``shell`
npm i vibe-kanban-web-companion
Create React App
`diff`
+import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
);
Next.js
`diff
+import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'
import type { AppProps } from 'next/app'
import '../styles/globals.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
+
)
`
Vite
`diff
+import { VibeKanbanWebCompanion } from "vibe-kanban-web-companion";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
+
);
``
Thanks to Eric Clemmons for creating the original Click-To-Component library, from which our helper is forked from.