JSX

JSX is a syntax extension for JavaScript that lets you write HTML markup directly inside your JavaScript code. It’s most commonly associated with libraries like React.

JSX is not a new language. Under the hood, it compiles to normal JavaScript function calls.

Inkweaver uses its own custom JSX runtime, designed specifically for visual novel interfaces. This runtime is optimized for simplicity and animation.

What JSX Looks Like

export function QuestLog(props) {
  const { questType } = props;
  const { getQuests } = useSelectors("quest-log");

  const quests = getQuests(questType);

  return (
    <div className="quest-log">
      <ul>
        {quests.map((quest) => (
          <QuestDetail quest={quest} key={quest.id} />
        ))}
      </ul>
    </div>
  );
}

function QuestDetail(props) {
  const { quest } = props;
  return (
    <div className="quest">
      <h2>{quest.title}</h2>
      <p>{quest.description}</p>
    </div>
  );
}

In this example, we see a QuestLog component. This is just a function that returns JSX.

The JSX that it returns references a QuestDetail component, and passes it JavaScript variables to it as custom HTML attributes.

You can execute JavaScript inside JSX–just surround it with {}.

Those attributes are available to the QuestDetail component as a props object. These attribute values are accessed by name.

Why JSX Matters

JSX makes UI code easier to understand because:

• the structure of the interface is visible directly in the markup
• component hierarchy is clear and explicit
• data and behavior appear right where they’re used

It combines familiar HTML-like syntax with the flexibility of JavaScript, making it a natural and expressive way to describe user interfaces.