Skip to main content

Components

Built-in JSX components, grouped by what they are and what the host spends on them.

Roots​

A screen's root names its host, and there is no default: a tree that starts with anything else is refused with the list of roots.

  • <Screen> — an action form: presses, decoration, lists and scrolls, shown with render()
  • <Form> — a native modal form, shown with render()
  • <Container> — a container screen an entity or a block owns, served with createContainerScreen()

A root is only a host. None of them has members: every control below is a top-level component, and which hosts it works on is its own capability.

Layout​

Boxes and flow. Each draws on all three hosts and asks for nothing.

  • <Panel> — a box with an optional background and flexbox layout, or a stack that reflows hidden children
  • <Scroll> — an independent vertical scroll region
  • <Fragment> — group children without a wrapper node (<>…</>)

Content​

What a screen shows. Also free on every host.

  • <Text> — a label, literal or localized, baked or live with maxLength
  • <Trans> — a translated text whose tags are presses and styles, drawn where their text falls in every language
  • <Image> — a texture from a resource pack, baked or carried with live
  • <Background> — a full-screen texture drawn behind the screen

Controls​

Each of these works on more than one host, and draws differently on each — a <Toggle> is a native field on a modal, a press that flips on a screen, and a cell on a container.

  • <Button> — a press: a handler, the form's 'submit', or the way 'exit'
  • <Link> — a press whose destination is data, so the build can read where it leads
  • <Toggle> — a boolean
  • <Select> — one choice out of several, every option visible
  • <Option> — one entry for a <Select> or a <Dropdown>

Compiled​

What only exists because the screen is compiled. The two switches are client-side state — no press, no re-present, no payload — and are compiled-only.

  • <Tabs> — several panes on one screen, switched by a header row
  • <Disclosure> — a header that folds the rows under it and reflows what is below
  • <List> — max compiled rows and a carried count, for a variable row count on a frozen shape

Container cells​

Only on a container screen. See Container screens.

  • <Slot> — a real container cell, with a role and handlers for what moves through it
  • <SlotGrid> — a grid over a collection the engine already publishes
  • <PlayerInventory> — the player's 9 × 3 inventory grid
  • <Hotbar> — the player's hotbar

The three the engine only draws inside a <Form>. Anywhere else they are refused at build, by name.

Cross-pack​

  • <Expect> — states which screen a fragment is written for, and fails the build when it lands elsewhere
  • <Embed> — a screen one pack draws into an area another pack's screen reserves

Shared props​

  • Control props — the flexbox properties, position={'absolute'} placement, visible, enabled and background, on every component, plus how a conditional becomes a carried visible
  • Handler events — the one event object every handler takes

Next steps​

  • Hosts — what each component becomes on each screen
  • Hooks — add state and effects to your components
  • API — render(), contexts and the compiled-screen registry
On this page