Artifacts & Preview

Alma's artifact system provides rich content rendering and interactive previews for generated content.

Artifact Types

HTML

Static HTML content rendered in an isolated frame.

• Full HTML/CSS/JS support
• Sandboxed for security
• Download as file

React

Interactive React apps with live preview.

• JSX compilation
• React hooks support
• Tailwind CSS included

Mermaid

Diagrams rendered from Mermaid syntax.

• Flowcharts
• Sequence diagrams
• Class diagrams
• And more...

SVG

Vector graphics rendered inline.

• Scalable graphics
• Interactive elements
• Download support

Code

Syntax-highlighted code blocks.

• 100+ languages
• Line numbers
• Copy to clipboard

Preview Panel

Opening Preview

When the AI generates an artifact:

• The preview panel opens automatically
• Or click the Preview button on the artifact

Preview Controls

• Refresh: Reload the preview
• Full Screen: Expand to full window
• Download: Save the artifact
• Code View: Toggle between preview and source

Resizing

Drag the panel edge to resize the preview area.

Artifact Workspace

Generated artifacts are stored in a dedicated workspace:

• Location: ~/Library/Application Support/alma/artifacts/ (macOS)
• Organized by thread
• Accessible via file tools

Project Preview

For React and HTML projects, Alma can run a development server:

Starting Preview Server

1. Alma detects project type automatically
2. Click Start Preview in the artifact panel
3. The preview server starts
4. Content reloads on changes

Supported Project Types

• Bun + Vite: Full React development
• Static HTML: Simple file serving
• Unknown: Best-effort preview

Server Controls

• Start/Stop: Toggle server
• Status: View running state
• Logs: Debug output

Best Practices

Creating Good Artifacts

Ask the AI to:

• Create complete, self-contained files
• Include all necessary imports
• Use modern, clean code

Working with React

"Create a React component for a login form"
"Add dark mode support to this component"
"Make this responsive for mobile"

Diagrams

"Create a flowchart showing the user registration process"
"Draw a sequence diagram for the API call"
"Make a class diagram for this module"

Troubleshooting

"Preview Not Loading"

• Check the console for errors
• Ensure all imports are included
• Try refreshing the preview

"React Component Error"

• Verify JSX syntax
• Check for missing dependencies
• Look at the error message

"Server Won't Start"

• Check if ports are available
• Verify project structure
• Look at server logs