← 返回

Sandpack 代码演示组件

2025-08-25

Sandpack 是由 CodeSandbox 团队开发的一套组件工具包，用于创建实时运行的代码编辑体验。它允许我们在网页中嵌入一个完整的代码环境，支持多种框架和模板。

基础 Hello World 示例

这是一个最简单的 React Hello World 示例，你可以直接在下面的编辑器中修改代码并看到实时效果：

Code Playground
export default function App() {
  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      textAlign: 'center',
      padding: '50px',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      minHeight: '100vh',
      color: 'white'
    }}>
      <h1 style={{ fontSize: '3em', marginBottom: '20px' }}>
        Hello World! 👋
      </h1>
      <p style={{ fontSize: '1.2em', marginBottom: '30px' }}>
        欢迎来到 Sandpack 代码演示！
      </p>
      <button 
        onClick={() => alert('你好！这是一个可交互的代码示例')}
        style={{
          padding: '12px 24px',
          fontSize: '1.1em',
          border: 'none',
          borderRadius: '25px',
          background: '#ff6b6b',
          color: 'white',
          cursor: 'pointer',
          boxShadow: '0 4px 15px rgba(0,0,0,0.2)'
        }}
      >
        点击我！
      </button>
    </div>
  );
}

特性介绍

🎯 核心特性

  • 实时预览：代码修改后立即看到效果
  • 多种模板：支持 React、Vue、Angular、Vanilla JS 等
  • 在线编辑：完整的代码编辑器体验
  • 依赖管理：自动处理 npm 包依赖
  • 主题定制：支持多种主题和自定义样式

🚀 使用场景

  1. 技术博客：展示代码示例和教程
  2. 文档网站：提供交互式 API 演示
  3. 在线教育：创建编程练习和课程
  4. 代码分享：快速分享可运行的代码片段

进阶示例

带依赖的组件示例

下面展示一个使用外部依赖的更复杂示例：

Code Playground
import { format } from 'date-fns';
import { useState } from 'react';

export default function App() {
  const [date, setDate] = useState(new Date());
  
  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      textAlign: 'center',
      padding: '40px',
      background: 'linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)',
      minHeight: '100vh',
      color: '#333'
    }}>
      <h2>📅 日期格式化示例</h2>
      <p>使用 date-fns 库格式化日期</p>
      
      <div style={{ margin: '20px 0' }}>
        <p><strong>当前时间：</strong></p>
        <p style={{ fontSize: '1.5em', color: '#e74c3c' }}>
          {format(date, 'yyyy年MM月dd日 HH:mm:ss')}
        </p>
      </div>
      
      <button 
        onClick={() => setDate(new Date())}
        style={{
          padding: '10px 20px',
          fontSize: '1em',
          border: 'none',
          borderRadius: '20px',
          background: '#3498db',
          color: 'white',
          cursor: 'pointer',
          margin: '5px'
        }}
      >
        刷新时间
      </button>
      
      <div style={{ marginTop: '30px' }}>
        <h3>不同格式：</h3>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li>📋 ISO: {format(date, 'yyyy-MM-dd')}</li>
          <li>📅 中文: {format(date, 'yyyy年MM月dd日')}</li>
          <li>⏰ 时间: {format(date, 'HH:mm:ss')}</li>
          <li>🌍 英文: {format(date, 'MMMM do, yyyy')}</li>
        </ul>
      </div>
    </div>
  );
}

多文件项目示例

这个示例展示了如何在 Sandpack 中使用多个文件：

Code Playground
import UserCard from './components/UserCard';
import './styles.css';

const users = [
  { id: 1, name: '张三', role: '前端工程师', avatar: '👨‍💻' },
  { id: 2, name: '李四', role: '后端工程师', avatar: '👩‍💻' },
  { id: 3, name: '王五', role: 'UI设计师', avatar: '🎨' }
];

export default function App() {
  return (
    <div className="app">
      <header className="header">
        <h1>🏢 团队成员</h1>
        <p>多文件组件示例</p>
      </header>
      
      <main className="user-grid">
        {users.map(user => (
          <UserCard key={user.id} user={user} />
        ))}
      </main>
    </div>
  );
}

总结

Sandpack 为开发者提供了一个强大而灵活的工具，可以轻松创建交互式的代码演示。无论是写技术博客、制作教程还是分享代码片段，Sandpack 都能提供出色的用户体验。

通过简单的配置，你就可以在网页中嵌入一个功能完整的代码编辑环境，让读者能够直接体验和修改代码，这大大提升了学习和理解的效率。

自定义控制面板

下面是一个完全自定义的 Code Playground，包含了自定义的 header 控制面板，支持主题切换、布局切换、代码重置等功能：

Code Playground
import { useState } from 'react';
import './styles.css';

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Hello World!');
  
  return (
    <div className="app">
      <header className="app-header">
        <h1>{text}</h1>
        <div className="counter-section">
          <p>当前计数: <span className="count">{count}</span></p>
          <div className="button-group">
            <button 
              className="btn btn-minus"
              onClick={() => setCount(count - 1)}
            >
              -
            </button>
            <button 
              className="btn btn-plus"
              onClick={() => setCount(count + 1)}
            >
              +
            </button>
            <button 
              className="btn btn-reset"
              onClick={() => setCount(0)}
            >
              重置
            </button>
          </div>
        </div>
        
        <div className="input-section">
          <label htmlFor="text-input">修改标题:</label>
          <input
            id="text-input"
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="输入新标题..."
          />
        </div>
        
        <div className="feature-demo">
          <h3>🎨 样式演示</h3>
          <div className="color-boxes">
            {['red', 'blue', 'green', 'purple', 'orange'].map(color => (
              <div 
                key={color}
                className={`color-box ${color}`}
                onClick={() => setText(`Hello ${color.toUpperCase()}!`)}
              >
                {color}
              </div>
            ))}
          </div>
        </div>
      </header>
    </div>
  );
}

🎮 控制面板功能

  • 🔄 重置代码：恢复到初始代码状态
  • � 切换行号：显示或隐藏代码编辑器的行号
  • ✨ 格式化代码：自动格式化当前代码（开发中）
  • � 在 CodeSandbox 中打开：将当前代码在 CodeSandbox 中打开
  • 📁 文件浏览器：浏览和切换不同文件
  • 👁️ 实时预览：代码修改后立即看到效果

这个自定义 playground 展示了 Sandpack 的强大扩展能力，你可以根据需求添加更多控制功能。