Simple. Fast. Human.

Appearance

Setting up a Project ​

CLI Scaffolding ​

The fastest way to start is with the tina4 CLI:

bash
npx tina4 create my-app
cd my-app
npm install
npm run dev

This creates a ready-to-go project with:

  • Vite dev server with HMR
  • TypeScript configuration
  • A reactive counter page
  • Hash-based routing (/, /about, 404)
  • An AppHeader web component
  • Default CSS styles
  • TINA4.md AI context file

With PWA Support ​

bash
npx tina4 create my-app --pwa

Adds service worker registration and manifest generation to your project.

Project Structure ​

my-app/
├── index.html              Entry point
├── package.json
├── tsconfig.json
├── vite.config.ts
├── TINA4.md                AI context file
├── src/
│   ├── main.ts             App bootstrap
│   ├── components/         Web components
│   │   └── app-header.ts
│   ├── pages/              Page functions
│   │   └── home.ts
│   ├── routes/             Route definitions
│   │   └── index.ts
│   └── public/             Static assets
│       └── css/
│           └── default.css

File Conventions ​

TypeLocationNaming
Componentssrc/components/kebab-case.ts
Pagessrc/pages/kebab-case.ts
Routessrc/routes/index.ts
Stylessrc/public/css/Any .css
Static assetssrc/public/Any

Manual Setup ​

If you prefer to set things up yourself:

bash
mkdir my-app && cd my-app
npm init -y
npm install tina4js
npm install -D vite typescript

Create index.html:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

Create src/main.ts:

ts
import { signal, html, route, router } from 'tina4js';

route('/', () => {
  const count = signal(0);
  return html`
    <button @click=${() => count.value++}>
      Clicks: ${count}
    </button>
  `;
});

router.start({ target: '#root', mode: 'hash' });

Create tsconfig.json:

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"]
  },
  "include": ["src/**/*.ts"]
}

NPM Scripts ​

json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
CommandDescription
npm run devStart dev server with HMR
npm run buildProduction build to dist/
npm run previewPreview production build locally

CLI Commands ​

CommandDescription
tina4 create <name>Scaffold a new project
tina4 create <name> --pwaScaffold with PWA support
tina4 devStart Vite dev server
tina4 buildProduction build to dist/
tina4 build --target phpBuild for tina4-php embedding
tina4 build --target pythonBuild for tina4-python embedding

Proxy API Calls in Development ​

When developing against a tina4-php or tina4-python backend, add a proxy to vite.config.ts:

ts
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:7145'
    }
  }
});

This forwards all /api/* requests to your tina4 backend during development.