React Components

Stele renders .tsx and .jsx files as standalone React components. You don't need a package.json, a bundler, or any build configuration — just export a component and push.

Writing a component

Your file must default-export a React component with no required props:

export default function HelloWorld() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">Hello, World</h1>
    </div>
  );
}

That's the only requirement. Stele compiles the component when your repo syncs and serves it with its built-in runtime.

Available libraries

The runtime includes these libraries. You can import them by name — no installation needed.

Import examples

import { useState, useEffect } from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
import { FileText, Users, TrendingUp } from "lucide-react";
import * as d3 from "d3";
import _ from "lodash";
import * as math from "mathjs";
import Papa from "papaparse";

Using Tailwind CSS

Tailwind utility classes are available on every page. Use them directly in your JSX:

export default function Card() {
  return (
    <div className="max-w-md mx-auto bg-white rounded-xl shadow-md p-6">
      <h2 className="text-xl font-semibold text-gray-900">Status</h2>
      <p className="mt-2 text-gray-600">All systems operational.</p>
    </div>
  );
}

Charting with Recharts

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";

const data = [
  { month: "Jan", value: 400 },
  { month: "Feb", value: 300 },
  { month: "Mar", value: 600 },
  { month: "Apr", value: 800 },
];

export default function Chart() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Monthly Report</h1>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis />
          <Tooltip />
          <Bar dataKey="value" fill="#3b82f6" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

Stateful components

All React Hooks work as expected:

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-8 text-center">
      <p className="text-4xl font-mono mb-4">{count}</p>
      <button
        onClick={() => setCount(count + 1)}
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Increment
      </button>
    </div>
  );
}

Loading data from sibling files

You can fetch CSV, JSON, or other data files committed alongside your component:

import { useState, useEffect } from "react";
import Papa from "papaparse";

export default function DataViewer() {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    fetch("./data.csv")
      .then((res) => res.text())
      .then((text) => {
        const { data } = Papa.parse(text, { header: true });
        setRows(data);
      });
  }, []);

  if (rows.length === 0) return <p>Loading...</p>;

  return (
    <table className="min-w-full divide-y divide-gray-200">
      <thead>
        <tr>
          {Object.keys(rows[0]).map((col) => (
            <th key={col} className="px-4 py-2 text-left text-sm font-semibold">
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, i) => (
          <tr key={i}>
            {Object.values(row).map((val, j) => (
              <td key={j} className="px-4 py-2 text-sm">{val}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Make sure data.csv is committed in the same directory as the component.

Claude Code compatibility

Stele's runtime mirrors the environment Claude Code uses for React artifacts. Components generated by Claude Code (with artifact type set to application/vnd.ant.react) will render on Stele without modification — just save the output as a .tsx file and push.

Constraints

• No custom dependencies. You can only import from the libraries listed above. The runtime is fixed and centrally managed.
• No required props. Your default export must work with no props passed to it.
• No server-side code. Components run entirely in the browser. Use fetch for data loading.
• No custom build steps. Stele compiles your TSX/JSX automatically. You cannot configure the compiler.