HTML artifacts in chat

Sometimes a reply does not explain something in words but builds it: a small dashboard, an interactive page or a larger visual report. It arrives as an html artifact block and opens in the side panel beside the chat. This page covers the block and the sandbox the page runs in.

What an HTML artifact is

• A reply carries the page as a block named html artifact, and the complete page opens in the side panel beside the chat. The panel is often 400 to 800 px wide.
• The block's optional title names the page, for example html artifact title="Sales dashboard".
• A plain html block stays a source example in the reply: only html artifact becomes a page.
• Use an artifact for an interactive page, a dashboard or a larger visual report; for a single chart or one row of KPI cards, a chart or kpi block is the right shape instead. See Charts and KPIs in chat.
• Opening, saving and reloading a page, and the controls on its tab, are covered in HTML pages in chat.

What the page can load

• Scripts, stylesheets and fonts load only from two public code sites, jsdelivr and cdnjs, with at least the major version pinned.
• Images must be part of the page itself: data: addresses, inline SVG, or a picture drawn on a canvas. Remote images do not load.

What the sandbox blocks

• No network: fetch, XMLHttpRequest, WebSocket and EventSource fail, and form submissions fail too, so a page works with the data written into it.
• No storage: localStorage, sessionStorage, IndexedDB and cookies are blocked, so a page keeps nothing between visits.
• Links do not leave the page: choosing one does not navigate away or open the web. In-page #anchor links work.
• Pop-ups, alert and confirm dialogs and nested frames are blocked.

The page follows your theme

The page receives your company's theme, so it matches DataMind Oda in light and dark. Switch the theme while a page is open and the page follows.

Questions, answered

What is the difference between an html block and an html artifact block?

Only html artifact becomes a page in the side panel. A plain html block stays a source example in the reply.

Can an HTML artifact run its own scripts?

Yes. Scripts and styles run with the page, and the page can load code libraries only from two public code sites, jsdelivr and cdnjs, with at least the major version pinned.

Can the page fetch live data or call a service?

No. fetch, XMLHttpRequest, WebSocket and EventSource fail, and form submissions fail too. A page works with the data written into it.

Can an HTML artifact use images?

Only if they are inline: data: addresses, inline SVG, or a picture drawn on a canvas. Remote images do not load.

Can the page save data, such as a setting, in my browser?

No. The sandbox blocks localStorage, sessionStorage, IndexedDB and cookies, so a page keeps nothing between visits.

Why does a link in the page not open anything?

Links do not leave the page, so they do not navigate away or open the web. Links that jump to a section of the same page (#anchor) work.

Can the page show a pop-up or a dialog box?

No. Pop-ups, alert and confirm dialogs and nested frames are blocked.

Does the page follow my theme?

Yes. The page receives your company's theme, follows light and dark, and follows a theme change while it is open.

How wide is the panel the page opens in?

Often 400 to 800 px wide.