GrapesJS

Com o GrapesJS, um sistema web ganha um editor de arrastar e soltar em que o cliente monta a página e vê o resultado na hora, sem que a equipe precise construir essa peça do zero. Ele é um framework para embutir em outro produto. Segundo o README, ele nasceu para rodar dentro de um CMS e acelerar a criação de templates.

Para que serve

• Oferecer aos usuários do seu SaaS ou CMS um editor visual de páginas e templates HTML.
• Criar newsletters por blocos, como mostra uma das demonstrações oficiais.
• Gerenciar imagens, estilos e camadas da página pelos painéis de Asset, Style e Layer Manager.
• Salvar os projetos no navegador ou num servidor remoto, com o armazenamento local e remoto que já vem no pacote.
• Deixar o desenvolvedor conferir o HTML e o CSS gerados pelo visualizador de código.

Como começar

npm i grapesjs

Sem npm, o script e o CSS vêm do unpkg ou do CDNJS. A página precisa de um div e de uma chamada de inicialização:

var editor = grapesjs.init({
  container: '#gjs',
  components: '<div class="txt-red">Hello world!</div>',
  style: '.txt-red{color: red}',
});

Licença e custo

Artur Arseniev detém o copyright, e a licença é a BSD de 3 cláusulas. Redistribuir o código-fonte exige manter o aviso de copyright, a lista de condições e o termo de isenção de garantia. Em binários, esses textos vão na documentação ou em outro material que acompanha a entrega. A terceira cláusula proíbe usar o nome GrapesJS ou os nomes dos contribuidores para promover um produto derivado sem permissão escrita. A equipe oferece também o Studio SDK, um editor completo construído sobre o framework. Ele soma temas white-label, projetos de várias páginas, assistente de IA e suporte do time principal. O site oferece um plano gratuito e manda os demais valores para a página de preços.

Quando vale a pena

A escolha se justifica para a equipe de desenvolvimento que quer um construtor visual dentro do próprio produto, com controle do código. Para fazer só o próprio site sem programar, WordPress e Elementor chegam mais rápido. A diferença entre os dois caminhos aparece no guia de no-code e low-code, útil para saber de que lado o seu projeto está.