Getting Started

Create a Retend project, run it locally, and build 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

Install the following before creating a project:

• Node.js: If you do not have it yet, download it from the official Node.js website.
• npm: It ships with Node.js. If you prefer pnpm, the equivalent commands work too.

We also assume you are familiar with basic HTML, CSS, and JavaScript.

Retend Overview

Setting Up Your First Project

To create a project, run the scaffold command in a terminal:

npx retend-start@latest my-app

Change to the project directory, install its dependencies, and start the development server:

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

Add --tailwind to include Tailwind CSS. Add --ssg to enable 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.

After scaffolding, open source/App.tsx and replace its contents with:

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>
    </>
  );
}

If you picked JavaScript during setup, edit source/App.jsx instead.

How the Toggle Switch Works

1. We create an isOn variable using Cell.source(false). This wraps our boolean false in a reactive container.
2. We pass {isOn} directly into our user 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, start it with:

npm run dev

Open http://localhost:5229 in a browser to view the application.