Quadro branco infinito, feito para uso pessoal. Tudo roda no navegador, sem login. Seus desenhos ficam salvos automaticamente no localStorage da sua máquina.
- Canvas infinito com pan (scroll, Espaço + arrastar, botão do meio) e zoom (Ctrl + scroll)
- Ferramentas de desenho: seleção, mover tela, retângulo, elipse, linha, seta, desenho livre, borracha, texto, notas (post-it) e imagens
- Seleção múltipla com marquee (arrastar no vazio) e Shift para adicionar à seleção
- Edição: mover, redimensionar, apagar (Delete), editar texto com duplo clique
- Painel de estilo: cor do traço, preenchimento, espessura e tipografia
- Tema claro/escuro com toggle na nav — preferência salva no
localStorage - Persistência automática do quadro no
localStorage - Arrastar objetos com qualquer ferramenta ativa (não precisa voltar ao cursor de seleção)
| Camada | Tecnologia |
|---|---|
| UI | React 19 + TypeScript |
| Build | Vite 8 |
| Estado | Zustand |
| Fonte | Inter (Google Fonts) |
- Node.js 18+
| Tecla | Ferramenta |
|---|---|
V |
Selecionar |
H |
Mover tela |
R |
Retângulo |
O |
Elipse |
L |
Linha |
A |
Seta |
P |
Desenho livre |
E |
Borracha |
T |
Texto |
S |
Nota (post-it) |
I |
Imagem |
Delete / Backspace |
Apagar selecionados |
Espaço (segurar) |
Mover tela temporariamente |
Ctrl + scroll |
Zoom |
Esc |
Sair da edição de texto |
| Ferramenta | Como usar |
|---|---|
| Selecionar | Clique para selecionar/mover; arraste no vazio para seleção em área |
| Texto / Nota | Clique ou arraste para definir a caixa; duplo clique para editar depois |
| Formas / Seta | Clique e arraste para criar; após criar, volta para Selecionar |
| Imagem | Clique no ícone de galeria ou tecla I; clique no canvas, Ctrl+V ou arraste arquivos |
| Borracha | Clique ou arraste sobre elementos para apagar |
| Estilo | Ícone de paleta no canto direito da nav |
- Quadro: chave
notdev-whiteboardnolocalStorage - Tema: chave
notdev-themenolocalStorage - Nenhum dado é enviado a servidores — tudo fica no seu navegador
- Migração automática de boards antigos salvos no IndexedDB (Dexie)
Funcionalidades planejadas para próximas versões:
- Links clicáveis
- Exportar JSON / PNG / SVG
- Undo / redo
- Múltiplos quadros / páginas
Imagens são salvas como data URL no
localStorage. Arquivos muito grandes podem atingir o limite de armazenamento do navegador.
Projeto pessoal.