Data access and the sandbox

The sandbox

Each component runs in an isolated frame. It cannot reach the host page's DOM, cookies, storage or forms, open nested frames or workers, or make network requests (fetch, XHR, sockets). It can load pictures, video, fonts and GLB files from Praisma's own media hosts, which is exactly what media and media-list props give you. Nothing loads from outside hosts.

Static data: binding props

For CMS values on a page, use a binding prop (for example the current entry's title). The value is resolved before rendering and your component just receives it.

Live data: capabilities

A component can read live data through window.Praisma.request after declaring the capability it needs and having it approved:

cms.entries.read:cms.entries.listandcms.entry.read.

commerce.products.read:commerce.products.listandcommerce.product.read.

commerce.cart.read:commerce.cart.read.

commerce.cart.write:commerce.cart.add,commerce.cart.update,commerce.cart.remove.

commerce.checkout.navigate:commerce.checkout.navigate.

{ "type": "project-grid", "capabilities": ["cms.entries.read"], ... } const { data, meta } = await window.Praisma.request("cms.entries.list", { type: "projects", limit: 12, page: 1, sort_by: "published_at", dir: "desc" }); // data[i] = { id, attributes: {...}, media: { cover: [{ url, thumbnail_url, alt_text, ... }] } } // meta = { page, pageSize, total, pageCount, hasNext, hasPrev }

cms.entries.listtakestype,limit(page size, 1 to 50, default 12),page,sort_by,dir,qandlocale. Only published entries are returned, in the page's language unless you passlocale.cms.entry.readtakes{type, id, locale?}.

commerce.products.listtakeslimit,page,sort,dir,collection,q,locale;commerce.product.readtakes{slug}. Products include their eligible offers and variants with server prices.

commerce.cart.addtakes{product_id, variant_id?, offer_id?, quantity?, configuration?}. Never send a price: checkout calculates the total on the server.

Make limits, sorting and paging props so the site owner controls them, rather than hard-coding them.

Approval

Declared capabilities do nothing until a site manager approves them in the code component editor (Approve access; save first, because approval covers the saved source). Approval is tied to the exact definition, JavaScript and CSS, so any change to the source switches the access off until it is approved again. A component never receives an API token, and it cannot choose a URL, method, header or organization. Creating, changing or deleting CMS entries and products is not available to components.