visual react editor

Underhive

Introdução

Underhive Unthers em uma nova maneira de desenvolvimento da Web, onde os aplicativos React podem ser editados visualmente, semelhante a trabalhar no figma ou em ferramentas de design semelhantes. Nossa ferramenta permite que designers e desenvolvedores manipulem diretamente os elementos da interface do usuário em um editor visual, mesclando a conveniência do software de design com a estrutura robusta do React.

Características

• Edição visual em um ambiente semelhante ao figma dentro do seu aplicativo React.
• Uma ferramenta CLI para servir um servidor proxy para atualizações de código ao vivo.
• Projetado para uso em um ambiente de desenvolvimento para garantir a segurança.

Instalação

Para instalar Underhive, execute o seguinte comando no diretório do seu projeto:

npm install underhive

Configurar

Importar Underhive em seu arquivo React principal:

 import { attachEditor , detachEditor } from 'underhive' ;

Use attachEditor para ativar o ambiente de edição visual:

 if ( process . env . NODE_ENV === 'development' ) {
  attachEditor ( ) ;
}

Invoque detachEditor para desativar o editor visual:

 detachEditor ( ) ;

Verifique se essas funções são usadas em uma verificação do ambiente de desenvolvimento.

Uso

Inicialize Underhive em seu projeto com:

npx ucli init

Isso configurará Underhive e modificará seu package.json para incluir o comando Underhive Server usando concurrently . Isso garante que o seu script de início existente e o servidor Underhive sejam executados simultaneamente.

Para iniciar seu projeto com Underhive, use:

npm start

Tributo

Este projeto não seria possível sem os esforços originais dos criadores do ProjectVisbug.

História da estrela