Getting Started

This page details creating a Retend project, running it locally, and building a small reactive application.

Warning Retend is currently in early development. It is not ready for production use. APIs, features, and behaviors are highly unstable and subject to change without notice.

Prerequisites

Creating a project requires the following:

• Node.js: Available from the official Node.js website.
• npm: Ships with Node.js. The equivalent pnpm commands also work.

Familiarity with basic HTML, CSS, and JavaScript is assumed.

Retend Overview

Setting Up Your First Project

A project is created with the scaffold command in a terminal:

npx retend-start@latest my-app

The project directory is where dependencies are installed and the development server is started:

cd my-app
npm install
npm run dev

By default, the scaffold creates:

• TypeScript
• Vite for development and builds
• Built-in routing for multi-page applications
• CSS modules for styling
• Client-side rendering

The --tailwind flag includes Tailwind CSS, and --ssg enables static site generation.

New Retend projects include DevTools. The floating "RT" button opens the component tree and live state inspector.

Writing Your First Application

The following toggle application demonstrates reactive data in Retend.

The application is defined in source/App.tsx:

import { Cell } from 'retend';

export default function App() {
  // 1. Create a reactive piece of data
  const isOn = Cell.source(false);

  // 2. Define a function to update the data
  const toggleSwitch = () => isOn.set(!isOn.get());

  // 3. Return the user interface
  return (
    <>
      <h1>Hello, Retend</h1>
      <p>Click the button below to toggle the switch.</p>

      <button type="button" onClick={toggleSwitch}>
        Status: {isOn}
      </button>
    </>
  );
}

JavaScript projects use source/App.jsx instead.

How the Toggle Switch Works

1. An isOn variable is created with Cell.source(false). This wraps the boolean false in a reactive container.
2. {isOn} is passed directly into the interface.
3. Retend subscribes the text binding to that Cell. When the button calls toggleSwitch, the binding updates the button text. The App function is not called again.

Running Your Application

If the development server is not running, it is started with:

npm run dev

The application is served at http://localhost:5229.