Skip to content

🌐 Esta página aún no está traducida al español. Mostrando referencia en portugués (BR). Ayúdanos a traducir.

Desenvolvimento & Criatividade

4 apps que cobrem programação leve e criação visual direto no navegador. Mesmo engine do VS Code pra editar código, cliente de API estilo Postman pra debugar serviços, ferramentas de desenho responsivas pra wireframe e brainstorm.


👨‍💻 Roque Code — editor de código (Monaco/VS Code engine)

Editor de código moderno com a mesma engine do VS Code (Monaco). Syntax highlight, autocomplete, multi-cursor, find & replace com regex — sem instalar nada.

Funções

  • 🎨 Syntax highlight pra 50+ linguagens — JS/TS, Python, Go, Rust, Java, C/C++, Ruby, PHP, Swift, Kotlin, Shell, SQL, HTML/CSS, JSON/YAML/TOML, Markdown, Vue, Svelte, Astro, etc.
  • 🤖 Autocomplete IntelliSense: variáveis no scope, propriedades de objetos, snippets de linguagem
  • Multi-cursor: Alt+Click adiciona cursor, Ctrl+D seleciona próxima ocorrência (igual VS Code)
  • 🔍 Find & Replace com regex (Ctrl+F / Ctrl+H), find in selection only
  • 📑 Múltiplos arquivos em tabs (Ctrl+Tab pra alternar)
  • 🌳 Outline panel com símbolos do arquivo (funções, classes)
  • 🪄 Format on save com Prettier embedded pra .js/.ts/.vue/.json/.md
  • 🎨 Temas: VS Code default + Dracula + Monokai + Solarized
  • 💾 Auto-save a cada 3s (não perde código se navegador travar)

Diferença vs VS Code completo

AspectoRoque CodeVS Code (app dedicado)
EngineMonaco (mesmo do VSCode)Electron + Monaco
Extensões❌ não suporta marketplace✅ todas
Terminal embarcado❌ (use Terminal app separado)
Git integration
Linguagens suportadas50+ syntax highlight100+ + LSP

Use Roque Code pra: editar config (json/yaml), script rápido, prototipar, snippet pra blog post.

Pra projeto fullstack com Git: use VS Code integrado do RoqueOS Server — code-server real com extensões.

Atalhos

TeclaAção
Ctrl+SSalvar
Ctrl+F / Ctrl+HFind / Replace
Ctrl+DSelecionar próxima ocorrência
Ctrl+/Toggle comentário
Alt+↑/↓Move linha pra cima/baixo
Shift+Alt+↓Duplicar linha
Ctrl+Shift+KApagar linha
Ctrl+PQuick open (busca por arquivo)

🛠️ Roqueman — cliente de API (HTTP / WebSocket / GraphQL)

Cliente completo de API estilo Postman/Insomnia, mas dentro do RoqueOS. Suporta os 3 protocolos que devs usam no dia a dia.

HTTP

  • 🌐 Métodos: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
  • 📋 Headers: editor de tabela, com sugestões dos headers padrão (Content-Type, Authorization, etc.)
  • 🔐 Auth: Bearer Token, Basic, API Key (header/query/cookie), OAuth 2.0, AWS Signature v4
  • 📦 Body: JSON, form-data, x-www-form-urlencoded, raw text, file upload, binary
  • 📜 Response: pretty-print JSON com fold, raw, preview HTML, headers, cookies, timing
  • 🔍 JSON path filter: aplique $.data[0].nome direto no response pra debug rápido
  • 🕰️ Histórico das últimas 100 requests
  • 📚 Collections: organize endpoints em pastas, exporta/importa formato Postman

WebSocket

  • 🔌 Conexão: ws:// ou wss://, com headers/auth iguais ao HTTP
  • 📤 Send: texto, JSON, binário
  • 📥 Receive: lista cronológica de mensagens com timestamp
  • 🎯 Filter: filtra received messages por substring ou regex
  • 🔄 Auto-reconnect: opcional, com backoff

GraphQL

  • 📝 Query editor com syntax highlight + autocomplete baseado em schema (introspection)
  • 🔍 Schema explorer: árvore navegável dos types/fields disponíveis
  • 📊 Variables panel: JSON separado pra valores
  • 📜 Saved queries (com versionamento)

Variáveis de ambiente

Crie environments (Dev, Staging, Prod) com vars tipo , . URL e headers substituem automaticamente. Trocar de environment = clica num dropdown.

Diferencial vs Postman

  • Sem login obrigatório — Postman exige conta agora
  • Dados ficam no seu RoqueOS (Firestore), não em servidor de terceiro
  • Roda dentro do desktop — pode ter Roqueman + Terminal + Browser lado a lado
  • Cross-device sync automático (mobile, desktop, etc.)

Limitações

  • Não tem mock server (Postman tem)
  • Não tem CI runner (Newman) — pra testes automatizados, exporte Postman e use Newman externo

🎨 Paint — editor de imagens e desenhos

Paint web responsivo com pincéis, formas, camadas e filtros. Substitui o "Paint" do Windows com algumas funções de Photoshop básico.

Funções

  • 🖌️ Pincéis: lápis, caneta, marcador, aerosol, borracha. Cada um com tamanho/opacidade
  • 🎨 Cores: HEX picker + paleta + dropper (pegar cor da imagem)
  • 📐 Formas: retângulo, círculo, linha, seta, polígono (com fill e contorno separados)
  • ✏️ Texto: 5 fontes embutidas + size + bold/italic
  • 🗂️ Camadas: até 10 layers com opacity individual + blend modes (normal / multiply / screen)
  • ↩️ Undo/Redo ilimitado (até fechar o app)
  • 🎭 Filtros: blur, sharpen, grayscale, sepia, brightness, contrast, hue rotate
  • 📐 Resize / crop com guides
  • 💾 Export: PNG, JPG (com qualidade), WebP, SVG (vector layers only)

Casos de uso

  • Mockup rápido de tela ou wireframe
  • Anotar screenshot pro time entender o bug
  • Logo simples / banner pra Insta
  • Editar foto pessoal (resize, crop, ajuste de cor)

Pra design profissional, use Figma ou Photoshop. Pra retoque rápido, Paint cobre 80% dos casos.


📋 Whiteboard — quadro infinito pra brainstorm

Quadro branco com canvas infinito, ideal pra organizar ideia, mapa mental, fluxo de processo, retrospectiva de time.

Funções

  • ♾️ Canvas infinito: arrasta pra qualquer lado, zoom 25%-400%
  • 🖌️ Caneta livre (com pressure-sensitive em Apple Pencil / S Pen)
  • 📐 Formas: setas, retângulos, círculos, linhas com snap automático
  • ✏️ Sticky notes coloridas: drag-and-drop pra reposicionar
  • 🔗 Conectores: linhas/setas que seguem as formas quando movidas (essencial pra mapa mental)
  • 📷 Imagens: cole screenshot direto (Ctrl+V) ou upload
  • 👥 Multi-pointer (planejado): vários usuários no mesmo board com cursores diferentes
  • 💾 Auto-save + export PNG/SVG do board todo ou área selecionada
  • 🎨 Templates: SWOT, Lean Canvas, retrô (start/stop/continue), KWL, Eisenhower matrix, kanban

Mobile

Touch-first: pinch-to-zoom, dois dedos pra arrastar canvas, um dedo pra desenhar. Apple Pencil + S Pen pressure-sensitive funcionam nativamente.

Casos de uso

  • 📊 Brainstorm sessão com sticky notes + setas
  • 🗺️ Mapa mental de projeto novo
  • 🔄 Retrospectiva de sprint (colunas Start/Stop/Continue)
  • 🎯 Wireframing de fluxo de UX
  • 📚 Estudo: mapa de conexão entre conceitos

Diferencial vs Miro/Mural

  • Sem login obrigatório de terceiros
  • Free forever (Miro/Mural cobram após 3-5 boards)
  • Roda offline depois da primeira carga (PWA cache)
  • ⚠️ Multi-pointer colaborativo ainda em roadmap (Miro tem mais maduro)

Veja também