`widget` element

Your own JavaScript (or a third-party SDK) mounted into the page behind a declared security policy.

Renders

a mount point; the widget script draws into it

Required

use: a .widget.iwc file.

Native apps

Web, and server-driven native apps

Syntax

widget element

{ "type": "widget" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`use`	`string`	component: the component file to render; widget: the widget file
`props`	`object {name: any}`

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

widget example

{
  "type": "widget",
  "use": "map.widget.iwc",
  "props": { "lat": 26.9124, "lng": 75.7873, "zoom": 13 }
}

Install a bundled widget with iwc add @iwc/map (also @iwc/richtext, @iwc/stripe-payment, @iwc/video-player) or write your own. See widgets.

Expected output

This example depends on project configuration (an API, a component or a widget file), so it is not rendered here; it is validated against the schema.

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.