O que é VTEX IO?
VTEX IO é o framework de desenvolvimento nativo da VTEX, lançado em 2018 para substituir o modelo legado (VTEX Legacy / CMS). Ele permite criar lojas virtuais, aplicativos e integrações usando tecnologias modernas como React, TypeScript e Node.js — com deploy direto na infraestrutura da VTEX, sem necessidade de servidor próprio.
Em termos práticos, VTEX IO é o ambiente onde rodam:
- A loja virtual (usando VTEX Store Framework ou FastStore)
- Custom Apps — aplicativos customizados para regras de negócio específicas
- Backend Apps — serviços Node.js rodando na infraestrutura VTEX
Se você usa VTEX hoje e sua loja foi criada ou migrada após 2020, ela provavelmente roda em VTEX IO.
Como funciona o VTEX IO?
O VTEX IO funciona com um modelo de workspaces e builders. Entenda cada conceito:
Workspaces
Um workspace é um ambiente isolado de desenvolvimento, parecido com um branch no Git. Existem três tipos:
| Tipo | Para que serve |
|---|---|
master | Ambiente de produção — o que os clientes veem |
production | Ambiente de staging — testa mudanças antes do go-live |
development | Ambiente de desenvolvimento local |
Você desenvolve em um workspace de dev, testa no production e promove para master quando aprovado. Isso evita que mudanças em desenvolvimento afetem a loja em produção.
Builders
Builders são compiladores que processam tipos específicos de código dentro de um app VTEX IO:
| Builder | O que processa |
|---|---|
store | Blocos de vitrine (Store Framework) |
react | Componentes React |
node | Backend em Node.js |
admin | Painéis no admin da VTEX |
graphql | Schemas e resolvers GraphQL |
styles | CSS / tokens de design |
Apps e Dependencies
Tudo no VTEX IO é um app com versão. Uma loja VTEX IO tem uma árvore de dependências parecida com um package.json, mas gerenciada pela VTEX. Você declara as apps que usa (carrinho, busca, checkout) e suas versões no arquivo manifest.json.
Qual a diferença entre VTEX IO e VTEX Legacy?
Essa é a principal dúvida de quem está avaliando a plataforma. A tabela abaixo resume as principais diferenças:
| Critério | VTEX Legacy (CMS) | VTEX IO |
|---|---|---|
| Tecnologia | HTML/CSS/JS customizado, templates | React, TypeScript, Node.js |
| Performance (LCP médio) | 4–8s | 1,5–3s |
| SEO técnico | Limitado (templates rígidos) | Completo (full controle) |
| Customização | Alta, mas frágil | Alta e estruturada |
| Manutenção | Cara e trabalhosa | Mais previsível com boas práticas |
| Suporte VTEX | Descontinuado | Atual (investimento ativo) |
| Integrações nativas | Via VTEX Apps (limitado) | Via VTEX IO Apps (amplo) |
O VTEX Legacy está em descontinuação. A VTEX não lança novos recursos para ele. Se você ainda opera em Legacy, a migração para IO é obrigatória a médio prazo — e pode ser feita de forma faseada ou em uma migração completa.
VTEX IO vs FastStore: qual a diferença?
Dentro do ecossistema VTEX IO, existem dois frameworks para vitrine:
VTEX Store Framework (IO padrão)
O framework original do IO, baseado em blocos declarativos (store.home, product-summary, etc.). É o mais usado hoje, estável e com amplo suporte de apps.
- Prós: Ecossistema amplo, muitos apps disponíveis, docs consolidadas
- Contras: Performance limitada pela arquitetura de componentes, LCP difícil de otimizar abaixo de 2s
FastStore
O framework mais novo, baseado em Next.js com arquitetura totalmente desacoplada. Voltado para times que querem máxima performance e controle.
- Prós: Core Web Vitals excelentes (LCP < 1,5s possível), total liberdade de frontend
- Contras: Ecossistema de apps ainda menor, requer time mais técnico, nem todas as funcionalidades VTEX têm suporte nativo
Quando usar qual?
| Cenário | Recomendação |
|---|---|
| Loja nova com time técnico dedicado | FastStore |
| Loja existente em VTEX IO | Store Framework (migrar para FastStore se performance for problema) |
| E-commerce de alta concorrência com foco em SEO | FastStore |
| Equipe pequena ou projeto de médio porte | Store Framework |
O que é possível construir com VTEX IO?
Além da vitrine, o VTEX IO permite desenvolver:
Custom Apps de Vitrine
Componentes React específicos do negócio: banners personalizados, seções de PDPs, carrosséis customizados, integrações de chat, calculadoras de frete.
Backend Apps (Node.js)
Serviços que rodam na infraestrutura VTEX: integrações com ERPs, regras de pricing, sincronização de estoque, middleware de pedidos.
Admin Apps
Painéis customizados dentro do admin da VTEX — relatórios, ferramentas de operação, dashboards de negócio.
Service Workers e PWA
A vitrine VTEX IO já tem suporte nativo a PWA, mas é possível customizar service workers para estratégias específicas de cache.
Como é o fluxo de desenvolvimento VTEX IO?
Para quem está avaliando contratar um desenvolvedor ou especialista VTEX, entender o fluxo ajuda a definir escopo e prazo:
- Setup local: Instalar o VTEX CLI (
vtex) e autenticar na conta - Criar workspace de dev:
vtex use nome-do-workspace - Desenvolver o app: Código React/Node.js linkado ao workspace
- Testar em production workspace: Validar com usuários reais antes do go-live
- Deploy no master:
vtex deployapós aprovação - Publicar app: Apps próprios podem ser publicados no VTEX App Store
Um projeto típico de nova loja VTEX IO dura 3 a 6 meses entre discovery, desenvolvimento, testes e go-live — dependendo da complexidade e das integrações necessárias.
Quem é o profissional ideal para projetos VTEX IO?
VTEX IO exige um perfil técnico específico. Um desenvolvedor VTEX IO precisa dominar:
- React e TypeScript — a stack principal da vitrine
- Node.js — para backend apps
- GraphQL — API padrão de comunicação na plataforma
- CSS/Tachyons/Tailwind — estilização de componentes
- VTEX CLI e workspaces — processo de deploy
- Performance web — Core Web Vitals, LCP, CLS, INP
Além do desenvolvimento puro, um especialista VTEX entende o lado de negócio: analytics, SEO, CRO e integrações com o ecossistema VTEX (OMS, Logistics, Pricing).
Perguntas frequentes sobre VTEX IO
VTEX IO é open source? Não. O framework é proprietário da VTEX. O código dos apps que você desenvolve é seu, mas o runtime e a infraestrutura são da VTEX.
Quanto custa usar VTEX IO? O VTEX IO está incluído no contrato VTEX — não há custo adicional. O custo é o desenvolvimento e manutenção dos apps customizados.
É possível migrar do VTEX Legacy para IO sem perder SEO? Sim, se a migração for feita corretamente: mapeamento de URLs, redirects 301, preservação de canonical e monitoramento de indexação. Uma migração VTEX mal planejada pode causar quedas significativas de tráfego orgânico.
VTEX IO funciona para marketplaces? Sim. A VTEX tem arquitetura nativa de marketplace — você pode operar como seller, como marketplace, ou os dois simultaneamente. Isso é independente de usar IO ou Legacy.
Qual a diferença entre VTEX IO e Headless Commerce? VTEX IO é o ambiente de desenvolvimento. Headless Commerce é uma arquitetura — onde o frontend (vitrine) é completamente separado do backend (commerce engine). O FastStore dentro do VTEX IO é uma implementação headless.
Próximos passos
Se você está pesquisando VTEX IO para:
- Desenvolver uma nova loja: veja o guia de implantação VTEX
- Migrar do Legacy: veja como funciona a migração VTEX
- Contratar um especialista: conheça os serviços de desenvolvedor VTEX e freelancer VTEX
- Otimizar uma loja existente: veja otimização de lojas VTEX IO