🛰️ Dextre – App Creation & Library Usage Guide

Dextre is a web library inspired by Flutter + React, but with a different approach:

• ✅ Zero JSX – the entire UI is built using widgets in TypeScript
• ⚡ Custom Fiber System – reactive and non-blocking rendering
• 🦋 Flutter-like Widgets – Scaffold, Container, Row, Column, Text, Button, etc.
• 🎨 Native CSS utilities – Tailwind-style utility classes
• 🎣 Reactive hooks – useState, useEffect, useRef

This guide is focused on developers who will use Dextre to build apps, not on those who will contribute to the core of the library.

COMMUNITY: https://discord.gg/YfEXfyRe

1. Prerequisites

• Node.js >= 18
• npm or pnpm (examples use npm)
• A modern browser (Chrome, Edge, Firefox, etc.)

2. Creating a New App with npm create dextre

The recommended way to start a project is using the official playground:

npm create dextre@latest my-app

This will:

1. Download the official Dextre template
2. Create the folder my-app
3. Install all required dependencies (if you accept the prompt)
4. Make the project ready to run and experiment with examples

If you don’t allow the CLI to automatically install dependencies, enter the folder and run:

cd my-app
npm install

3. Basic Folder Structure Generated by the Template

The template may evolve over time, but typically you’ll see something like:

my-app/
├── src/
│   ├── main.ts              # App entry point
│   ├── app.ts               # Root of your Dextre app
│   ├── widgets/             # (optional) Custom widgets
│   └── styles/              # (optional) Extra CSS
├── index.html               # Root container (div #root)
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Bundler/dev server configuration
├── package.json             # Scripts and dependencies
└── ...

Key points:

• index.html: contains <div id="root"></div> where Dextre renders the UI
• src/main.ts: initializes the app with render(...)
• src/app.ts: defines the main widget displayed on screen

4. Running the Project in Development Mode

Inside the project folder:

cd my-app

# start dev server
npm run dev

The project will usually run at:

http://localhost:5173

Open it in the browser and you’ll see the starter app generated by the template.

5. Core Concepts in Dextre

5.1. No JSX – Only Widgets

Instead of writing:

// NO – JSX (React)
function App() {
  return (
    <div className='p-4'>
      <h1>Hello</h1>
    </div>
  );
}

In Dextre, everything is built with widget classes and build():

import { createElement, render, Container, Scaffold, Text } from 'dextre';

function SimpleApp() {
  const app = new Scaffold({
    body: new Container({
      className: 'p-4 bg-gray100',
      child: new Text('Hello, Dextre without JSX!'),
    }),
  });

  return app.build();
}

const root = document.getElementById('root')!;
render(createElement(SimpleApp, {}), root);

You always return a VNode (via app.build()) from widget classes.

5.2. Essential Widgets

These are the widgets you’ll use all the time:

• Scaffold – base screen layout (app bar, body, etc.)
• Container – block with padding, margin, background, border…
• Column / Row – flex layout (vertical/horizontal)
• Text – styled text
• Button – clickable button
• TextField – controlled input field

Quick layout example:

import { Scaffold, AppBar, Container, Column, Text, Button } from 'dextre';

function HomeScreen() {
  const layout = new Scaffold({
    appBar: new AppBar({
      title: new Text('Home'),
      backgroundColor: 'bg-blue600',
      centerTitle: true,
    }),

    body: new Container({
      padding: 'p-6',
      child: new Column({
        gap: 'gap-4',
        children: [
          new Text('Welcome to Dextre!'),
          new Button({
            onPressed: () => console.log('Clicked!'),
            child: new Text('Click here'),
          }),
        ],
      }),
    }),

    backgroundColor: 'bg-gray50',
  });

  return layout.build();
}

5.3. Dextre Hooks (Full List)

Dextre implements almost all React hooks:

| Hook | Support | | ------------------------------- | ------- | | useState | ✔ | | useReducer | ✔ | | useRef | ✔ | | useEffect | ✔ | | useLayoutEffect | ✔ | | useMemo | ✔ | | useCallback | ✔ | | useImperativeHandle | ✔ | | useId | ✔ | | useTransition (simplified) | ✔ | | useDeferredValue (simplified) | ✔ | | useDebugValue | |

6. CSS Utilities (Tailwind-Style)

Dextre automatically includes a utility class package, so you don’t need to configure Tailwind.

Examples:

import { createElement, render, useState, useEffect } from 'dextre';
import { Scaffold, AppBar, Container, Column, Text, Button } from 'dextre/widgets';

function CounterApp() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Counter montado');
  }, []);

  const app = new Scaffold({
    appBar: new AppBar({
      title: new Text('Contador Dextre'),
    }),

    body: new Container({
      padding: 'p-6',
      child: new Column({
        gap: 'gap-4',
        children: [
          new Text(`Valor atual: ${count}`, {
            style: {
              fontSize: 'text-xl',
              fontWeight: 'font-semibold',
            },
          }),
          new Button({
            onPressed: () => setCount(count + 1),
            child: new Text('Incrementar'),
            style: {
              backgroundColor: 'bg-green500',
              textColor: 'text-white',
              padding: 'px-4 py-2',
              borderRadius: 'rounded-lg',
            },
          }),
        ],
      }),
    }),
  });

  return app.build();
}

const root = document.getElementById('root')!;
render(createElement(CounterApp, {}), root);

new Container({
  className: 'p-6 bg-white rounded-xl shadow-md',
  child: new Text('Simple card'),
});

Or using decoration props:

new Container({
  padding: 'p-6',
  decoration: {
    backgroundColor: 'bg-blue500',
    borderRadius: 'rounded-xl',
    boxShadow: 'shadow-lg',
  },
});

7. Typical Component Structure

A Dextre component usually follows this pattern:

1. Hooks at the top (useState, useEffect, etc.)
2. A root widget (Scaffold, Container, etc.)
3. return app.build()

8. Helpful Scripts (Generated by Template)

In package.json you’ll typically find:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "type-check": "tsc --noEmit",
  },
}

9. Best Practices with Dextre

• Create reusable widgets instead of repeating Container + Column + Text
• Use key in list mappings
• Centralize styles into design tokens
• Avoid heavy logic in widget building — prepare data first
• Use custom hooks for complex state logic

10. Quick Summary

npm create dextre@latest my-app
cd my-app
npm run dev

Edit src/app.ts:

function App() {
  const app = new Scaffold({
    body: new Container({
      padding: 'p-6',
      child: new Text('My first Dextre app!'),
    }),
  });

  return app.build();
}

Dextre is made for developers who love Flutter’s ergonomics, but want the power of the modern web ecosystem.
Have fun building declarative, typed, and JSX-free interfaces. 🚀