A visual reference management application for character creators, graphic novel artists, and storytellers. Built with Next.js 16 and designed as a Progressive Web App (PWA) for offline-first usage. Now with full comic book edition & script management: create comic editions, add cover info, manage pages, panels, and write your script panel-by-panel!
Current version allows fully local usage, with in-browser data storage, so no expensive/complex infrastructure is actually required to use this.
- Multiple Projects - Organize your work into separate projects with custom metadata (genre, theme, tags)
- Character Profiles - Create detailed character sheets with age, role, personality traits, abilities, and backstory
- Custom Fields - Add your own custom fields to character profiles
- Infinite Canvas - Zoom and pan across your visual references with smooth controls
- Image Arrangement - Drag, resize, and rotate images freely on the canvas
- Layer Management - Bring images to front, lock items in place
- Auto-save - Canvas state is automatically saved as you work
- Drag & Drop Upload - Easy image import with bulk upload support
- WebP Conversion - All images converted to WebP for optimal quality and smaller file sizes
- Smart Resizing - Images capped at 2000px (longest side) while preserving visual quality
- Thumbnail Generation - Fast previews with auto-generated thumbnails
- Color Palette Extraction - Automatic color palette detection from images
- Grid & Canvas Views - Switch between grid gallery and canvas modes
- Comic Editions - Create and organize comic book editions/scripts within your projects
- Cover & Edition Info - Add cover images, edition metadata, and status
- Script Pages - Add pages to each edition, set page goals, and manage page order
- Panels & Dialogue - Break pages into panels, add script dialogue (speech, narration, thought, SFX) per panel
- Script Writing Flow - Write your comic script panel-by-panel, with easy navigation and editing
- Localization & Sync - All edition/script data is included in backup/export/import and Google Drive sync, with full multi-language support
Tip: Try the new Editions tab in your project to start writing comics!
- OPFS Storage - Fast, persistent browser storage using Origin Private File System (IndexedDB fallback)
- Full Backup/Restore - Export your entire database and images as a ZIP file
- Google Drive Auto Sync - Seamlessly sync your data to Google Drive for backup and cross-device access. Requires setup of a Google API client and configuration of environment variables. See GOOGLE_DRIVE_SYNC_SETUP.md for instructions.
- Storage Monitoring - Visual indicator showing used storage space
- Multi-language Support - English and Brazilian Portuguese (pt-BR)
- Easy Language Switching - Change language from the UI
- Installable - Add to home screen on mobile and desktop
- Offline Support - Works without internet connection via Service Worker
- Responsive Design - Optimized for desktop and tablet. (May also work on mobile)
To enable Google Drive auto sync, you must configure a Google API client and set up the required environment variables in a .env file. This is necessary for authentication and secure access to your Google Drive account.
Setup Steps:
- Follow the instructions in GOOGLE_DRIVE_SYNC_SETUP.md to create a Google API client and obtain your credentials.
- Add the required variables (such as
GOOGLE_CLIENT_ID, etc.) to your.envfile in the project root. - Restart the app after updating your environment variables.
For detailed, step-by-step guidance, see GOOGLE_DRIVE_SYNC_SETUP.md.
- Node.js 20+
- pnpm (recommended) or npm
# Clone the repository
git clone <repository-url>
cd zt-moodboard-mgr
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 in your browser.
| Script | Description |
|---|---|
pnpm dev |
Start development server |
pnpm test |
Run unit and integration tests |
pnpm build |
Build for standard Next.js |
pnpm build:dev |
Build for development (static files using .env.dev) |
pnpm build:prod |
Build for production (static files using .env.production) |
pnpm build:static |
Build static export for hosting on any web server (default .env.local) |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm generate-icons |
Generate PWA icons from source image |
- Framework: Next.js 16 with App Router
- UI: React 19 + Tailwind CSS 4
- Components: shadcn/ui + Radix UI
- State Management: Zustand
- Database: Dexie.js (IndexedDB wrapper)
- File Storage: OPFS (Origin Private File System)
- Image Processing: Native Canvas API (WebP conversion), ColorThief
- Canvas: react-zoom-pan-pinch
- i18n: next-intl
- Animations: Framer Motion
- PWA: next-pwa
The app can be deployed as a static site or with server-side rendering.
pnpm build:staticpnpm build
pnpm startSee DEPLOYMENT.md for detailed deployment instructions.
- Chrome/Edge 86+ (full OPFS support)
- Firefox 111+ (OPFS support)
- Safari 15.2+ (IndexedDB fallback)
This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0).
You are free to use, modify, and share this project for non-commercial purposes, as long as you give appropriate credit and distribute any derivative works under the same license.
Disclaimer: THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
This is a free utility project, courtesy of Zoch Tecnologia. Check LICENSE for licesing and distribution permissions.
- Funcionalidades
- Primeiros Passos
- Scripts
- Tecnologias
- Deploy
- Navegadores Suportados
- Licença
- Contribuição
Um aplicativo de gerenciamento de referências visuais para criadores de personagens, artistas de quadrinhos e contadores de histórias. Construído com Next.js 16 e projetado como um Progressive Web App (PWA) para uso offline-first. Agora com gerenciamento completo de edições de quadrinhos e roteiros: crie edições, adicione capa, gerencie páginas, quadros e escreva o roteiro quadro a quadro!
A versão atual permite uso totalmente local, com armazenamento de dados no navegador, sem necessidade de infraestrutura cara ou complexa.
- Múltiplos Projetos - Organize seu trabalho em projetos separados com metadados personalizados (gênero, tema, tags)
- Perfis de Personagem - Crie fichas detalhadas com idade, papel, traços de personalidade, habilidades e história
- Campos Personalizados - Adicione seus próprios campos personalizados aos perfis
- Canvas Infinito - Dê zoom e mova-se livremente pelas referências visuais
- Arranjo de Imagens - Arraste, redimensione e rotacione imagens livremente no canvas
- Gerenciamento de Camadas - Traga imagens para frente, bloqueie itens no lugar
- Auto-salvamento - O estado do canvas é salvo automaticamente enquanto você trabalha
- Upload por Arrastar & Soltar - Importe imagens facilmente, com suporte a upload em lote
- Conversão para WebP - Todas as imagens são convertidas para WebP para qualidade otimizada e arquivos menores
- Redimensionamento Inteligente - Imagens limitadas a 2000px (lado maior) preservando a qualidade visual
- Geração de Miniaturas - Visualizações rápidas com miniaturas automáticas
- Extração de Paleta de Cores - Detecção automática de paleta de cores das imagens
- Visualização em Grade & Canvas - Alterne entre galeria em grade e modo canvas
- Edições de Quadrinhos - Crie e organize edições/roteiros de quadrinhos dentro dos seus projetos
- Capa & Informações da Edição - Adicione imagens de capa, metadados e status da edição
- Páginas do Roteiro - Adicione páginas à edição, defina objetivos e gerencie a ordem das páginas
- Quadros & Diálogos - Divida páginas em quadros, adicione falas (balão, narração, pensamento, SFX) por quadro
- Fluxo de Escrita de Roteiro - Escreva o roteiro quadro a quadro, com navegação e edição facilitadas
- Localização & Sincronização - Todos os dados de edição/roteiro são incluídos no backup/exportação/importação e na sincronização com Google Drive, com suporte total a múltiplos idiomas
Dica: Experimente a nova aba Edições no seu projeto para começar a escrever quadrinhos!
- Armazenamento OPFS - Armazenamento rápido e persistente no navegador usando Origin Private File System (fallback para IndexedDB)
- Backup/Restauro Completo - Exporte todo o banco de dados e imagens em um arquivo ZIP
- Sincronização Automática com Google Drive - Sincronize seus dados automaticamente com o Google Drive para backup e acesso entre dispositivos. Requer configuração de um cliente Google API e variáveis de ambiente. Veja GOOGLE_DRIVE_SYNC_SETUP.md para instruções.
- Monitoramento de Espaço - Indicador visual mostrando o espaço utilizado
- Suporte Multi-idioma - Inglês e Português Brasileiro (pt-BR)
- Troca Fácil de Idioma - Altere o idioma pela interface
- Instalável - Adicione à tela inicial no celular ou desktop
- Suporte Offline - Funciona sem conexão via Service Worker
- Design Responsivo - Otimizado para desktop e tablet (suporte mobile é possível)
- Node.js 20+
- pnpm (recomendado) ou npm
# Clone o repositório
git clone <repository-url>
cd zt-moodboard-mgr
# Instale as dependências
pnpm install
# Inicie o servidor de desenvolvimento
pnpm devAbra http://localhost:3000 no seu navegador.
| Script | Descrição |
|---|---|
pnpm dev |
Inicia o servidor de desenvolvimento |
pnpm build |
Compila para Next.js padrão |
pnpm build:dev |
Compila estáticos de desenvolvimento (usa .env.dev) |
pnpm build:prod |
Compila estáticos de produção (.env.production) |
pnpm build:static |
Gera exportação estática para hospedagem (.env.local padrão) |
pnpm start |
Inicia o servidor de produção |
pnpm lint |
Executa o ESLint |
pnpm generate-icons |
Gera ícones PWA a partir da imagem fonte |
- Framework: Next.js 16 com App Router
- UI: React 19 + Tailwind CSS 4
- Componentes: shadcn/ui + Radix UI
- Gerenciamento de Estado: Zustand
- Banco de Dados: Dexie.js (wrapper IndexedDB)
- Armazenamento de Arquivos: OPFS (Origin Private File System)
- Processamento de Imagem: API Canvas nativa (conversão WebP), ColorThief
- Canvas: react-zoom-pan-pinch
- i18n: next-intl
- Animações: Framer Motion
- PWA: next-pwa
O app pode ser publicado como site estático ou com renderização no servidor.
pnpm build:staticpnpm build
pnpm startVeja DEPLOYMENT.md para instruções detalhadas de deploy.
- Chrome/Edge 86+ (suporte total a OPFS)
- Firefox 111+ (suporte a OPFS)
- Safari 15.2+ (fallback para IndexedDB)
Este projeto está licenciado sob a Creative Commons Atribuição-NãoComercial-CompartilhaIgual 4.0 Internacional (CC BY-NC-SA 4.0).
Você pode usar, modificar e compartilhar este projeto para fins não comerciais, desde que mantenha os devidos créditos e distribua trabalhos derivados sob a mesma licença.
Aviso legal: ESTE SOFTWARE É FORNECIDO "NO ESTADO EM QUE SE ENCONTRA", SEM GARANTIAS DE QUALQUER TIPO, EXPRESSAS OU IMPLÍCITAS, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM PROPÓSITO ESPECÍFICO E NÃO VIOLAÇÃO. EM NENHUMA HIPÓTESE OS AUTORES OU DETENTORES DOS DIREITOS SERÃO RESPONSÁVEIS POR QUALQUER REIVINDICAÇÃO, DANO OU OUTRA RESPONSABILIDADE, SEJA EM UMA AÇÃO DE CONTRATO, ATO ILÍCITO OU DE OUTRA FORMA, DECORRENTE DE, FORA DE OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO SOFTWARE.
Este Projeto é um utilitário gratuito da Zoch Tecnologia. Confira LICENSE para detalhes de uso autorizados.