Dev Studio Builder

Plataforma visual para criação de páginas HTML, formulários e modelagem de banco de dados utilizando Drag & Drop.

O Dev Studio Builder é uma ferramenta voltada para desenvolvedores que desejam acelerar a construção de sistemas administrativos, ERPs, CRMs, dashboards e aplicações corporativas, mantendo consistência visual e reduzindo a quantidade de código manual.

Através de uma interface visual intuitiva, é possível montar páginas utilizando componentes pré-configurados, personalizar propriedades em tempo real, exportar HTML pronto para produção e modelar bancos de dados visualmente.

---

Motivação

Durante o desenvolvimento de sistemas web, uma das tarefas mais repetitivas é a criação de telas administrativas.

Mesmo utilizando Inteligência Artificial para geração de código, frequentemente surgem problemas como:

• Falta de padronização entre telas;
• Necessidade de ajustes manuais constantes;
• Código repetitivo;
• Perda de produtividade;
• Dificuldade em manter a identidade visual do sistema.

O Dev Studio Builder nasceu para resolver esses problemas através de uma abordagem visual, reutilizável e padronizada.

---

O Que o Dev Studio Builder Resolve?

✅ Criação rápida de interfaces administrativas

✅ Padronização visual entre telas

✅ Redução de código repetitivo

✅ Reutilização de componentes

✅ Exportação de HTML pronto para uso

✅ Modelagem visual de banco de dados

✅ Geração de SQL para múltiplos bancos

✅ Persistência de projetos em JSON

✅ Facilidade de manutenção

✅ Maior produtividade para equipes de desenvolvimento

---

Principais Recursos

Page Builder

Editor visual baseado no ecossistema do Template Tabler.

Funcionalidades

• Drag & Drop
• Edição visual em tempo real
• Layout responsivo
• Painel de propriedades
• Componentes reutilizáveis
• HTML personalizado
• Exportação para HTML
• Exportação para JSON
• Importação de projetos JSON

Componentes Disponíveis

Mais de 60 componentes prontos para uso, organizados na paleta por propósito (não por dependência técnica — ex.: TomSelect, Datepicker e Dropzone ficam junto dos demais campos de formulário, não separados só por precisarem de uma lib):

Layout

• Linhas de colunas (1 a 4, combinações 4-8/8-4 e customizável)

Campos de Formulário

• Campo Texto (prefix/suffix addon, máscara, toggle senha, botão copiar)
• Número, Textarea, Rich Text Editor (HugeRTE), Select, Checkbox / Radio / Switch
• Data, Arquivo, Color Picker, Input Hidden
• Input com Ícone, Input com Tooltip, Floating Label Input
• Select Group, Payment Method, Button Group
• Input com Select (dois campos lado a lado)
• Quantity Stepper
• Input Button Group Action — input + 1 ou mais botões de ação (AJAX Fill, geolocalização), com a propriedade "Layout dos botões" alternando entre agrupado (botão dentro do input-group) e separado (botão ao lado, em coluna — substitui o antigo componente "Separated Input", removido da paleta por ser o mesmo componente)
• Rating (estrelas interativas)
• Código 2FA / OTP (quantidade de dígitos configurável, auto-avanço e colar)
• Tom Select / Tags Input (busca remota server-side, botão "criar" via modal/iframe ou nova aba)
• Litepicker (Datepicker normal e inline)
• Dropzone Upload
• Scanner de QR / Código de Barras
• Gravador de Áudio
• Leitor de Fala (Voz)
• Signature Pad (assinatura)

Botões e Ações

• Botão (variante, outline, tamanho, disabled, link)
• Button Dropdown
• FAB — Botão flutuante de ajuda/suporte (link único ou speed-dial com subitens; ícone, cor, raio e posição configuráveis)
• Link

Estrutura e Containers

• Form Container (com aviso de alterações não salvas ao sair)
• Listas Dinâmicas (FieldList: clonar, excluir e mover linha ↑/↓)
• Accordion, Tabs (com badge por aba)
• Modal (com trigger), Offcanvas (com trigger e ID gerado)
• Card Personalizado / Container (arraste componentes dentro)
• Div, Span, Page Header, Page Footer

Conteúdo e Mídia

• Label, Lista (ordenada/não-ordenada, list-group, flush), Breadcrumb
• Título (H1–H3, com pretitle e alinhamento), Parágrafo (alinhamento, muted)
• Imagem (forma, lazy, link), Player de Áudio, Player de Vídeo
• Vídeo YouTube/Vimeo, Iframe (incorporar página)
• Documento Office (Word/Excel/PPT via visualizador online — Microsoft/Google)
• PDF (PDF.js inline, mobile-first, renderiza no <canvas>)
• Card (texto pronto), HTML Raw, Skeleton (placeholder animado), Divisor de Seção

Indicadores e Feedback

• Alert, Callout, Empty State
• Badge (variante, pill, outline)
• Progress Bar, Spinner, Avatar
• KPI / Info KPI / Stat Card — mesmo componente-base, 3 presets prontos (ícone solto, card com destaque colorido, ou avatar circular + tendência com descrição)
• Timeline, Stepper

Tabelas

• Tabela estática (striped, hover, bordered, responsive, thead/tfoot configuráveis)
• DataTable (client-side, AJAX, server-side, seleção por checkbox)
• Tabela em Árvore (categorias/subcategorias expansíveis, ex.: plano de contas, profundidade livre)

Gráficos

• ApexCharts — linha, área, barra, barras distribuídas, pizza, donut

Calendário

• FullCalendar
• Gantt / Timeline (reservas, agendamentos — modos Timeline e Agenda, mobile-first, dados via AJAX)

Automação

• Script JS (jQuery com templates)
• PWA (app instalável — manifest, service worker, offline e notificações)

Menu

• Navbar / Sidebar (sistema de menus visuais)
• Menu Item, Dropdown, Divider, Label, Badge Item, User, Search, Spacer, Tela Cheia, Alternar Tema (claro/escuro)

Tipos de Menu (Layouts de Navegação)

O menu é montado visualmente (componentes Navbar e Sidebar) e exportado conforme o layout escolhido nas propriedades da página. Todos respeitam o tema claro/escuro e as colunas definidas no menu (alinhamento esquerda / centro / direita). Indisponível em páginas de login.

Layout	Descrição
Nenhum	Sem menu (página limpa).
Superior (navbar)	Menu horizontal no topo.
Lateral (sidebar)	Menu vertical à esquerda ou à direita (posição configurável).
Lateral + Superior	Sidebar + navbar combinados.
Pill + Ícone lateral (moderno)	Rail de ícones à esquerda (expande ao passar o mouse) + navbar estilo pill no topo.
Rail de módulos + topo (Metronic)	Rail de ícones full-height à esquerda (os módulos) + barra superior embutida no conteúdo (os itens do módulo ativo). No desktop o conteúdo fica em um painel arredondado "dentro" do menu; no mobile ocupa 100% da tela e o rail vira off-canvas (hambúrguer). Os dropdowns flutuam acima do conteúdo.

Recursos comuns aos layouts: tema claro/escuro, posição do sidebar (esquerda/direita), menu fixo (sticky), rolagem horizontal dos itens quando não cabem e o componente Tela Cheia.

Temas & Aparência

• Tema base trocável: a paleta de cinza vem de um arquivo theme-<nome>.css importado no theme.css — gray, slate, zinc, neutral, stone, pink.
• Temas de conforto visual (menos fadiga ocular): Sépia (papel/creme, foco em descanso), Sálvia (verde suave) e Solarized (versão suavizada).
• Cor primária, radius e fonte ajustáveis em um único arquivo (theme-config.css).
• Superfícies tingíveis (--tblr-surface-base): cards/sidebars acompanham o tema, não só o fundo.
• Modo claro/escuro com persistência no navegador (componente de menu Alternar Tema).
• Ícones por biblioteca: todo campo de ícone pode escolher, individualmente, entre Tabler, Lineicons (Regular/Solid) e Font Awesome (Solid/Regular/Brands) — ver docs/ICONES.md.

Como tudo se conecta: docs/TEMAS_E_CSS.md.

---

Database Designer

Editor visual para modelagem de bancos de dados.

Funcionalidades

• Criação de tabelas
• Criação de campos
• Chaves primárias
• Chaves estrangeiras
• Índices
• Views
• Triggers
• Relacionamentos visuais
• Painel de propriedades em tempo real
• Exportação para SQL

Bancos Suportados

• MySQL
• PostgreSQL
• SQLite
• SQL Server
• Firebird
• Oracle

---

Report Builder

Gerador visual de templates de relatório para impressão em PDF via DOMPDF (Laravel). Monta o layout (cabeçalho, rodapé, seções, tabelas, QR Code, código de barras) e exporta HTML com placeholders; os dados e a geração do PDF ficam a cargo do backend.

Funcionalidades

• Configuração de página (A4/Letter/A3, orientação, margens, fontes, cores)
• Cabeçalho e rodapé que se repetem em todas as páginas (numeração automática)
• Seções: Informações, Tabela de Dados (com @foreach), Resumo/Totais, Divisor, HTML Livre
• QR Code e Código de Barras (imagem gerada no servidor)
• Tabela de Layout: grade com células e blocos aninhados (base para DANFE de NF-e)
• Propriedades de aparência (cor, fundo, fonte, alinhamento)
• Exportação de HTML pronto para DOMPDF + persistência em localStorage

Documentação completa: docs/REPORT_BUILDER.md.

---

Capturas de Tela

Editor de Páginas

docs/screenshots/tela-principal.png

---

Componentes

docs/screenshots/componentes.png

---

Painel de Propriedades

docs/screenshots/fieldlist.png

---

Gráficos

docs/screenshots/graficos.png

---

Exportação HTML

docs/screenshots/exportar-codigo-html.png

---

Database Designer

docs/screenshots/tabelas.png

---

Database Designer Propriedades da Tabela

docs/screenshots/propriedades-tabela.png

---

Database Designer Triggers

docs/screenshots/trigger.png

---

Como Instalar

Requisitos

• Navegador moderno
• Servidor Web local
• Git

---

Clonar o Repositório

git clone https://github.com/marcoscarraro/dev-studio-builder.git

Acesse a pasta do projeto:

cd dev-studio-builder

---

Executar Localmente

Utilizando PHP

php -S localhost:8000

Utilizando Python

python -m http.server 8000

Abra no navegador:

http://localhost:8000

---

Como Utilizar

Criando uma Página

1. Abra o editor.
2. Arraste componentes da barra lateral.
3. Solte os componentes na área de trabalho.
4. Configure suas propriedades.
5. Visualize as alterações em tempo real.
6. Exporte o HTML ou salve o projeto em JSON.

---

Exportando HTML

1. Clique em Exportar HTML.
2. O sistema gerará o código completo.
3. Utilize o HTML exportado em qualquer projeto compatível com Tabler.

---

Exportando JSON

1. Clique em Exportar JSON.
2. Salve o arquivo gerado.
3. Utilize-o posteriormente para continuar a edição.

---

Importando Projetos

1. Clique em Importar Projeto.
2. Selecione um arquivo JSON exportado anteriormente.
3. O projeto será reconstruído automaticamente no editor.

---

Arquitetura do Projeto

O Dev Studio Builder foi desenvolvido utilizando uma arquitetura modular para facilitar manutenção e extensibilidade.

Estrutura de Pastas

assets/
│
├── css/
│
├── data/
│   └── components.json
│
├── js/
│   ├── builder.js
│   │
│   ├── core/
│   │   ├── helpers.js
│   │   ├── drag-drop.js
│   │   ├── properties.js
│   │   └── export-html.js
│   │
│   └── renderers/
│       ├── registry.js
│       ├── input.js
│       ├── select.js
│       ├── card.js
│       └── ...
│
public/
│
└── components/
    └── js/
        ├── datatable-runtime.js
        ├── apexchart-runtime.js
        ├── dropzone-runtime.js
        └── ...
│
database_builder.html

assets/js/databas