Installation

npm install flitterjs @flitterjs/adapter-react

Usage

import { Container, Alignment, Text, TextStyle } from "flitterjs";
import Widget from "@flitterjs/adapter-react";

function App() {
  return (
    <Widget
      width="600px"
      height="300px"
      renderer="svg"
      widget={Container({
        alignment: Alignment.center,
        color: "lightblue",
        child: Text("Hello, Flitter!", {
          style: new TextStyle({ fontSize: 24, fontWeight: "bold" }),
        }),
      })}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | widget | Widget | Hello World text | The Flitter widget tree to render | | width | string | "100%" | Container width (CSS value) | | height | string | "300px" | Container height (CSS value) | | renderer | "svg" \| "canvas" | "svg" | Rendering backend |

With Charts

Add charts via the CLI, then render them in React:

npx @flitterjs/cli@latest init
npx @flitterjs/cli@latest add bar-chart

import Widget from "@flitterjs/adapter-react";
import BarChart from "./charts/bar-chart";

const chart = BarChart({
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr"],
    datasets: [
      { legend: "Revenue", values: [40, 65, 50, 80] },
      { legend: "Profit", values: [20, 35, 25, 45] },
    ],
  },
});

export default function Dashboard() {
  return <Widget widget={chart} width="100%" height="400px" />;
}

Requirements

• React 18+ or 19+
• flitterjs as a peer dependency

Documentation

Full documentation and interactive examples at ui.flitter.dev.

License

MIT