🌌 Gravity Artifacts

The physics-first code runner for React. Drop-in Claude Artifacts for any AI app.

✨ What is Gravity Artifacts?

Gravity Artifacts is a single React component that gives any AI chat application a beautiful, interactive code execution panel — just like Claude Artifacts, but open-source, customizable, and installable in seconds.

When your AI generates code (React, HTML, CSS, JavaScript), Gravity Artifacts automatically:

• 🎯 Extracts code blocks from the AI's streaming response in real-time
• ⚡ Compiles TSX/JSX/HTML instantly in the browser (no server needed)
• 🖥️ Renders the result in a secure, sandboxed iframe
• 🌊 Animates the panel with physics-based spring animations (gravity, bounce, elasticity)

🚀 Quick Start

npm install gravity-artifacts

import { GravityArtifact } from 'gravity-artifacts';

function MyAIChat() {
  const [code, setCode] = useState('');

  return (
    <div className="flex h-screen">
      <ChatPanel onCodeGenerated={setCode} />
      <GravityArtifact 
        code={code} 
        theme="dark" 
        animation="spring"
      />
    </div>
  );
}

🎬 Demo

Live Playground →

📦 Features

• 🧊 Zero Config — Works out of the box with any React app
• 🔒 Secure Sandbox — All code runs in an isolated iframe (XSS-safe)
• 🌊 Real-Time Visual Streaming — Renders and compiles code dynamically during LLM token streaming with automatic JSX tag recovery
• 🚀 1-Click Deployments — Deploy the sandbox directly to Vercel or Netlify with a single click
• 📦 Vite & StackBlitz Export — Export the workspace as a mountable Vite structure or open it instantly in StackBlitz with React/Vue/Svelte configurations
• 🎨 CSS Variable Customizer — Float controls sidebar to adjust custom CSS variables and Tailwind themes instantly via secure postMessage tunnels
• 🪲 Inline Monaco Diagnostics — Displays console logs, warnings, and compiler errors as visual underlines and editor decorations directly on the code lines
• 📱 Premium Device Mockups — Immersive borders, cameras (Dynamic Island), and orientations for desktop, tablet, and mobile views
• 🔍 Zoom Controls — Slider to zoom in/out of the rendered preview
• 📋 Code Editor — Monaco Editor integration with full syntax highlighting, tabs, and multi-file editing
• 🔄 Multi-Framework Support — Out-of-the-box support for React, Vue 3 (SFC), and Svelte 5
• Shadcn/Tailwind Ready — Injects shadcn-compatible CSS variables and Tailwind color tokens into the sandbox iframe
• Offline WASM Option — Pass wasmUrl to self-host esbuild.wasm when CDN access is unavailable
• Asset Mapping — Pass assetMapper to resolve local image paths, with aesthetic placeholders for missing generated assets
• IDE Shortcuts — Ctrl/Cmd+S and Ctrl/Cmd+Enter refresh the preview without triggering browser save
• 🎛️ Console Panel — Live console.log/error output from the sandbox
• 🧩 Framework Agnostic — Works with any AI backend (OpenAI, Anthropic, etc.)

📖 Documentation

| Document | Description | |----------|-------------| | Vision & Purpose | What this project is and why it exists | | Tech Stack | All technologies used and why | | Design System | Colors, typography, animations, tokens | | API Reference | Complete component props and methods | | Architecture Overview | How the system works internally | | Compiler Engine | How TSX compilation works in-browser | | Sandbox Security | iframe isolation and XSS protection | | Streaming Parser | How code is extracted from AI streams | | Component Tree | Visual component hierarchy | | Features Spec | Detailed feature specifications | | Props API Spec | Every prop, type, and default value | | Animations Spec | All animation definitions | | Themes Spec | Theme system and customization | | File Structure | Exact code file/folder layout | | Publishing Guide | How to build and publish to NPM | | Marketing Plan | Launch strategy for maximum visibility |

🛠️ Development

# Clone the repo
git clone https://github.com/gonzalomendez/gravity-artifacts.git

# Install dependencies
cd gravity-artifacts
pnpm install

# Start the development playground
pnpm dev

# Build the library
pnpm build

# Run tests
pnpm test

📄 License

MIT © Gonzalo Mendez