Introduction

Welcome to CodePlayground - The modern platform for building, testing, and sharing code in real-time.

What is CodePlayground?

CodePlayground is a next-generation development environment that runs entirely in your browser. It combines the power of modern frameworks with the simplicity of a collaborative workspace.

Zero Config

No setup required. Start coding instantly with pre-configured templates.

Real-time Preview

See changes instantly with live reload and hot module replacement.

Cloud Sync

Your work is automatically saved and accessible from anywhere.

Team Collaboration

Share and collaborate on code in real-time with your team.

Quick Start

Get started with CodePlayground in three simple steps:

Create an account

Choose a template

Select from React, Next.js, Vue, Express, and 20+ other frameworks.

Start coding

Write code and see the results instantly in the live preview.

Example

Here's a simple counter component you can build in seconds:

jsx

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="p-8 text-center">
      <h1 className="text-4xl font-bold mb-4">{count}</h1>
      <button
        onClick={() => setCount(count + 1)}
        className="px-6 py-2 bg-[#0070f3] text-white rounded-lg hover:bg-[#0060df] transition-colors"
      >
        Increment
      </button>
    </div>
  );
}

Installation

While CodePlayground works entirely in the browser, you can also run it locally:

bash

# Clone the repository
git clone https://github.com/vercel/codeplayground.git

# Install dependencies
npm install

# Start the development server
npm run dev

# Your app will be available at http://localhost:3000

API Reference

Use our REST API to integrate CodePlayground into your workflow:

javascript

// Create a new playground
const response = await fetch('https://api.codeplayground.dev/v1/playgrounds', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'My Project',
    template: 'react',
    files: {
      'App.jsx': 'export default function App() { return <h1>Hello</h1>; }'
    }
  })
});

const playground = await response.json();
console.log(playground.id);