How to Use PlayCode

Getting started with PlayCode

In this guide, you'll learn how to set up PlayCode and create your first interactive website using AI tools. You'll be ready to build and test your projects directly in your browser without any complicated setup.

Step 1: Sign up and set up

1. Go to PlayCode.
2. Click on the "Sign Up" button in the top right corner.
3. Choose to sign up with your email or use a social login (Google or GitHub).
4. Confirm your email if prompted. Once signed in, select "New Project" to start.

Step 2: Your first project

1. After clicking "New Project," choose a template (e.g., React, Vue, or Vanilla JS).
2. You’ll see a code editor on the left and a live preview on the right.
3. In the code editor, replace the default code with a simple interactive element. For example, for a React project, you can add:

function App() {
       return <h1>Hello, PlayCode!</h1>;
   }
   export default App;

1. Click the "Run" button at the top to see your changes reflected in real-time in the preview.

Step 3: Get better results

1. Use the "Settings" gear icon in the top right to configure your project settings, such as enabling TypeScript or selecting a CSS framework.
2. Explore the "AI Models" panel on the left to access different AI tools that can help you generate code snippets or troubleshoot issues.
3. Use the "Docs" button in the top menu for quick access to documentation relevant to your chosen framework.

Pro tip

Use the "Fork" button to create a copy of any existing project. This allows you to experiment with new ideas without losing your original work.

Common mistake to avoid

Avoid skipping the initial setup of your project template. Choosing the right framework at the start will save you time later on, as it ensures that the necessary files and configurations are in place.