Befree Visual Edit

About

Befree Visual Edit is a Chrome extension for developers who want to adjust React and Next.js interfaces directly in the browser, without hunting through files and class names manually.

With it, you can click elements in your local app, edit text inline, adjust Tailwind classes, tweak visual styles, and save changes automatically back to your source code.

It is especially useful for projects built with React, Next.js, Tailwind CSS, and AI-generated code tools.

Key features:
- Inline text editing with double-click
- Visual panel for Tailwind classes
- Controls for typography, spacing, colors, borders, and layout
- Live preview before saving changes
- Theme variable editing, including brand colors and fonts
- Component tree navigation and isolated component preview
- Responsive breakpoint simulation
- Undo for the last applied change
- Local bridge integration to save edits directly to project files

How to install and use:
1) Go to https://visual-edit.befree.tools to generate your free access key.
2) Install the npm package in your project as a development dependency:
npm install -D befree-visual-edit

The -D flag installs the package only as a development dependency, so it is not included in production.

Right after the first installation, run:
npx befree-visual-edit init

Start your project as usual:
npm run dev

Enable the Chrome extension, open your local app, and click page elements to edit them visually.
Privacy:

Befree Visual Edit is designed for local development. Edits are sent to a bridge server running on your own machine, usually at localhost:5179. Your project content is not sent to external servers.

Requirements:
React or Next.js project
- Node.js 18+
- Chrome
- befree-visual-edit configured in the project

Português

Befree Visual Edit é uma extensão para desenvolvedores que querem ajustar interfaces React e Next.js diretamente no navegador, sem ficar procurando arquivos e classes manualmente.

Com ela, você pode clicar em elementos da sua aplicação local, editar textos inline, ajustar classes Tailwind, modificar estilos visuais e salvar as mudanças automaticamente no código-fonte.

Ideal para projetos criados com React, Next.js, Tailwind CSS e ferramentas de geração de código com IA.

Recursos principais:
- Edição inline de textos com duplo clique
- Painel visual para classes Tailwind
- Ajustes de tipografia, espaçamento, cores, bordas e layout
- Preview das mudanças antes de salvar
- Edição de variáveis de tema, como cores da marca e fontes
- Navegação por componentes e visualização isolada
- Simulação de breakpoints responsivos
- Undo para reverter a última alteração
- Integração com bridge local para salvar direto nos arquivos do projeto

Como instalar e usar:

1) Acesse https://visual-edit.befree.tools para gerar sua chave de acesso gratuita.
2) Instale o pacote npm no seu projeto como dependência de desenvolvimento:
npm install -D befree-visual-edit

O -D instala o pacote apenas como dependência de desenvolvimento, evitando que ele seja incluído na produção.

Logo após a primeira instalação, rode:
npx befree-visual-edit init

Inicie seu projeto normalmente:
npm run dev

Ative a extensão no Chrome, abra sua aplicação local e clique nos elementos da página para editar visualmente.

Privacidade:
Befree Visual Edit foi criada para desenvolvimento local. As edições são enviadas para um bridge server rodando na sua máquina, normalmente em localhost:5179. O conteúdo do seu projeto não é enviado para servidores externos.

Requisitos:
- Projeto React ou Next.js
- Node.js 18+
- Chrome
- Pacote befree-visual-edit configurado no projeto