Skip to content
Uvilo OS
archived Visibility internal Owner erik@uvilo.com Approver _ Created _ Updated _

Artifact Test File

One working example of each artifact type. Paste into a LibreChat conversation to verify rendering.

1. HTML (text/html)

:::artifact{identifier="test-html" type="text/html" title="Test HTML Page"}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
    h1 { color: #2563eb; }
    p { line-height: 1.6; }
  </style>
</head>
<body>
  <h1>HTML Artifact Test</h1>
  <p>This is a test of the <strong>text/html</strong> artifact type. If you can see this rendered as a page in the artifact panel, the HTML type is working.</p>
  <img src="/api/placeholder/400/200" alt="placeholder" />
</body>
</html>
:::

2. SVG (image/svg+xml)

:::artifact{identifier="test-svg" type="image/svg+xml" title="Test SVG"}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#3b82f6" opacity="0.8" />
  <circle cx="100" cy="100" r="50" fill="#ffffff" opacity="0.6" />
  <circle cx="100" cy="100" r="20" fill="#1e40af" />
</svg>
:::

3. Markdown (text/markdown)

:::artifact{identifier="test-markdown" type="text/markdown" title="Test Markdown"}
# Markdown Artifact Test

## Features

- **Bold** and *italic* text
- [Links](https://example.com)
- Code blocks

```python
def hello():
    print("Hello from artifact!")
Column AColumn B
Cell 1Cell 2
Cell 3Cell 4

This is a blockquote.

If this renders as formatted Markdown in the artifact panel, the Markdown type is working. :::


## 4. Mermaid (`application/vnd.mermaid`)

graph LR A[Start] —> B{Decision} B —>|Yes| C[Action 1] B —>|No| D[Action 2] C —> E[End] D —> E


## 5. React (`application/vnd.react`)

import { useState } from ‘react’;

export default function TestCounter() { const [count, setCount] = useState(0); return (

React Artifact Test

Count: {count}

<button className=“bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600” onClick={() => setCount(count + 1)} > Increment
); }