Interactive artifacts: pages, apps and animation
Artifacts are live results that Modelyx builds in a side panel next to the chat: web pages, mini apps, dashboards, animated banners, 3D scenes, diagrams and vector graphics. You see a working Preview right away, iterate by asking for changes, and then download the source or publish a public link.
Artifact types
| Type | Use it for |
|---|---|
| HTML page | Landing pages, animated banners and hero sections, email layouts, slide pages |
| React component or mini app | Calculators, forms, dashboards, interactive tools |
| SVG | Logos, icons, simple illustrations |
| Mermaid diagram | Flowcharts, org charts, process and structure diagrams |
| Markdown | Formatted text such as briefs and checklists |
| Code | Snippets and scripts to copy |
The Artifacts skill is on by default, so you only need to ask for the result.
What you can build
- Landing pages and product pages you can review before handing them to a developer.
- Dashboards and charts built from your data, interactive in the browser.
- Calculators, quizzes and forms that work in the browser.
- Animated banners and hero sections with motion and transitions.
- 3D scenes that run in the browser, such as a rotating product or an interactive background.
- Interactive presentations: slide pages you click through.
- SVG logos and icons in clean vector form.
- Diagrams of processes, funnels and team structure.
Use images from the chat
Images you generate or upload in the chat can be placed into the page, for example a hero image on a landing page or product photos in a catalog section. Generate the visuals first, then ask Modelyx to build the page around them. See Generate and edit images.
Preview, Code and iteration
Switch between Preview to use the result and Code to see its source. To change something, say what to change: "make the header sticky", "add a dark theme", "slow the animation down". Ask Modelyx to update the same artifact, so you keep one evolving version instead of several copies. Each response holds one artifact.
Export
- Download saves the source file for every type: HTML, TSX, SVG, Mermaid or Markdown.
- SVG artifacts also have Download as PNG, Download as SVG and Copy as Image.
- HTML and React artifacts do not export to PNG, GIF or video. For a still banner, use image generation. For a vector logo or icon, ask for an SVG artifact.
Publish by link
Publish creates a public snapshot link: "Anyone with the link can open this artifact." Use Copy URL to share it with someone who has no Modelyx account, such as a client reviewing a landing page or a team opening a dashboard.
- The link shows the version you published. After further changes, click Publish this version to update it.
- A view count shows how often the link was opened.
- Unpublish revokes the link.
Example requests
Build a landing page for a yoga studio in Almaty: hero with the image you generated above, schedule table, 3 price cards, contact form. Mobile-friendly.
Make an animated hero section for a fintech app: dark background, floating 3D cards, headline "Pay in one tap", a call-to-action button.
Create an SVG logo for "Northwind Coffee": a simple mountain and a coffee bean, two colors, works at 32 px.
Limits
- One artifact per response.
- HTML and React artifacts export as source code only, not as images or video.
- A published link is a snapshot; changes appear only after Publish this version.