Getting started

Choose your first step#

New to Zidom? Try the live counter without installing anything, or use the published create-zidom Beta.2 CLI to generate a TypeScript + Vite app. The generated starter uses exact published @zidomjs/*@0.1.0-beta.2 package pins.

Create your first Zidom app#

Use Node.js 22 (or a supported Node.js 20.19+ release) and npm. The official CLI has been published and its npm registry tarball verified:

npm create zidom@next my-zidom-appcd my-zidom-appnpm installnpm run dev

The starter gives you a working reactive counter using Zidom signals and computed values. Check TypeScript and build a production bundle with npm run build.

For an application with two working client-side routes and browser history:

npm create zidom@next my-zidom-router -- --routercd my-zidom-routernpm installnpm run dev

These commands use the published @@TOKEN0@@ package, version 0.1.0-beta.2 under the next tag. They were verified from a fresh npm registry install, not just a local checkout. The CLI scaffolds files but deliberately does not install dependencies or publish your app. It's still experimental prerelease software.

Manual installation (without the CLI)#

Use Node.js 22 (Vite also supports Node.js 20.19+), npm, TypeScript and Vite. The Node 22 type definitions and disposable library types below are needed to typecheck current Vite declarations in a clean install. Zidom's published beta packages use the @zidomjs npm namespace (not the earlier @zidom scope). Versions below refer to 0.1.0-beta.2; all packages remain prerelease software.

mkdir my-zidom-app && cd my-zidom-appnpm init -ynpm pkg set type=modulenpm pkg set 'scripts.dev=vite' 'scripts.build=tsc --noEmit && vite build' 'scripts.preview=vite preview'mkdir -p srcnpm install @zidomjs/core@0.1.0-beta.2 @zidomjs/dom@0.1.0-beta.2npm install -D typescript@5.8.3 vite@7.3.7 @types/node@22 @zidomjs/vite@0.1.0-beta.2

Configure TSX#

Zidom uses its own JSX runtime, not React. Add the following to tsconfig.json:

{  "compilerOptions": {    "target": "ES2022",    "module": "ESNext",    "moduleResolution": "Bundler",    "jsx": "react-jsx",    "jsxImportSource": "@zidomjs/dom",    "lib": ["ES2022", "DOM", "DOM.Iterable", "ESNext.Disposable"],    "strict": true,    "isolatedModules": true,    "noEmit": true,    "types": ["node", "vite/client"]  },  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"]}

Create vite.config.ts:

import { defineConfig } from 'vite';import zidom from '@zidomjs/vite';export default defineConfig({  plugins: [zidom({ reactiveReads: 'tracked' })],});

Create index.html in the project root:

<!doctype html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>My Zidom app</title>  </head>  <body>    <div id="app"></div>    <script type="module" src="/src/main.tsx"></script>  </body></html>

Your first component#

Create src/main.tsx:

import { signal, computed } from '@zidomjs/core';import { mount } from '@zidomjs/dom';function Counter() {  const count = signal(0);  const doubled = computed(() => count.value * 2);  return <section>    <h1>Clicked {count} times</h1>    <p>Double: {doubled}</p>    <button onClick={() => count.value++}>Increment</button>  </section>;}const app = document.getElementById('app');if (!app) throw new Error('Missing #app');const dispose = mount(() => <Counter />, app);// dispose() cleans up reactive ownership and DOM listeners.

Start the development server and open the URL printed by Vite:

npm run dev

Click Increment; both the count and doubled value should update. Check TypeScript and create a production bundle:

npm run buildnpm run preview

npm run build runs tsc --noEmit before Vite. Keep all @zidomjs/* packages on the same verified beta version.

Official scaffolding CLI#

The official CLI is published on npm. Use npm create zidom@next my-app for the default counter or npm create zidom@next my-app -- --router for an app with navigation. Both were verified against the public registry with clean installs, type checking and production builds. The manual setup above remains available for developers who want to configure every file themselves.

A successful starter build does not certify beta software for production use. For installation problems or confusing steps, use the public beta feedback inbox (GitHub sign-in required). The link does not require access to the private Zidom source repositories.

The ESNext.Disposable library and @types/node types keep modern Vite/Rollup declarations typecheckable; do not remove them while copying this starter.

How JSX reactivity works#

• {count} passes the signal itself; the text binding updates automatically.
• {() => count.value * 2} is an explicit reactive getter, even without the compiler.
• {count.value} normally captures a setup-time snapshot. In tracked compiler mode, a directly declared local Zidom signal can be converted into a getter.
• A mounted component owns its effects and event listeners, which are disposed on unmount.

See every feature running#

Go to the live examples gallery for source-matched demos of signals, effects, conditional regions, keyed lists, portals, routing, query caching, forms, shared stores and dependency injection.

Continue with Signals & computed, Reactive rendering and API overview.