Repolode
Enviar
plasmicapp

plasmicapp/plasmic

Construtor visual open source que permite arrastar e soltar seus próprios componentes React para criar apps e sites dentro do seu codebase.

Alternativa open source a:WebflowRetoolContentful

Ver no GitHubSite
Estrelas
7,124
Forks
736
Issues abertas
51
Último commit
há 11 horas

O que é?

Plasmic é um construtor visual para a web, usado para projetar e criar aplicações e sites com ou sem código. Entre os principais usos estão permitir que equipes de marketing montem landing pages com componentes React em um site Next.js, criar ferramentas internas e portais para clientes e desenvolver sites sem ficar preso a um CMS, uma plataforma de ecommerce ou um provedor de hospedagem específico.

Diferentemente de muitas ferramentas low-code, o Plasmic se integra a codebases existentes. Desenvolvedores podem registrar seus próprios componentes React para que apareçam no editor visual e, depois, publicar as telas em uma aplicação. O projeto também pode gerar código React em um codebase e oferece uma Headless API para buscar conteúdo em tempo de execução.

Os pacotes são separados por framework: desenvolvedores instalam um loader para sua stack (por exemplo, @plasmicapp/loader-nextjs) e o conectam ao Plasmic Studio. Fora do diretório platform/, o projeto usa a licença MIT; esse diretório é licenciado sob AGPL.

Recursos principais

  • 01Arraste e solte seus próprios componentes React no editor visual.
  • 02Publique páginas criadas visualmente em aplicações e sites existentes.
  • 03Gere código React no seu codebase usando codegen.
  • 04Headless API para buscar conteúdo e componentes em tempo de execução.
  • 05Componentes de design system integrados, com tecnologia do react-aria.
  • 06Importe designs do Figma e converta-os para DOM/CSS.
  • 07Modo de criação de conteúdo com restrições de design para colaboradores.

Casos de uso

  • Permitir que equipes de marketing criem landing pages com componentes React aprovados em um site Next.js.
  • Criar ferramentas internas, portais para clientes e softwares empresariais com um editor visual.
  • Adicionar uma camada de CMS visual a um codebase React existente sem migrar a hospedagem ou a plataforma de ecommerce.

Início rápido

  1. 1

    Instale o pacote Plasmic loader para o seu framework (exemplo com Next.js)

    npm install @plasmicapp/loader-nextjs
  2. 2

    Registre seus próprios componentes React para arrastá-los e soltá-los no editor visual

  3. 3

    Renderize no app os componentes criados com Plasmic usando PlasmicComponent dentro de PlasmicRootProvider

Antes de usar

  • O diretório platform/ é licenciado sob AGPL, não MIT.
  • A integração completa com uma base de código exige seguir as instruções de configuração específicas do framework na documentação.

Tópicos

#react#low-code#visual-builder#cms#headless-cms#nextjs#design-system#frontend#builder#design

Perguntas frequentes

O que é plasmic?
Construtor visual open source que permite arrastar e soltar seus próprios componentes React para criar apps e sites dentro do seu codebase. Plasmic é um construtor visual para a web, usado para projetar e criar aplicações e sites com ou sem código. Entre os principais usos estão permitir que equipes de marketing montem landing pages com componentes React em um site Next.js, criar ferramentas internas e portais para clientes e desenvolver sites sem ficar preso a um CMS, uma plataforma de ecommerce ou um provedor de hospedagem específico.
plasmic é gratuito? Qual é a licença?
plasmic é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
plasmic ainda é mantido?
Manutenção ativa. O último commit de plasmic foi em 21 de out. de 2026.
Para que posso usar plasmic?
Permitir que equipes de marketing criem landing pages com componentes React aprovados em um site Next.js. Criar ferramentas internas, portais para clientes e softwares empresariais com um editor visual. Adicionar uma camada de CMS visual a um codebase React existente sem migrar a hospedagem ou a plataforma de ecommerce.
Como instalar plasmic?
Instale o pacote Plasmic loader para o seu framework (exemplo com Next.js): npm install @plasmicapp/loader-nextjs Registre seus próprios componentes React para arrastá-los e soltá-los no editor visual Renderize no app os componentes criados com Plasmic usando PlasmicComponent dentro de PlasmicRootProvider
Onde consigo plasmic?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/plasmicapp/plasmic

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados