Skip to content
x4js

Getting started

Requirements

Section titled “Requirements”

Knowing TypeScript, CSS (or SCSS) and a little HTML will help, but you do not need them to get started.

If they are new to you, an AI assistant does the job very well: x4js gives it what it needs to write correct code, and you learn by reading what it produces. See Working with an AI assistant.

Tools:

  1. Node.js 24 or later is recommended.
  2. An editor that understands TypeScript, for example VS Code.
  3. Electron, Tauri or NW.js if you want a desktop application: the same application runs in the browser or inside one of these shells.

There is nothing else to install: the x4js command line is part of the package. It handles the creation, the build and the live reload of your projects.

Create a project

Section titled “Create a project”
Fenêtre de terminal
npx x4js create my-app

The command creates the my-app folder from a template and installs its dependencies. Three templates exist:

Template Content
app Standard x4js application. This is the default.
minimal Minimal x4js application.
hosted x4js application ready for Vercel, Netlify or Cloudflare Pages. See Deploy.

To pick one: npx x4js create my-app --template minimal. npx x4js templates prints the current list.

Run the project

Section titled “Run the project”
Fenêtre de terminal
cd my-app
npm install
npm run dev

The project is built, then served locally. The address is printed in the terminal:

x4js       2.3.11
mode       dev
config     C:\work\my-app\x4.config.json
outdir     C:\work\my-app\bin
server     http://127.0.0.1:8000

The page reloads each time a source file changes. A change that only touches CSS is applied without reloading.

What a project contains

Section titled “What a project contains”
File Role
package.json Dependency on x4js, and the dev and build scripts.
x4.config.json Entry files, output folder, files to copy.
tsconfig.json TypeScript settings.
src/index.html The page, which loads main.js and main.css.
src/main.ts The entry point of the application.
src/main.scss The styles of the application.

A first interface

Section titled “A first interface”

Everything starts in src/main.ts. Here is a complete application: a label, and a button that changes it.

import { Application, Button, Label, VBox } from 'x4js';


import "./main.scss";


const status = new Label( { text: "Ready" } );


const app = new Application( );


app.setMainView( new VBox( {
  content: [
    status,
    new Button( { label: "Run", click: ( ) => status.setText( "Done" ) } ),
  ]
}) );

Save the file: the page updates by itself.

Build for production

Section titled “Build for production”
Fenêtre de terminal
npm run build

The result is written to the bin folder, minified and without source maps. That folder is emptied before each build: do not keep hand-written files in it.

Deploy

Section titled “Deploy”

A built x4js application is a static site: any host can serve the bin folder.

The hosted template is the app template plus the configuration for Vercel and Netlify. The Deploy page details publishing on Vercel, Netlify, Cloudflare Pages or another host.

Going further

Section titled “Going further”