Inputs

Inputs are functions that mount given elements like button, slider and return a signal to accept data from a user and enable interaction.

Genji provides some built-in inputs, adapting from @observablehq/inputs, and you can also wrapper custom elements you design, such as chart, into inputs by Inputs.fromElement(element).

Built-in inputs

Built-in inputs can be accessed directly through Inputs namespace.

For example, to define a range input:

size = Inputs.range([0, 300], { label: "size", value: 100, step: 1 });

The size variable here will reactively update when the user interacts with the range input, triggering re-evaluation of referencing code blocks.

call(() => {
  const div = document.createElement("div");
  div.style.width = size + "px";
  div.style.height = "100px";
  div.style.background = "black";
  return div;
});

Refer to reference for more built-in inputs.

Want More?

Currently Genji only exports a subset of inputs in @observablehq/inputs, you can open a PR if you want more.

Custom inputs

If an element emits the input event and has a value attribute, it can be converted to a custom input using Inputs.fromElement(element).

For example, to define a custom text input:

text = Inputs.fromElement(document.createElement("input"));

text;

It is also possible to convert some complex elements satisfying the condition, such as the returned SVG elements from Plots in @observablehq/plot.

tips = Inputs.fromElement(
  Plot.barY(
    [
      { genre: "Sports", sold: 275 },
      { genre: "Strategy", sold: 115 },
      { genre: "Action", sold: 120 },
      { genre: "Shooter", sold: 350 },
      { genre: "Other", sold: 150 },
    ],
    { x: "genre", y: "sold", tip: true }
  ).plot()
);

tips;