Creating & Importing Charts

The authoring guide for Rex community charts · Last updated: July 16, 2026

  A chart in Rex is a small, self-contained interactive learning widget — a quiz, an animation, a simulation, a diagram you can poke at. This guide covers the three ways to make one and the rules your file must follow to publish it to the community store.

Contents

What a chart is
Creating charts in the app
Importing your own HTML
The params contract — editable variables
Declaring field types with __schema
Authoring rules & lint
Publishing, remixing & moderation
Starter template

1. 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).

2. 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.

3. Importing your own HTML

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

Lint it on-device and show any problems. Errors block publishing; warnings are advisory.
Detect editable variables from your window.__chartParams object.
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 then flows through the same review-and-publish step as any other chart.

Imported HTML runs in a sandboxed web view with a strict content-security policy that Rex injects. Your file must be fully self-contained — no external scripts, stylesheets, fonts, or images will load.

4. The params contract — editable variables

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:

Value	Editor control
Text string	Text field
`"#RRGGBB"` string	Color picker
Number	Number field
Boolean	Toggle
Array of strings / numbers	Editable list
A `questions` array of `{ q, a }`	The study-set / quiz editor

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>

When someone remixes your chart and edits the values, Rex re-injects the edited object as window.__chartParams before your script runs — so your render code needs no changes. Alternatively, you may place the literal token {{PARAMS}} where a JSON object should go; Rex substitutes the current params there at render time.

5. Declaring field types with `__schema`

Inference is usually enough, but you can override it with an 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"] }
  }
};

6. Authoring rules & lint

Rex lints every imported file on-device and again on the server. These are hard errors — fix them or the chart won't publish:

Self-contained only. No http:// or https:// URLs for scripts, styles, fonts, or images. Inline all CSS and JS; embed images as data: URIs or draw them with inline SVG. (The only exception is the SVG XML namespace www.w3.org/2000/svg, which the browser never fetches.)
Light theme only. No dark hardcoded backgrounds and no prefers-color-scheme dark branches. Use white or soft green tints like rgba(114,160,125,.12).
No emoji. Use inline SVG or text instead.

These are warnings — they won't block you, but review them:

Missing <meta name="viewport"> (Rex injects one, but include it for an accurate preview).
No window.__chartParams — the chart will publish but nobody can remix or edit it.
File larger than ~300 KB — trim inline assets.

Other good habits: include a viewport meta tag, make click targets respond to touch, and guard canvas first-paint with requestAnimationFrame. Don't put the word "Rex" in user-visible text.

7. 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.

8. Starter template

Download this minimal, valid chart, open it in any text editor, and edit the params and render code. It passes the lint and demonstrates the full params contract.

Download starter template