---
title: Principais Características
slug: studio/principais-caracteristicas
docTags:
createdAt: 2026-06-16T19:12:08.372Z
---
## 1 - Principais Características
***
### 1.1 - Ferramentas de Desenvolvimento
- **Editor Visual**\: Interface de arrastar e soltar para projetar telas com componentes
- **Biblioteca de Componentes**\: Elementos da interface incluindo botões, entradas, seleções e contêineres de layout
- **Editor de Estilo**\: Opções abrangentes de estilo para tipografia, espaçamento, bordas e layout
- **Gerenciamento de Blocos de Código**\: Crie e gerencie blocos de código reutilizáveis
- **Painel de Projeto**\: Organizar e gerenciar múltiplos projetos de aplicação
- **Desfazer/Refazer**\: Suporte completo para desfazer e refazer para todas as operações de edição visual
***
### 1.2 - Desfazer/Refazer
O editor visual suporta operações de desfazer e refazer para todas as operações de edição de tela e composição.
Atalhos de teclado
- `Cmd+Z` (macOS) / (Windows/Linux): Desfazer a última ação `Ctrl+Z `
- `Cmd+Shift+Z` (macOS) / (Windows/Linux): Refazer a última ação desfeita `Ctrl+Shift+Z `
**Operações de Apoio**
O acompanhamento histórico inclui:
- Adicionar ou remover elementos de telas e composições
- Mover elementos por meio de arrastar e soltar ou ajustes de posição
- Modificar propriedades dos elementos (texto, marcadores de posição, estado desativado, etc.)
- Mude os estilos dos elementos (cores, fontes, espaçamento, bordas, etc.)
- Ajuste pontos de interrupção responsivos (padrão, sm, md, lg)
- Expandir/colapsar estados de elementos na visualização em árvore
**Gestão da História**
- **História Separada**\: Cada tela e composição mantém sua própria história independente
- **Limite de Capacidade**\: Máximo de 50 ações armazenadas por tela ou composição
- **Agrupamento Automático**\: Mudanças rápidas em 500ms são agrupadas em um único passo de desfazer (por exemplo, digitar texto ou arrastar um controle deslizante)
- **Navegação**\: A história é preservada ao alternar entre telas ou composições
- **Integração com Salvamento Automático**\: Operações de desfazer/refazer marcam o documento como sujo e acionam o salvamento automático após 2 segundos
**Limitações Atuais**
- Operações de binding (criar, editar ou excluir) não estão incluídas em undo/redo
- O histórico não persiste entre as recargas da página
- Desfazer/refazer está disponível apenas no modo de design (não no modo de prévia)
:::hint{type="info"}
📌O sistema de desfazer/refazer usa rastreamento de histórico baseado em patches para eficiência de memória, consumindo aproximadamente 500 bytes por ação, em comparação com snapshots de estado completo, que exigiriam de 5 a 20KB por ação
:::
***
### 1.3 - Desenvolvimento Móvel
- **Integração com React Native**\: Construa aplicativos móveis multiplataforma
- **Suporte a Módulos Expo**\: Acesso às capacidades do dispositivo por meio de módulos configuráveis:
- Câmera e seletor de imagem
- Serviços de localização
- Acesso ao sistema de arquivos
- Autenticação
- Contatos e calendário
- Suporte de áudio
- **Expo Build System**\: Processo de compilação para aplicações iOS e Android
- **Configuração da App Store**\: Configurações para Apple App Store e Google Play Store
***
### 1.4 - Recursos de Integração
- **Conectividade de Banco de Dados**\: Integração com banco de dados SQL com migrações
- **Gerenciamento de APIs**\: Criar e gerenciar endpoints de API
- **Soluções de Armazenamento**\: Capacidades de armazenamento de arquivos
- **Autenticação**\: Sistema de autenticação baseado em token
***
### 1.5 - Opções de Implantação
- **Conteinerização**\: suporte a Docker com gráficos Helm Kubernetes
- **Gerenciamento de Ambiente**\: Configurar diferentes ambientes de implantação
- **Configuração do Serviço**\: Configurações de rede e recursos
***
## 2 - Arquitetura
A plataforma é construída com uma arquitetura moderna:
- **Estrutura do Monorepo** Tudo: Organizada em aplicativos e bibliotecas compartilhadas
- **Engine**\: Runtime para aplicações móveis
- **Servidor\:** API backend e serviços de banco de dados
- **Studio**\: UI do ambiente de desenvolvimento
- **React Native Frontend**\: interface multiplataforma com estilo NativeWind
- **Hono Backend**\: endpoints de API para gerenciamento de projetos
- **PostgreSQL com Drizzle**\: Armazenamento de dados com suporte à migração
***
## 3 - Componentes do Projeto
- **Telas**\: Contêineres visuais para elementos de interface
- **Elementos**\: Componentes de interface que podem ser adicionados às telas
- **Estilos\:** Configuração visual da aparência
- **Blocos de Código**\: Implementação de funcionalidades personalizadas
- **Ativos**\: Imagens e outros recursos
- **Configurações**\: Opções de configuração do aplicativo
- **Internacionalização**\: Suporte multilíngue === Documentação de Elementos
***
### 3.1 - Componentes vs Elementos
Compreender a distinção entre Componentes e Elementos é crucial para trabalhar com a plataforma Lowcode Studio:
Componente
**Um Componente** é um blueprint ou definição armazenado na biblioteca de componentes. Ele representa um tipo de elemento de interface com:
- Propriedades e valores padrão
- Encadernações disponíveis (propriedades e eventos)
- Estilos e configurações base
- Comportamento predefinido
Os componentes são definidos em e servem como modelos. Exemplos: Botão, Entrada, Visualização, Lista.components.json
***
## 4 - Elemento
**Um Elemento** é uma instância de um Componente colocada em uma tela ou composição. Cada elemento tem:
- Um identificador UUID único
- Valores de propriedade personalizados específicos para aquela instância
- Estilos individuais e configurações responsivas
- Ligações específicas a variáveis e funções
Quando você arrasta um Componente da paleta, uma instância de Element é criada na sua tela.
Exemplo 1. Exemplo
**Componente**: "Botão" (blueprint com propriedades padrão)
↓
**Element**: Instância de botão com UUID "abc-123"
- Propriedades: `{ text: "Submit", disabled: false } `
- Encadernações: `{ press: [functionId: "xyz"] } `
- Estilos: `{ backgroundColor: "#007bff", borderRadius: "4px" }`
