Getting Started

Welcome! This page will help you start your first project with Retend, a modern JavaScript framework for building user interfaces. We focus on keeping your applications fast and your code simple.

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

Before we begin, please ensure you have the following installed:

• 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.

Why Choose Retend?

Setting Up Your First Project

The fastest way to start learning Retend is to scaffold a new project. Open your terminal and run:

npx retend-start@latest my-app

Then move into the project, install dependencies, and start the dev server:

cd my-app
npm install
npm run dev

By default, the scaffold creates:

• TypeScript
• Vite for an exceptionally fast development experience
• Built-in routing for multi-page applications
• CSS modules for styling
• Client-side rendering

If you want Tailwind CSS, add --tailwind. If you want static site generation, add --ssg.

Writing Your First Application

Let us build a simple toggle switch application. This will show you how Retend handles reactive data.

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 watches that specific Cell. When you click the button and toggleSwitch runs, Retend automatically updates just the text inside the button. The App function itself only runs exactly once!

Running Your Application

If the dev server is not already running, start it with:

npm run dev

Open your web browser and navigate to http://localhost:5229. You will see your toggle switch ready to be clicked!

What to Learn Next

Now that you have your first app running, you can explore more advanced topics:

• Cells and Reactivity: Learn deeply how reactive state works.
• JSX and Components: Build reusable pieces for your user interface.
• Control Flow: Handle lists and conditional logic.