Installation

npm install flitterjs @flitterjs/adapter-svelte

Usage

<script>
  import { Container, Alignment, Text, TextStyle } from "flitterjs";
  import Widget from "@flitterjs/adapter-svelte";

  const widget = Container({
    alignment: Alignment.center,
    color: "lightblue",
    child: Text("Hello, Flitter!", {
      style: new TextStyle({ fontSize: 24, fontWeight: "bold" }),
    }),
  });
</script>

<Widget {widget} width="600px" height="300px" renderer="svg" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | widget | Widget | Placeholder 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 | | ssr | { size: { width, height } } | undefined | SSR configuration for server-side rendering |

Server-Side Rendering

The Svelte integration supports SSR out of the box. Pass the ssr prop to enable server-side rendering with a fixed size:

<Widget
  {widget}
  width="600px"
  height="300px"
  ssr={{ size: { width: 600, height: 300 } }}
/>

With Charts

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

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

<script>
  import Widget from "@flitterjs/adapter-svelte";
  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] },
      ],
    },
  });
</script>

<Widget widget={chart} width="100%" height="400px" />

Requirements

• Svelte 4+ or 5+
• flitterjs as a peer dependency

Documentation

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

License

MIT