Começando

Instalação#

Você precisa de Node 20+, Vite 5 ou mais novo (o Vite 8 funciona) e, para TypeScript, a versão 5.1 ou mais nova.

npm install @velozjs/dom
npm install -D vite vite-plugin-veloz typescript

O @velozjs/dom inclui o núcleo reativo (@velozjs/core) e o reexporta, então um import basta para a maioria dos apps. Adicione @velozjs/css para estilos com escopo e @velozjs/ssr quando for renderizar no servidor.

Configure o Vite#

import { defineConfig } from 'vite';
import veloz from 'vite-plugin-veloz';

export default defineConfig({
  plugins: [veloz()],
});

O plugin configura o JSX para o Veloz e, na renderização no servidor, aponta seus imports de @velozjs/dom para @velozjs/ssr.

Configure o TypeScript#

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@velozjs/dom",
    "moduleResolution": "bundler",
    "strict": true
  }
}

Seu primeiro componente#

<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>

import { render, createSignal, createMemo, Show } from '@velozjs/dom';

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = createMemo(() => count() * 2);

  return (
    <main>
      <p>Contagem: {count} · dobro: {doubled}</p>
      <button onClick={() => setCount((c) => c + 1)}>Somar um</button>
      <Show when={() => count() >= 10}>
        <p>Já são muitos cliques.</p>
      </Show>
    </main>
  );
}

render(() => <Counter />, document.getElementById('app')!);

Rode npx vite e abra a página. Clicar no botão atualiza dois nós de texto e nada mais: o Counter em si nunca roda de novo.

{count} funciona porque o getter é uma função. Toda função no JSX vira uma região viva, atualizada quando os signals que ela lê mudam.

O que ler depois#

• Reatividade: signals, memos, effects e como as atualizações são agendadas.
• Componentes e JSX: o modelo mental em três regras.
• Renderização no servidor: renderize em HTML e hidrate no cliente.