Creating & importing charts.

01 What a chart is

Every chart is a single HTML document that renders inside the Rex app. It should teach or drill exactly one idea, run fully offline, and stay small. The best charts are kinetic. The student learns by doing, not by reading.

Rex charts share one visual language: a light background, black text, and a green accent (#72A07D).

02 Creating charts in the app

Open the Create tab in the chart store. Creating and publishing requires a Pro subscription. You have three authoring paths:

• Quiz modes. Timed, true/false, multiple choice and type-in. You write question-and-answer cards; Rex renders them through a built-in quiz template. Your questions are the chart's editable variables (see the params contract).
• Frame Studio. A CapCut-style timeline. Draw, stamp shapes and drop text or question blocks frame by frame; it plays back like a mini video.
• Import. Bring your own self-contained HTML file. This is the most powerful path, and the rest of this guide is mostly about it.

03 Importing your own HTML

In the Create tab, choose Import and pick an .html file (up to 1 MB). Rex will:

1. Lint it on-device and show any problems. Errors block publishing; warnings are advisory.
2. Detect editable variables from your window.__chartParams object.
3. Preview it through the exact pipeline used in the store, so what you see is what students get.

Add a title, an optional subject and optional tags, then continue to publish. Everything flows through the same review-and-publish step as any other chart.

04 The params contract

The point of a chart is that it can be remixed. A student (or you) can open the chart's variables and tweak them without touching code. You expose those variables by assigning a single object to window.__chartParams:

<script>
  window.__chartParams = {
    title: "Photosynthesis",
    accentColor: "#72A07D",
    speed: 1.0,
    showLabels: true,
    questions: [
      { q: "What gas do plants take in?", a: "Carbon dioxide" },
      { q: "What gas do plants give off?", a: "Oxygen" }
    ]
  };
</script>

Every top-level key becomes an editable field in Rex's params editor. Rex infers the right control from the value:

The questions array is the "universal variable". The same shape powers quiz charts, game charts and any imported chart that wants a study set. Read the params back at runtime and render from them:

<script>
  const p = window.__chartParams || {};
  document.body.style.setProperty("--accent", p.accentColor || "#72A07D");
  render(p.questions || []);
</script>

05 Declaring field types

Inference is usually enough, but you can override it with the optional reserved __schema key. Keys beginning with __ are hints and are never shown to remixers as plain fields.

window.__chartParams = {
  speed: 1.0,
  mode: "slow",
  __schema: {
    speed: { type: "slider", label: "Playback speed", min: 0.25, max: 4, step: 0.25 },
    mode:  { type: "select", label: "Difficulty", options: ["slow", "normal", "fast"] }
  }
};

06 Authoring rules & lint

Rex lints every imported file on-device and again on the server. Errors must be fixed or the chart won't publish. Warnings won't block you, but they're worth reviewing.

Good habits

• Make click targets respond to touch, not just mouse events.
• Guard canvas first-paint with requestAnimationFrame.
• Don't put the word "Rex" in user-visible text.

07 Publishing, remixing & moderation

Publishing requires Pro and a one-time agreement to the community guidelines. Once published, your chart is reviewed and anyone can discover, use and remix it. Remixing opens the params editor on a copy, credited back to your original.

You are solely responsible for what you publish. Rex can remove any chart at any time, and reported charts are hidden and reviewed within 24 hours. See the community guidelines for the full content policy.

08 Starter template

Start from a file that already passes the lint and demonstrates the full params contract. Open it in any text editor and edit the params and render code.